/* Timepasa · Four in a Row. Loads after ../shared/theme.css (looks 2 and 3, .page/.top/.iconbtn/.card...). */

/* ---------------------------------------------------------------- layout: phone portrait first */

.page.game {
  display: flex; flex-direction: column; gap: 10px;
  height: 100vh; height: 100dvh; min-height: 520px; overflow: hidden;
}
.top, .plates, .status, .actions { flex: none; }

/* look switch in the top bar (as the Ludo prototype) */
.looks { display: flex; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--chip); flex: none; }
.looks button {
  border: 0; background: transparent; border-radius: 999px; height: 30px; min-width: 34px; padding: 0 9px;
  display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--muted);
}
.looks button.on { background: var(--accent); color: var(--on-accent); }
body[data-look="2"] .looks button.on { box-shadow: 0 0 12px rgba(255, 170, 60, .5); }
.sw { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.sw2 { background: #0b1020; box-shadow: inset 0 0 0 1.5px #7aa6ff, 0 0 5px #7aa6ff; }
.sw3 { background: linear-gradient(135deg, #fff9ea, #e9dcc0); box-shadow: inset 0 0 0 1.5px #c49a3e; }

/* ---------------------------------------------------------------- players and the match score */

.plates { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.plate {
  display: flex; align-items: center; gap: 9px; min-width: 0; padding: 7px 10px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--panel); transition: box-shadow .25s, border-color .25s, opacity .3s, transform .25s;
}
.plate.p2 { justify-content: flex-end; text-align: right; }
.plate .who { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.plate .who b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plate .who small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; }
.pdisc { width: 28px; height: 28px; border-radius: 50%; flex: none; display: block; }
body[data-look="2"] .p1 .pdisc { background: radial-gradient(circle at 42% 38%, #ffb3bd, #ff3b52 34%, #86081c 82%, #ff3b52); box-shadow: 0 0 0 1.5px #ffb3bd inset, 0 0 12px rgba(255, 45, 74, .65); }
body[data-look="2"] .p2 .pdisc { background: radial-gradient(circle at 42% 38%, #fff4b8, #ffcf2e 34%, #946300 82%, #ffcf2e); box-shadow: 0 0 0 1.5px #fff4b8 inset, 0 0 12px rgba(255, 191, 20, .6); }
body[data-look="3"] .p1 .pdisc { background: radial-gradient(circle at 36% 30%, #f0909b, #b8182c 45%, #4a030e); box-shadow: inset 0 0 0 2.5px #d9a840, 0 0 0 1px #8f6216, 0 2px 4px rgba(90, 60, 10, .3); }
body[data-look="3"] .p2 .pdisc { background: radial-gradient(circle at 36% 30%, #86a6ec, #1f45aa 45%, #07184a); box-shadow: inset 0 0 0 2.5px #d9a840, 0 0 0 1px #8f6216, 0 2px 4px rgba(90, 60, 10, .3); }
.plate.turn { transform: translateY(-1px); }
body[data-look="2"] .plate.p1.turn { border-color: #ff3b52; box-shadow: 0 0 0 1px #ff3b52, 0 0 18px rgba(255, 45, 74, .35); }
body[data-look="2"] .plate.p2.turn { border-color: #ffcf2e; box-shadow: 0 0 0 1px #ffcf2e, 0 0 18px rgba(255, 191, 20, .3); }
body[data-look="3"] .plate.p1.turn { border-color: #b8182c; box-shadow: 0 0 0 1.5px #b8182c, 0 4px 12px rgba(110, 80, 20, .2); }
body[data-look="3"] .plate.p2.turn { border-color: #1f45aa; box-shadow: 0 0 0 1.5px #1f45aa, 0 4px 12px rgba(110, 80, 20, .2); }
.plate.won { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent), 0 0 18px rgba(255, 170, 60, .25); }
body[data-look="3"] .plate.won { box-shadow: 0 0 0 2px var(--accent), 0 4px 14px rgba(150, 110, 30, .3); }
.plate.lost { opacity: .55; }
.score { display: flex; flex-direction: column; align-items: center; line-height: 1.05; min-width: 64px; }
.score b { font-family: var(--title); font-size: 26px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.score small { font-size: 10.5px; color: var(--muted); white-space: nowrap; letter-spacing: .04em; margin-top: 2px; }
body[data-look="2"] .score b { text-shadow: 0 0 14px rgba(255, 179, 64, .35); }

/* ---------------------------------------------------------------- the board */

.boardwrap { position: relative; flex: 1 1 auto; min-height: 0; margin: 0 -10px; }
.board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; overflow: visible; }
body[data-look="2"] .board .front, body[data-look="2"] .board .stand { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55)); }
body[data-look="3"] .board .front { filter: drop-shadow(0 10px 14px rgba(110, 80, 20, .28)); }

.disc { transition: opacity .45s; }
.disc .halo { opacity: .85; }
.board.won .disc.dim, .hero .disc.dim { opacity: .28; }
body[data-look="3"] .board.won .disc.dim, .hero[data-look="3"] .disc.dim { opacity: .34; }
.disc.win .halo { animation: haloPulse 1.5s ease-in-out infinite; }
.disc.win .core { animation: glint 1.5s ease-in-out infinite; }
@keyframes haloPulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes glint { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }

.rim .rl { transition: stroke-opacity .3s; }
.rim.land .rl { animation: land .5s ease-out; }
@keyframes land { 0% { stroke-opacity: 1; stroke-width: 4; } 100% { } }
.wline { animation: fadeIn .35s ease-out both; }
.wline .wl { animation: ringPulse 1.5s ease-in-out infinite; }
@keyframes ringPulse { 0%, 100% { stroke-opacity: .7; } 50% { stroke-opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* the held disc and where it would land */
.ghost .bob { transform-box: fill-box; transform-origin: center; }
.ghost.idle .bob { animation: bob 1.8s ease-in-out infinite; }
.ghost.think { opacity: .92; }
.ghost.think .bob { animation: breathe 1s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
.board.full .ghost { opacity: .4; }
.target { opacity: .9; transform-box: fill-box; transform-origin: center; animation: spin 7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.beamr { animation: fadeIn .2s ease-out both; }
.hintring { stroke-width: 6; animation: hintPulse 1.1s ease-in-out infinite; }
body[data-look="2"] .hintring { stroke: #ffb340; }
body[data-look="3"] .hintring { stroke: #1d3f8f; }
@keyframes hintPulse { 0%, 100% { stroke-opacity: .35; } 50% { stroke-opacity: 1; } }
.danger { fill: none; stroke-width: 4.5; stroke-linecap: round; }
body[data-look="2"] .danger { stroke: #ff6b80; }
body[data-look="3"] .danger { stroke: #b8182c; }

/* screenshots and reduced motion: no looping animation, the peak state shown still */
.board.still *, .hero * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .board *, .hero *, .plate { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------------- status: always two lines tall */

.status {
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  height: 52px; padding: 6px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel);
}
.status span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status .l1 { font-family: var(--title); font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: .01em; }
.status .l2 { font-size: 12.5px; color: var(--muted); line-height: 1.35; min-height: 1.35em; }

/* ---------------------------------------------------------------- action buttons */

.actions { display: flex; gap: 8px; justify-content: center; }
.act {
  flex: 1 1 0; min-width: 0; max-width: 150px; height: 46px; border-radius: 15px; border: 1px solid var(--line); background: var(--chip);
  display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 14px; font-weight: 700; padding: 0 10px;
}
.act svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.act:disabled { opacity: .38; cursor: default; }
.act:not(:disabled):active { transform: scale(.97); }
.act.main { background: var(--accent); color: var(--on-accent); border-color: transparent; max-width: 200px; flex-grow: 1.6; }
body[data-look="2"] .act.main { background: linear-gradient(180deg, #ffb340, #ff9a1f); box-shadow: 0 0 22px rgba(255, 160, 50, .35); }
body[data-look="3"] .act.main { background: linear-gradient(180deg, #e8c066, #c4932f); color: #2a1a04; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.act span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------------------------------------------------------- menu */

.menucard { padding-top: 14px; }
.hero { display: block; width: 100%; height: 132px; margin: 0 auto 2px; overflow: visible; }
body[data-look="2"] .hero { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }
body[data-look="3"] .hero { filter: drop-shadow(0 6px 10px rgba(110, 80, 20, .25)); }
.menucard h1 { font-size: 34px; }
.menucard .sub { margin: 2px 0 12px; }
.modes { display: grid; gap: 8px; }
.mode {
  text-align: left; border-radius: 16px; padding: 11px 12px 10px; border: 1px solid var(--line); background: var(--chip);
  display: flex; flex-direction: column; gap: 2px;
}
.mode b { font-size: 16px; }
.mode small { font-size: 12px; color: var(--muted); }
.mode .seg { margin-top: 8px; }
.mode .seg button { color: var(--ink); padding: 9px 3px; font-size: 12.5px; }
.mode .seg button:active { background: var(--accent); color: var(--on-accent); }
.mode.main { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.mode.main small { color: rgba(26, 16, 4, .72); }
body[data-look="2"] .mode.main { background: linear-gradient(180deg, #ffb340, #ff9a1f); box-shadow: 0 0 22px rgba(255, 160, 50, .3); }
body[data-look="3"] .mode.main { background: linear-gradient(180deg, #e8c066, #c4932f); color: #2a1a04; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.mode.main .seg { background: rgba(26, 16, 4, .14); border-color: rgba(26, 16, 4, .28); }
.mode.main .seg button { color: #2a1804; }
.mode.main .seg button.on { background: rgba(26, 16, 4, .82); color: #ffd58a; }
body[data-look="3"] .mode.main .seg button.on { background: #1d3f8f; color: #fff4d6; }
.settings { margin-top: 12px; display: grid; gap: 8px; text-align: left; }
.lookpick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lookpick button {
  border: 1px solid var(--line); background: var(--chip); border-radius: 12px; padding: 9px 4px; font-size: 12px; font-weight: 700;
  color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; min-width: 0; overflow: hidden;
}
.lookpick .sw { width: 14px; height: 14px; }
.lookpick button.on { border-color: var(--accent); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.tiny { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); }
.menulinks { display: flex; justify-content: center; gap: 14px; margin-top: 4px; }

/* ---------------------------------------------------------------- tall phones: more room for the score and controls */

@media (orientation: portrait) and (min-height: 760px) {
  .page.game { gap: 14px; }
  .plate { padding: 10px 12px; border-radius: 18px; }
  .pdisc { width: 34px; height: 34px; }
  .plate .who b { font-size: 16px; }
  .plate .who small { font-size: 11.5px; }
  .score b { font-size: 30px; }
  .status { height: 58px; }
  .status .l1 { font-size: 17px; }
  .status .l2 { font-size: 13px; }
  .act { height: 52px; border-radius: 17px; font-size: 15px; }
}

/* ---------------------------------------------------------------- smaller phones */

@media (max-height: 700px) {
  .page.game { gap: 8px; }
  .plate { padding: 5px 9px; }
  .pdisc { width: 24px; height: 24px; }
  .status { height: 48px; padding: 4px 10px; }
  .act { height: 42px; }
  .hero { height: 104px; }
  .menucard h1 { font-size: 30px; }
  .tiny { display: none; }
}
@media (max-width: 380px) {
  .brand .t { font-size: 21px; }
  .plate .who b { font-size: 14px; }
  .score b { font-size: 23px; }
  .mode .seg button { font-size: 11.5px; }
}

/* ---------------------------------------------------------------- landscape phones, tablets, laptops:
   the board on the left at full height, everything else in a column on the right */

@media (orientation: landscape) and (min-aspect-ratio: 5/4) {
  .page.game {
    --bw: min(calc((100dvh - 24px) * 0.95), calc(100vw - 340px - 60px));
    max-width: none; min-height: 0; padding-top: max(12px, env(safe-area-inset-top), var(--inset-top, 0px));
    display: grid; justify-content: center; align-content: stretch; column-gap: 24px; row-gap: 10px;
    grid-template-columns: var(--bw) minmax(320px, 420px); grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: "board top" "board plates" "board gap" "board status" "board actions";
  }
  .top { grid-area: top; } .plates { grid-area: plates; } .status { grid-area: status; } .actions { grid-area: actions; }
  .boardwrap { grid-area: board; width: var(--bw); height: 100%; margin: 0; }
  .act { max-width: none; }
}
@media (orientation: landscape) and (min-aspect-ratio: 5/4) and (max-height: 460px) {
  .page.game { row-gap: 7px; }
  .brand .t { font-size: 20px; white-space: nowrap; }
  .plate { padding: 4px 8px; }
  .pdisc { width: 22px; height: 22px; }
  .status { height: 46px; }
  .act { height: 40px; }
}