html, body { margin: 0; padding: 0; font-family: system-ui, sans-serif; background: #fff5f8; color: #222; }
body { -webkit-tap-highlight-color: transparent; }
#app { max-width: 1360px; margin: 0 auto; padding: 12px; }
header, .panel { background: #fff; border-radius: 14px; padding: 12px; box-shadow: 0 4px 18px rgba(0,0,0,0.06); }
main { display: grid; grid-template-columns: minmax(0, 3.6fr) minmax(200px, 0.78fr); gap: 12px; margin-top: 12px; align-items: start; }
.room-actions, .chat-actions, .invite-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.status-row, .score-row { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 6px; }
#chat-box { min-height: 160px; max-height: 320px; overflow: auto; border: 1px solid #eee; border-radius: 12px; padding: 10px; background: #fffafc; }
input, button, summary { font: inherit; }
input { flex: 1; padding: 9px 11px; border: 1px solid #ddd; border-radius: 10px; min-width: 0; }
button { padding: 9px 12px; border: 0; border-radius: 10px; background: #ff6b81; color: white; cursor: pointer; transition: transform .12s ease, filter .12s ease, background .2s ease, color .2s ease, opacity .2s ease; }
button:hover { filter: brightness(0.98); }
button:active { transform: scale(0.98); }
button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.players-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.player-chip { padding: 5px 8px; border-radius: 999px; background: #ffe8ee; font-size: 13px; }
.lead-hint { margin-bottom: 8px; padding: 9px 11px; border-radius: 12px; font-weight: 700; font-size: 13px; }
.lead-hint.coop { background: #fff3e8; color: #9c4a00; }
.lead-hint.lead { background: #e9f8ef; color: #0d7a39; }
.lead-hint.behind { background: #fff0f1; color: #c2384f; }
.lead-hint.neutral { background: #eef3ff; color: #3156b8; }
.invite-strip { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 12px; border-radius: 14px; background: linear-gradient(135deg, #fff2f6 0%, #fff8ef 100%); border: 1px solid #ffe0e7; transition: background .28s ease, border-color .28s ease, box-shadow .28s ease, transform .24s ease; }
.invite-strip[data-state="paired"] { background: linear-gradient(135deg, #eefaf3 0%, #f7fffb 100%); border-color: #cfead8; box-shadow: inset 0 0 0 1px rgba(67, 160, 100, 0.04); }
.invite-strip[data-state="pending"] { background: linear-gradient(135deg, #f8f1ff 0%, #fff8fb 100%); border-color: #e7d8fb; }
.invite-copy { min-width: 0; }
.invite-headline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.invite-title { font-weight: 800; color: #444; font-size: 15px; }
.invite-badge { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; background: #ffe8ee; color: #b83f5d; font-size: 12px; font-weight: 700; transition: background .24s ease, color .24s ease, transform .2s ease; }
.invite-strip[data-state="paired"] .invite-badge { background: #e5f7ea; color: #167748; }
.invite-strip[data-state="pending"] .invite-badge { background: #efe7ff; color: #6e47b8; }
.invite-subtitle { margin-top: 3px; color: #666; font-size: 13px; line-height: 1.4; word-break: break-all; transition: color .24s ease, opacity .24s ease; }
.invite-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; min-height: 24px; }
.room-chip-btn { padding: 5px 10px; border-radius: 999px; background: #fff; color: #7f3751; border: 1px solid #f3c7d3; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.room-chip-btn:hover { filter: none; background: #fff8fb; }
.invite-feedback { font-size: 12px; color: #666; opacity: 0; transform: translateY(4px); transition: opacity .22s ease, transform .22s ease, color .22s ease; }
.invite-feedback.show { opacity: 1; transform: translateY(0); }
.invite-feedback.success { color: #18794e; }
.invite-feedback.error { color: #c73d52; }
.invite-actions { align-items: stretch; }
.btn-success { background: #29a36a !important; color: white !important; }
.manual-room-box { margin-top: 10px; border: 1px dashed #f1c7d0; border-radius: 14px; background: #fffafb; overflow: hidden; }
.manual-room-box summary { cursor: pointer; list-style: none; padding: 10px 12px; color: #9a5b68; font-weight: 700; }
.manual-room-box summary::-webkit-details-marker { display: none; }
.manual-room-box[open] summary { border-bottom: 1px dashed #f1c7d0; }
.room-actions-secondary { margin-top: 0; padding: 10px 12px 12px; }
.room-actions-primary { margin-top: 10px; }
.panel-game { min-width: 0; }
.panel-chat { min-width: 0; }
.boards-shell { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(170px, 0.55fr); gap: 12px; align-items: start; }
.boards-shell.solo-mode { grid-template-columns: minmax(0, 1fr); }
.boards-shell.solo-mode #my-board-panel { width: min(100%, 980px); }
.boards-shell.opponent-zoomed { grid-template-columns: minmax(160px, 0.68fr) minmax(0, 1.5fr); }
.board-panel { min-width: 0; transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease; position: relative; }
.board-panel-main { z-index: 1; }
.board-panel-opp { z-index: 2; }
.board-panel-opp.zoomed { transform: scale(1.01); }
.board-panel.focus-board .match-board { box-shadow: 0 0 0 3px rgba(255,107,129,.18), 0 10px 30px rgba(255,107,129,.08); }
.board-panel.done-board { opacity: 0.88; }
.board-panel.done-board .match-board { filter: saturate(0.94); }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.board-title { font-weight: 700; color: #444; font-size: 14px; }
.board-progress { font-size: 12px; font-weight: 700; color: #ff6b81; }
.board-badge { display: inline-block; margin-bottom: 6px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
#my-board-badge { background: #fff3d8; color: #a96000; }
#opponent-board-badge { background: #eaf5ff; color: #2f67b8; }
.board-stage { position: relative; overflow: hidden; }
.board-stage-opp { min-height: 250px; cursor: zoom-in; }
.board-panel-opp.zoomed .board-stage-opp { cursor: zoom-out; }
.match-board { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; background: #fff0f5; border-radius: 16px; padding: 10px; min-height: 500px; width: 100%; max-width: 100%; box-sizing: border-box; position: relative; z-index: 1; overflow: hidden; }
.match-board.board-empty { display: flex; align-items: center; justify-content: center; }
.board-empty-state { width: min(100%, 520px); text-align: center; padding: 30px 18px; border-radius: 18px; background: rgba(255,255,255,0.78); color: #9a5b68; font-weight: 700; font-size: 16px; line-height: 1.6; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.55); }
.opponent-board { min-height: 250px; }
.path-canvas { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); pointer-events: none; z-index: 2; }
.tile { aspect-ratio: 1 / 1; min-width: 0; min-height: 34px; width: 100%; border-radius: 12px; border: 0; background: white; box-shadow: 0 3px 10px rgba(0,0,0,0.08); font-size: clamp(16px, 1.1vw, 24px); line-height: 1; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease, opacity .18s ease; overflow: hidden; }
.tile:hover { transform: translateY(-1px); }
.tile.selected { outline: 3px solid #ff6b81; transform: scale(1.03); box-shadow: 0 0 0 4px rgba(255,107,129,.18); }
.tile.flash { background: #ffe082; transform: scale(1.05); }
.tile.opp-flash { background: #dff4ff; box-shadow: 0 0 0 3px rgba(80,160,255,.18); }
.tile.empty { background: transparent; box-shadow: none; cursor: default; }
.tile.spectator-tile { opacity: 0.86; cursor: inherit; }
.opponent-activity { position: absolute; right: 8px; bottom: 8px; z-index: 3; background: rgba(49, 86, 184, 0.92); color: white; padding: 5px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
#timer-text { font-weight: 700; color: #d63031; }
.hidden { display: none !important; }
.game-overlay { position: fixed; inset: 0; background: rgba(25, 20, 24, 0.45); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 100; backdrop-filter: blur(2px); }
.game-overlay.hidden { display: none; }
.overlay-card { width: min(92vw, 360px); background: white; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.18); padding: 20px; text-align: center; }
.overlay-title { font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.overlay-text { color: #555; margin-bottom: 10px; line-height: 1.5; }
.overlay-meta { color: #444; font-size: 14px; line-height: 1.6; margin-bottom: 16px; background: #faf5f7; border-radius: 12px; padding: 10px 12px; }
.overlay-actions { display: flex; gap: 10px; justify-content: center; }
.ghost-btn { background: #f3f4f8; color: #444; }
@media (max-width: 1280px) {
  #app { max-width: 1460px; }
  main { grid-template-columns: minmax(0, 1fr); }
  .boards-shell, .boards-shell.opponent-zoomed, .boards-shell.solo-mode { grid-template-columns: 1fr; }
  .panel-chat { order: 2; }
  .panel-game { order: 1; }
}
@media (max-width: 980px) {
  #app { padding: 12px; }
  .status-row, .score-row { flex-wrap: wrap; }
  .invite-strip { flex-direction: column; align-items: stretch; }
  .invite-actions > *, .room-actions-primary > *, .room-actions-secondary > * { flex: 1 1 calc(50% - 8px); }
  .chat-actions > * { flex: 1 1 auto; }
  .match-board { min-height: 420px; gap: 6px; padding: 10px; }
  .opponent-board, .board-stage-opp { min-height: 260px; }
  .board-empty-state { font-size: 16px; padding: 28px 18px; }
  .path-canvas { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
  .tile { min-height: 30px; border-radius: 10px; font-size: clamp(16px, 4.2vw, 26px); }
}
@media (max-width: 560px) {
  header, .panel { padding: 12px; border-radius: 14px; }
  .invite-actions > *, .room-actions-primary > *, .room-actions-secondary > * { flex: 1 1 100%; }
  .match-board { gap: 3px; min-height: 300px; padding: 6px; }
  .board-empty-state { font-size: 15px; line-height: 1.6; padding: 22px 14px; }
  .path-canvas { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
  .tile { min-height: 24px; border-radius: 8px; font-size: clamp(13px, 4vw, 20px); }
  .overlay-actions { flex-direction: column; }
  .overlay-actions button { width: 100%; }
}
@media (max-width: 400px) {
  #app { padding: 8px; }
  .match-board { gap: 2px; padding: 4px; min-height: 260px; }
  .tile { min-height: 20px; border-radius: 7px; font-size: clamp(11px, 3.8vw, 17px); }
}