:root {
  --panel-width: 260px;
  --bar-height: 2.75rem;
  --ink: #1d1d1f;
  --muted: #6b6b70;
  --line: #d9d9de;
  --accent: #2f7d4f;
  --bg: #f4f1ea;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
h1 { font-size: 1.15rem; margin: .5rem 0; overflow-wrap: anywhere; }
h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 1.2rem 0 .4rem; }
button {
  font: inherit; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 6px;
  background: white; cursor: pointer;
}
button:hover, .button:hover { border-color: var(--muted); }
button:disabled { opacity: .45; cursor: default; }
button:disabled:hover { border-color: var(--line); }
.button {
  display: inline-block; font: inherit; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 6px;
  background: white; color: inherit; text-decoration: none; cursor: pointer;
}
.link-button { border: 0; padding: 0; background: none; color: var(--muted); text-decoration: underline; font-size: inherit; }
textarea { font: inherit; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 6px; width: 100%; margin-bottom: .6rem; }
button[type="submit"] { background: var(--accent); color: white; border-color: var(--accent); }
input, select { font: inherit; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 6px; width: 100%; }
.field { display: block; margin: .8rem 0; font-size: .9rem; }
.field input, .field select { margin-top: .25rem; }
.muted { color: var(--muted); }
.small { font-size: .8rem; }
.status { min-height: 1.2em; margin-top: .6rem; font-size: .85rem; color: #a33; }
.preview { display: block; width: 100%; margin-top: .4rem; border-radius: 4px; }
.card { background: white; border-radius: 10px; padding: 1.2rem 1.4rem; box-shadow: 0 2px 12px rgba(0,0,0,.08); }

/* Home */
.home { max-width: 560px; margin: 2.5rem auto; padding: 0 1rem; }
.home .card { margin-bottom: 1rem; }
.home .card p { margin: .3rem 0 .8rem; }
.library { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.tile { padding: 0; overflow: hidden; text-align: left; display: block; width: 100%; }
.tile img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #eee; }
.tile span { display: block; padding: .4rem .5rem; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.standalone .not-standalone { display: none !important; }
.group-list { list-style: none; margin: 0; padding: 0; }
.group-list li { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .5rem 0; border-bottom: 1px solid #f0f0f2; }
.group-list li:last-child { border-bottom: 0; }
.group-info { min-width: 0; }
.group-name { color: var(--ink); font-weight: 600; text-decoration: none; }
.group-name:hover { text-decoration: underline; }
.home h1 { font-size: 1.4rem; margin: 0 0 .3rem; }
.check { display: block; font-size: .85rem; margin: .4rem 0; }
.check input { width: auto; margin-right: .3rem; }
button.danger { color: #a33; }
.small-button { font-size: .8rem; padding: .3rem .6rem; }
.toast {
  position: fixed; top: .8rem; left: 50%; transform: translateX(-50%); z-index: 150000;
  background: var(--ink); color: white; padding: .55rem 1rem; border-radius: 8px; font-size: .9rem;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.toast[hidden] { display: none; }
.toast.offline { background: #7a5a12; max-width: calc(100% - 2rem); text-align: center; }
.toast a, .toast .link-button { color: white; }
.join-name { width: auto; flex: 1; min-width: 10rem; }
.proposals li { align-items: flex-start; }
.proposals li.open strong { color: var(--ink); }
.proposals li:not(.open) { opacity: .7; }
#proposeForm select { width: auto; }
.queue .transfer { margin-top: .4rem; display: flex; gap: .3rem; }
.queue .transfer select { width: auto; }
.role-badge { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-left: .4rem; }
.role-badge.owner { color: var(--accent); font-weight: 600; }
.members li { gap: .5rem; }
.members .buttons { gap: .25rem; justify-content: flex-end; }
.report-name { border: 0; background: none; padding: 0 .3rem; margin-left: auto; color: #b9b6ae; font-size: .8rem; cursor: pointer; }
.report-name:hover { color: #a33; }
.report-name:disabled { visibility: hidden; }
.scoreboard li .player-count { margin-left: .4rem; }
.scoreboard li .report-name + .player-count { margin-left: 0; }
#members .report-name { margin-left: 0; }
.recent-thumb { width: 64px; height: 44px; object-fit: cover; border-radius: 4px; background: #eee; flex: 0 0 auto; }
#recent li { justify-content: flex-start; }
#recent li .group-info { flex: 1; }
.link-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.8rem; letter-spacing: .12em; margin: .6rem 0 .2rem; user-select: all; }
.button.primary { background: var(--accent); color: white; border-color: var(--accent); }
.inline-form { display: flex; gap: .4rem; margin: .6rem 0; }
.inline-form input { flex: 1; }
.today-row { display: flex; gap: 1rem; align-items: flex-start; }
.today-preview { width: 42%; max-width: 240px; border-radius: 6px; background: #eee; flex: 0 0 auto; }
.today-info { min-width: 0; flex: 1; }
.today-info h1 { margin: 0 0 .3rem; }
.today-info .button { margin-top: .4rem; }
.days { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: .4rem; }
.days th { text-align: left; font-weight: 600; color: var(--muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; padding: .3rem .4rem .3rem 0; }
.days td { padding: .35rem .4rem .35rem 0; border-top: 1px solid #f0f0f2; vertical-align: middle; }
.days .thumb { width: 64px; height: 44px; object-fit: cover; border-radius: 4px; background: #eee; }
.days select { width: auto; max-width: 16rem; }
.days .pieces { width: 5rem; }
.days .cut-stack { display: flex; flex-direction: column; gap: .25rem; width: 11rem; }
.days .cut-stack input, .days .cut-stack select { width: 100%; max-width: none; font-size: .8rem; padding: .25rem .4rem; }
.cut-preview { position: relative; display: block; width: 100%; max-height: none; }
.cut-preview img { display: block; width: 100%; height: auto; }
.cut-preview svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cut-halo { fill: none; stroke: rgba(255,255,255,.85); }
.cut-line { fill: none; stroke: rgba(0,0,0,.8); }
#cutOverlay .card.wide { max-width: 720px; }
#cutOverlay .cut-preview { max-height: 70vh; overflow: auto; }
.days tr.day-live td { background: #f3faf5; }
.days tr.day-today td { background: #fbf8ee; }
.schedule .buttons { gap: .3rem; }
.cells { border-collapse: separate; border-spacing: 3px; margin: .3rem 0; }
.cells td { width: 2rem; height: 2rem; text-align: center; font-size: .75rem; border-radius: 4px; background: #eceae4; color: var(--muted); cursor: pointer; font-variant-numeric: tabular-nums; }
.cells td.active { background: #cfe8d8; color: var(--ink); }
.cells td.here { outline: 2px solid var(--accent); color: var(--ink); font-weight: 700; cursor: default; }
.cells td.home::after { content: '⌂'; font-size: .6rem; display: block; line-height: .5rem; }
.map-page { background: #e9eef2; }
.map-wrap { position: fixed; inset: 0; }
.map-wrap svg { width: 100%; height: 100%; display: block; cursor: grab; }
.map-land { fill: #f7f4ec; stroke: #c9c4b7; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.map-grid { stroke: #d9dde2; stroke-width: 1px; fill: none; vector-effect: non-scaling-stroke; }
.map-cell { stroke: rgba(0,0,0,.3); stroke-width: 1px; vector-effect: non-scaling-stroke; cursor: pointer; }
.map-cell.mine { stroke: #1d1d1f; stroke-width: 2.5px; }
.map-panel { position: fixed; top: .8rem; left: .8rem; background: white; border-radius: 10px; padding: .8rem 1rem; box-shadow: 0 2px 12px rgba(0,0,0,.12); max-width: 300px; font-size: .9rem; }
.map-panel h1 { font-size: 1.1rem; margin: 0 0 .3rem; }
.map-panel .legend { display: flex; align-items: center; gap: .4rem; margin: .4rem 0; font-size: .8rem; }
.map-panel .swatch { width: 60px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, #e3f1e8, #2f7d4f); }
.map-info { position: fixed; bottom: .8rem; left: .8rem; background: white; border-radius: 10px; padding: .6rem .9rem; box-shadow: 0 2px 12px rgba(0,0,0,.12); font-size: .85rem; max-width: 320px; }
.map-credit { position: fixed; bottom: .5rem; right: .8rem; font-size: .75rem; color: var(--muted); }
.map-credit a { color: inherit; }
@media (max-width: 600px) { .today-row { flex-direction: column; } .today-preview { width: 100%; max-width: none; } }

/* Rooms list on the puzzle page: name on the first line, kind and counts beneath it. */
.rooms { list-style: none; margin: 0 0 .5rem; padding: 0; font-size: .85rem; }
.rooms li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .4rem; align-items: center; padding: .35rem 0; border-bottom: 1px solid #f0f0f2; }
.rooms input { width: auto; margin: 0; grid-row: 1 / 3; }
.rooms .room-name { grid-column: 2; grid-row: 1; border: 0; background: none; padding: 0; font: inherit; font-weight: 600; cursor: pointer; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rooms li.viewing .room-name { color: var(--accent); text-decoration: underline; }
.rooms .link-button { grid-column: 3; grid-row: 1; font-size: .8rem; }
.rooms .room-kind { grid-column: 2; grid-row: 2; justify-self: start; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rooms .room-meta { grid-column: 2 / 4; grid-row: 2; justify-self: end; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rooms li.complete .room-meta { color: var(--accent); }
.overlay .card.wide { max-width: 420px; }
.overlay .card .buttons { margin-top: .4rem; }
.overlay .card .preview { max-height: 240px; object-fit: contain; background: #eee; margin-bottom: .6rem; }
.home-logo { width: 240px; display: block; margin: 0 auto 1rem; }
.tagline { text-align: center; color: var(--muted); line-height: 1.4; }
.home .card h2 { margin-top: 0; }
.home-footer { margin-top: 1.5rem; text-align: center; font-size: .85rem; color: var(--muted); }
.home-footer a { color: var(--ink); }

/* Admin */
.admin { max-width: 960px; margin: 2rem auto; padding: 0 1rem; }
.admin-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.tabs button.active { background: var(--ink); color: white; border-color: var(--ink); }
.queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.queue .card { padding: .9rem; }
.queue .card.highlight { outline: 3px solid var(--accent); }
.queue img { width: 100%; max-height: 220px; object-fit: contain; background: #eee; border-radius: 4px; }
.queue h3 { margin: .5rem 0 .2rem; font-size: 1rem; overflow-wrap: anywhere; }
.queue .reasons { font-size: .85rem; padding-left: 1.1rem; }
.queue .approve { background: var(--accent); color: white; border-color: var(--accent); }
.queue .danger { color: #a33; }
.queue .card.upload-card { grid-column: 1 / -1; }
.queue .card.hidden-gif img { opacity: .4; }
.empty { color: var(--muted); }

/* Puzzle */
.puzzle-page { overflow: hidden; overscroll-behavior: none; }
.board {
  position: fixed; inset: 0 var(--panel-width) 0 0; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  --scale: 1;
}
.mobile-bar { display: none; }
.panel-hidden .board { right: 0; }
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--panel-width);
  background: white; border-left: 1px solid var(--line); padding: 1rem; overflow-y: auto;
}
.panel-hidden .panel { display: none; }
.panel-toggle { position: fixed; top: .6rem; right: calc(var(--panel-width) + .6rem); z-index: 100000; }
.panel-hidden .panel-toggle { right: .6rem; }
.logo img { width: 140px; }
.panel progress { width: 100%; accent-color: var(--accent); }
.buttons { display: flex; flex-wrap: wrap; gap: .4rem; }

.scoreboard { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.scoreboard li { display: flex; justify-content: space-between; padding: .25rem 0; border-bottom: 1px solid #f0f0f2; color: var(--muted); }
.scoreboard li.online { color: var(--ink); }
.scoreboard li.online .player-name::before { content: "● "; color: var(--accent); font-size: .7em; vertical-align: middle; }
.scoreboard li.me { font-weight: 600; }
.player-count { font-variant-numeric: tabular-nums; }

/* A group of joined pieces; only its tiles take the pointer, so gaps between them don't. */
.piece-el { position: absolute; pointer-events: none; }
.piece-tile { position: absolute; overflow: hidden; pointer-events: auto; cursor: grab; }
.piece-tile img { position: absolute; display: block; max-width: none; pointer-events: none; }
.piece-tile svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }

.pieceBorder {
  stroke: black; stroke-opacity: .67; fill: transparent;
  stroke-width: calc(2.5px * var(--scale)); stroke-dasharray: calc(2.5px * var(--scale));
}
.interiorBorder {
  stroke: gray; stroke-opacity: .5; fill: transparent;
  stroke-width: calc(1px * var(--scale)); stroke-dasharray: calc(1px * var(--scale));
}
.interiorBorder.myBorder { stroke: var(--accent); stroke-opacity: .7; stroke-width: calc(1.5px * var(--scale)); }
/* Joined while offline: shown, but not yet checked by the server. */
.interiorBorder.pendingBorder { stroke: var(--accent); stroke-opacity: .9; stroke-width: calc(2px * var(--scale)); stroke-dasharray: calc(5px * var(--scale)); }
.pieceBorder.toggled, .interiorBorder.toggled { stroke-width: 0; }

.overlay {
  position: fixed; inset: 0; z-index: 200000; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.35);
}
.overlay[hidden] { display: none; }
.overlay .card { max-width: 340px; width: calc(100% - 2rem); }
.overlay .card h2 { margin-top: 0; font-size: 1.1rem; color: var(--ink); text-transform: none; letter-spacing: 0; }
.overlay .card input { margin-bottom: .8rem; }

/* Phones and short landscape screens: the board gets the whole screen under a thin
   status bar, and the panel becomes a full-screen sheet opened from the ☰ button. */
@media (max-width: 700px), (max-height: 500px) {
  .mobile-bar {
    display: flex; align-items: center; gap: .5rem; position: fixed; top: 0; left: 0; right: 0;
    height: var(--bar-height); padding: 0 3.2rem 0 .7rem; background: white;
    border-bottom: 1px solid var(--line); z-index: 10; font-size: .85rem;
  }
  .bar-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  .mobile-bar progress { flex: 1 1 4rem; min-width: 3rem; accent-color: var(--accent); }
  .bar-text { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .board, .panel-hidden .board { inset: var(--bar-height) 0 0 0; }
  .panel { top: var(--bar-height); left: 0; width: auto; border-left: 0; z-index: 20; padding-bottom: 2rem; }
  .panel .logo { display: none; }
  .panel h1 { margin-top: .2rem; }
  .panel-toggle, .panel-hidden .panel-toggle { top: .35rem; right: .5rem; z-index: 30; }
  .overlay .card { width: calc(100% - 1.5rem); }
}