/* Literature client — pixel-art theme. Fully white, vanilla CSS, no assets. */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: #ffffff; color: #1b2340;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  -webkit-tap-highlight-color: transparent;
}
#app { max-width: 780px; margin: 0 auto; padding: 10px 12px 48px; }

.screen { display: none; background: #ffffff; }
.screen.active { display: block; }
.hidden { display: none !important; }
.center { text-align: center; }

/* pixel canvases: always crisp */
canvas.px, canvas.pxcard {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: inline-block;
  vertical-align: middle;
}
canvas.pxcard { width: 52px; height: auto; cursor: pointer; }
canvas.pxcard.static { cursor: default; }
canvas.pxcard.mini { width: 36px; }
canvas.pxcard.tiny { width: 15px; }

/* chunky pixel buttons */
.pxbtn {
  background: #ffffff;
  border: 3px solid #1b2340;
  border-radius: 6px;
  box-shadow: 4px 4px 0 #1b2340;
  padding: 8px 14px;
  cursor: pointer;
  margin: 6px;
}
.pxbtn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #1b2340; }
.pxbtn:disabled { opacity: 0.3; box-shadow: none; transform: none; cursor: default; }
.pxbtn.sel { background: #1b2340; }
.pxbtn.sel canvas { filter: invert(1); }

input, select {
  background: #ffffff; color: #1b2340;
  border: 3px solid #1b2340; border-radius: 6px;
  box-shadow: 4px 4px 0 #1b2340;
  padding: 10px 12px; font-size: 18px;
  font-family: inherit;
  max-width: 100%;
}
input:focus, select:focus { outline: 3px solid #d9a400; }

/* connection dot + hidden practice dot */
#conn {
  position: fixed; top: 12px; left: 12px; z-index: 60;
  width: 10px; height: 10px; background: #c9cdd6;
}
#conn.on { background: #1f9d55; }
#prac-dot { position: fixed; top: 10px; right: 10px; z-index: 60; }

/* ---- entrance ---- */
#screen-entrance .center { padding-top: 4vh; }
#logo { width: min(92vw, 460px); height: auto; cursor: pointer; }
#in-name {
  display: block; margin: 18px auto; width: min(78vw, 300px);
  text-align: center; text-transform: uppercase;
}
#btn-enter { min-width: 76px; }

/* ---- home: room grid ---- */
.rooms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 14px; padding: 14px 4px;
}
.roombox {
  background: #ffffff; border: 3px solid #1b2340; border-radius: 12px;
  box-shadow: 4px 4px 0 #1b2340;
  padding: 8px 6px 6px; cursor: pointer; text-align: center;
}
.roombox:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #1b2340; }
.roombox canvas.tbl { width: 100%; height: auto; }
.roombox.new { display: flex; align-items: center; justify-content: center; min-height: 190px; }

/* ---- lobby ---- */
#lobby-code { margin: 10px 0 2px; cursor: pointer; display: inline-block; }
#lobby-table { width: min(86vw, 330px); height: auto; }
.teamrow { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
#btn-start { margin-top: 4px; }

/* ---- game: fits one phone screen, no scroll ---- */
#screen-game.active {
  display: flex; flex-direction: column;
  height: 100dvh; max-height: 100dvh;
  overflow: hidden; padding: 4px 6px;
}
#scorebar { display: flex; justify-content: center; align-items: center; gap: 14px; margin: 2px 0; flex: 0 0 auto; }
#books-strip {
  display: flex; flex-wrap: wrap; gap: 2px 8px;
  justify-content: center; margin: 0 0 2px; max-width: 100%;
  flex: 0 0 auto; line-height: 1;
}
#op-banner {
  border: 3px solid #1b2340; border-radius: 10px;
  box-shadow: 4px 4px 0 #1b2340;
  padding: 6px; margin: 4px 0; text-align: center; background: #ffffff;
  flex: 0 0 auto;
}
.op-actions { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }

/* last ask: always visible, graphical */
#last-ask {
  border: 3px solid #1b2340; border-radius: 8px;
  padding: 4px 6px; margin: 2px 0; background: #ffffff;
  flex: 0 0 auto; text-align: center;
}
#last-ask .la-row { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
#last-ask .la-cards { display: flex; gap: 3px; justify-content: center; margin-top: 2px; }
#last-ask canvas.pxcard { width: 30px; }
.la-got { outline: 2px solid #1f9d55; outline-offset: -2px; }
.la-missed { outline: 2px solid #c0392b; outline-offset: -2px; }

#table { position: relative; width: min(88vw, 320px, 40dvh); height: min(88vw, 320px, 40dvh); margin: 8px auto 2px; flex: 0 0 auto; }
/* shrink the table while the ask panel is open so everything still fits */
#screen-game.asking #table { width: min(64vw, 220px, 26dvh); height: min(64vw, 220px, 26dvh); }
.tablefelt {
  position: absolute; inset: 18%;
  border: 3px solid #1b2340; border-radius: 50%;
  background: #ffffff;
}
.seat {
  position: absolute; width: 64px;
  transform: translate(-50%, -50%);
  text-align: center;
}
.seat .av {
  width: 30px; height: 30px;
  border: 3px solid #9aa0b4; border-radius: 8px;
  background: #ffffff;
}
.seat.team0 .av { border-color: #2b6cb0; }
.seat.team1 .av { border-color: #c0392b; }
.seat .nm { display: block; margin-top: 0; max-width: 64px; overflow: hidden; }
.seat .ct { display: block; margin-top: 0; }
.seat.out { opacity: 0.35; }
.seat.off .av { opacity: 0.35; }
.seat.turn .av { box-shadow: 0 0 0 3px #d9a400; }
.seat.targetable { cursor: pointer; }
.seat.targetable .av { box-shadow: 0 0 0 3px #1f9d55; }
.seat.selected .av { box-shadow: 0 0 0 3px #d9a400; }
.seat.me .av { border-style: double; }

#ask-panel {
  border: 3px solid #1b2340; border-radius: 10px;
  box-shadow: 4px 4px 0 #1b2340;
  padding: 4px 6px; margin: 2px 0; background: #ffffff;
  flex: 0 0 auto; max-height: 34dvh; overflow-y: auto;
}
#ask-head { text-align: center; margin-bottom: 0; }
#ask-head canvas { height: 18px !important; }
.chiprow { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 3px 0; }
.chiprow .pxbtn { padding: 4px 8px; margin: 2px; }
.chiprow .pxbtn.setchip { padding: 4px 6px; line-height: 0; }
.chiprow .pxbtn.setchip canvas { width: 44px; height: 32px; }
.chiprow .pxbtn.setchip.sel canvas { filter: invert(1); }
.cardopts { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 4px 0; }
.cardopts canvas.pxcard { width: 40px; }
#ask-panel .center .pxbtn { padding: 6px 12px; margin: 2px; }

/* hand: overlapping fan at the bottom, draggable */
#hand {
  flex: 0 0 auto; height: 96px;
  position: relative; margin: 2px 0;
  touch-action: pan-y;
}
#hand-fan { position: relative; height: 100%; width: 100%; }
.hand-card {
  position: absolute; bottom: 0;
  cursor: grab; user-select: none; -webkit-user-select: none;
  touch-action: none;
  transition: transform 0.12s ease;
}
.hand-card canvas.pxcard { width: 46px; display: block; }
.hand-card.dragging { cursor: grabbing; z-index: 10; transition: none; }
.hand-card.dragging canvas.pxcard { filter: brightness(1.08); }
/* Siblings shift smoothly to show the live drop gap during drag */
#hand-fan.drag-active .hand-card:not(.dragging) { transition: transform 0.12s ease; }

#actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; margin: 2px 0; flex: 0 0 auto; }
#actions .pxbtn { padding: 6px 10px; margin: 2px; }
.pxbtn.small { padding: 4px 10px; margin: 4px; font-size: 14px; }
#btn-lobby-exit { margin-top: 8px; }

/* ---- modals ---- */
.modal {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 22px 12px; overflow-y: auto;
}
.modal-box {
  background: #ffffff; border: 3px solid #1b2340; border-radius: 12px;
  box-shadow: 6px 6px 0 #1b2340;
  padding: 14px; width: 100%; max-width: 540px;
}
.mtitle { text-align: center; margin-bottom: 8px; }
.modal-box select { width: 100%; margin: 6px 0; }
.drow { display: flex; align-items: center; gap: 10px; margin: 7px 0; }
.drow select { margin: 0; flex: 1; }
#declare-next-wrap, #opassign-next-wrap { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
#declare-next-wrap select, #opassign-next-wrap select { flex: 1; margin: 0; }
.modal-actions { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }

/* ---- over ---- */
#over-title { margin: 6vh 0 8px; }
#over-score { margin-bottom: 12px; }
#over-books { margin: 0 auto 14px; max-width: 560px; }
.obook {
  display: flex; align-items: center; gap: 8px;
  border: 3px solid #1b2340; border-radius: 8px;
  padding: 6px 8px; margin: 6px 0; background: #ffffff;
}
.obook .ocards { display: flex; gap: 2px; }
.obook.t0 { box-shadow: 3px 3px 0 #2b6cb0; }
.obook.t1 { box-shadow: 3px 3px 0 #c0392b; }

/* ---- toast ---- */
.toast {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: #1b2340; color: #ffffff;
  border: 3px solid #1b2340; border-radius: 8px;
  box-shadow: 4px 4px 0 rgba(27, 36, 64, 0.35);
  padding: 10px 16px; font-size: 14px; max-width: 92vw; z-index: 70;
}

/* ---- loading spinner ---- */
.spinner {
  width: 32px; height: 32px; margin: 0 auto;
  border: 4px solid #c9cdd6; border-top-color: #1b2340; border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Seats in top half: name above avatar to avoid table overlap */
.seat.top-half { display: flex; flex-direction: column-reverse; align-items: center; }
.seat.top-half .nm { margin-bottom: 2px; }

/* Disabled (greyed out) set chips and cards in ask panel */
.setchip.disabled { opacity: 0.35; cursor: not-allowed; }
#ask-cards canvas.pxcard.disabled { opacity: 0.35; cursor: not-allowed; }

/* Wait screen: center spinner vertically and horizontally */
#screen-wait .center {
  display: flex; align-items: center; justify-content: center;
  min-height: 80vh;
}

/* Game-over stats */
#over-stats { margin: 12px 0; }
.ostat { margin: 4px 0; }

/* Avatar picker */
#avatar-picker {
  display: grid; grid-template-columns: repeat(4, 48px);
  gap: 8px; justify-content: center;
  margin: 12px 0;
}
.avatar-opt {
  width: 48px; height: 48px;
  border: 3px solid #d4d8e2; border-radius: 8px;
  background: #fff; cursor: pointer; padding: 4px;
}
.avatar-opt.sel { border-color: #d9a400; }
.avatar-opt canvas { width: 100%; height: 100%; }

/* Declare flow panel */
#declare-panel {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.98);
  border-top: 3px solid #23232b;
  padding: 10px; z-index: 50;
  max-height: 45vh; overflow-y: auto;
  display: flex; flex-direction: column;
}
#declare-panel .center {
  position: sticky; bottom: 0;
  background: rgba(255,255,255,0.98);
  padding-top: 8px; margin-top: auto;
}
#declare-head { text-align: center; margin-bottom: 8px; }
#declare-hint { text-align: center; margin: 8px 0; font-size: 14px; color: #666; }
#declare-cards .cardopt.assigned { opacity: 0.4; }
#declare-cards .cardopt.selcard { outline: 3px solid #d9a400; }
.seat.assign-target { cursor: pointer; }
.seat.assign-target:hover { transform: scale(1.05); }