/* Timepasa · Snakes & Ladders. Loads after ../shared/theme.css (the two looks, .page, .top, .card …).
   Board art, gotis, dice and pads per look: 2 Midnight Glow, 3 Royal Mosaic. */

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

#app {
  display: flex; flex-direction: column; gap: 8px; height: 100vh; height: 100dvh; min-height: 520px; max-width: 540px;
}
.top { flex: none; height: 44px; }
.brand .t { font-size: 21px; white-space: nowrap; }
.brand .t .amp, .card h1 .amp { font-style: normal; color: var(--accent); }
body[data-look="3"] .brand .t .amp, body[data-look="3"] .card h1 .amp { font-style: italic; }
/* Light (look 3) shows the moon, Dark (look 2) the sun: the button names the theme a tap switches to */
.themebtn .ic-sun, body[data-look="3"] .themebtn .ic-sun { display: none; }
body[data-look="2"] .themebtn .ic-sun { display: block; }
body[data-look="2"] .themebtn .ic-moon { display: none; }

/* ---------------------------------------------------------------- players (one person + bots) */

.players { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 6px; flex: none; }
.badge-p {
  display: flex; align-items: center; gap: 7px; padding: 6px 8px 6px 6px; border-radius: 16px; border: 1px solid var(--line);
  background: var(--panel); transition: transform .25s, box-shadow .25s, border-color .25s; min-width: 0;
}
.players .badge-p { flex-direction: column; gap: 6px; padding: 6px 4px 5px; }
.badge-p .disc {
  position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--c); background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08) 70%);
}
.badge-p .disc .mini { width: 28px; height: 44px; margin-top: 8px; clip-path: circle(18px at 50% 16px); }
.badge-p .tag {
  position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); font: 800 8.5px/1 var(--sans); font-style: normal;
  letter-spacing: .07em; text-transform: uppercase; padding: 2px 5px; border-radius: 6px; background: var(--ink); white-space: nowrap;
}
body[data-look="2"] .badge-p .tag { color: #070a14; }
body[data-look="3"] .badge-p .tag { color: #fffaf0; }
.badge-p .tag.you { background: var(--c); color: #fff; }
.badge-p .who { display: flex; flex-direction: column; align-items: center; min-width: 0; line-height: 1.15; gap: 1px; }
.badge-p .who b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.badge-p .sq { font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; min-height: 15px; display: flex; align-items: center; }
.badge-p .sq b { color: var(--ink); font-size: 12px; margin-left: 2px; }
.badge-p .sq.muted { opacity: .7; }
.rochip {
  display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 5px; font: 800 11px/1 var(--sans); font-style: normal;
  background: var(--c); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset;
}
body[data-look="2"] .rochip { box-shadow: 0 0 8px var(--cg); }
.badge-p.turn { border-color: var(--c); box-shadow: 0 0 0 2px var(--c), 0 6px 18px rgba(0, 0, 0, .25); transform: translateY(-2px); }
body[data-look="2"] .badge-p.turn { box-shadow: 0 0 0 1.5px var(--c), 0 0 18px var(--cg); }
body[data-look="2"] .badge-p .disc { box-shadow: 0 0 10px var(--cg); background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .12), transparent 70%); }
body[data-look="3"] .badge-p .disc { border: 2px solid #c49a3e; box-shadow: inset 0 0 0 2px var(--c); }
.badge-p.won { border-color: var(--accent); }

/* ---------------------------------------------------------------- Corners pads (friends on one phone) */

.crow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; flex: none; }
.cpad.badge-p { flex-direction: row; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 4px 6px 8px; min-height: 64px; cursor: pointer; }
.cpad .who { align-items: flex-start; flex: 1; gap: 2px; }
.cpad .who b { font-size: 14px; }
.cpad .pmsg { font-size: 10.5px; font-weight: 800; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; min-height: 1.25em; letter-spacing: .02em; }
body[data-look="3"] .cpad .pmsg { filter: saturate(1.1) brightness(.9); }
.crow .cpad:nth-child(2) { flex-direction: row-reverse; padding: 6px 8px 6px 4px; }
.crow .cpad:nth-child(2) .who { align-items: flex-end; text-align: right; }
.cpad .disc { width: 34px; height: 34px; }
.cpad .disc .mini { width: 26px; height: 40px; margin-top: 7px; clip-path: circle(16px at 50% 14px); }
.cpad .dslot { flex: none; width: 78px; height: 78px; margin: -12px -11px; transform: scale(.66); display: grid; place-items: center; border-radius: 20px; border: 2px dashed var(--line); }
.cpad.turn .dslot { border-color: transparent; }
.cpad.ready { animation: padCall 1.3s ease-in-out infinite; }
@keyframes padCall { 50% { box-shadow: 0 0 0 3px var(--c), 0 0 26px var(--c); } }
.cpad.ghost { visibility: hidden; pointer-events: none; }
.dice-corners .dock .dicebox { display: none; }
.dice-corners .dockrow { grid-template-columns: minmax(0, 1fr) auto; }

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

/* the board, with the Corners pads hugging it above and below, centred in whatever height is left */
.boardwrap { position: relative; width: calc(100% + 12px); margin: 0 -6px; flex: 1 1 auto; min-height: 0; display: grid; place-items: center; container-type: size; --padsh: 0px; }
body.dice-corners .boardwrap { --padsh: 152px; width: 100%; margin: 0; }
.stack { --bsz: min(100cqw, calc(100cqh - var(--padsh))); width: var(--bsz); display: flex; flex-direction: column; gap: 8px; }
.board { position: relative; width: var(--bsz); height: var(--bsz); flex: none; }
@supports not (width: 1cqmin) { .stack { width: 100%; } .board { width: 100%; height: auto; aspect-ratio: 1 / 1; } }
.board svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#boardSvg { contain: strict; }
#actorSvg { overflow: visible; touch-action: manipulation; pointer-events: none; }
body[data-look="2"] #boardSvg { filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .7)) drop-shadow(0 0 22px rgba(90, 120, 255, .16)); }
body[data-look="3"] #boardSvg { filter: drop-shadow(0 12px 18px rgba(120, 90, 30, .35)); }

/* look 2: Midnight Glow: dark glass tiles, neon snakes, amber light ladders */
[data-look="2"] .bbase { fill: #04060d; }
[data-look="2"] .tile { stroke: rgba(150, 180, 255, .14); stroke-width: 1; }
[data-look="2"] .thl { stroke: rgba(255, 255, 255, .07); stroke-width: 1; fill: none; stroke-linecap: round; }
[data-look="2"] .num { font: 700 15.5px var(--sans); fill: #8b9fd0; paint-order: stroke; stroke: #0a0f1d; stroke-width: 3.4px; stroke-linejoin: round; letter-spacing: .02em; }
[data-look="2"] .num.fin { fill: #ffc266; }
[data-look="2"] .crown { fill: rgba(255, 179, 64, .16); stroke: #ffb340; stroke-width: 1.6; stroke-linejoin: round; filter: url(#neon); }
[data-look="2"] .crowngem { fill: #fff1cf; }
[data-look="2"] .bline { fill: none; stroke: rgba(140, 170, 255, .4); stroke-width: 1.4; }
[data-look="2"] .ladder path { fill: none; stroke-linecap: round; }
[data-look="2"] .lhaze { stroke: #ffa23a; stroke-width: 12; opacity: .2; }
[data-look="2"] .lrung { stroke: #ffcf7a; stroke-width: 2.4; opacity: .92; }
[data-look="2"] .lrail { stroke: #ffb340; stroke-width: 3.4; }
[data-look="2"] .lcore { stroke: #fff3d6; stroke-width: 1; opacity: .85; }
[data-look="2"] .ladder.lit .lhaze { opacity: .55; }
[data-look="2"] .ladder.lit .lrung, [data-look="2"] .ladder.lit .lrail { stroke: #ffe3a6; }
[data-look="2"] .shaze { fill: var(--sn); opacity: .2; }
[data-look="2"] .sbase { fill: #080c18; fill-opacity: .88; }
[data-look="2"] .sbody { fill: var(--sn); fill-opacity: .2; }
[data-look="2"] .spat { fill: none; stroke: var(--sn); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
[data-look="2"] .sline { fill: none; stroke: var(--sn); stroke-width: 1.8; stroke-linejoin: round; }
[data-look="2"] .shead .hbody { fill: #0b1020; stroke: var(--sn); stroke-width: 1.7; filter: url(#neon); }
[data-look="2"] .shead .hmark { fill: none; stroke: var(--sn); stroke-width: 1.3; stroke-linejoin: round; stroke-linecap: round; }
[data-look="2"] .shead .eye { fill: #f4fbff; }
[data-look="2"] .shead .slit { fill: #0b1020; }
[data-look="2"] .shead .nos { fill: var(--sn); }
[data-look="2"] .shead .tongue { fill: none; stroke: #ff5c7a; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* look 3: Royal Mosaic: ivory marble, gold grout, lapis and red inlay, enamel snakes, carved wood ladders */
[data-look="3"] .bbase { fill: #fbf6ea; }
[data-look="3"] .grout { fill: none; stroke: #c9a24a; stroke-width: 1.3; }
[data-look="3"] .inl { stroke: #b8902f; stroke-width: .8; }
[data-look="3"] .inl.lap { fill: #1d3f8f; }
[data-look="3"] .inl.red { fill: #a3172a; }
[data-look="3"] .num { font: 700 16.5px var(--title); fill: #6b4f22; paint-order: stroke; stroke: #fbf5e6; stroke-width: 3.6px; stroke-linejoin: round; }
[data-look="3"] .num.fin { fill: #1d3f8f; }
[data-look="3"] .crown { fill: url(#goldg); stroke: #8a6214; stroke-width: 1; stroke-linejoin: round; }
[data-look="3"] .crowngem { fill: #a3172a; stroke: #fff3c4; stroke-width: .6; }
[data-look="3"] .bline { fill: none; stroke: url(#goldg); stroke-width: 3; }
[data-look="3"] .ladder path { fill: none; stroke-linecap: round; }
[data-look="3"] .lshadow { stroke: rgba(90, 60, 20, .22); stroke-width: 7; }
[data-look="3"] .lrung { stroke: #6b3a18; stroke-width: 4.4; }
[data-look="3"] .lrunghl { stroke: #c4904f; stroke-width: 1.3; opacity: .75; }
[data-look="3"] .lrail { stroke: #5a2f13; stroke-width: 6.4; }
[data-look="3"] .lrailhl { stroke: #b98247; stroke-width: 1.6; opacity: .9; }
[data-look="3"] .lcaps circle { fill: url(#goldg); stroke: #8a6214; stroke-width: .5; }
[data-look="3"] .ladder.lit .lrail { stroke: #7a4520; }
[data-look="3"] .ladder.lit .lcaps circle { fill: #fff3b8; }
[data-look="3"] .sshadow { fill: rgba(80, 50, 10, .2); }
[data-look="3"] .sbody { fill: var(--sn); }
[data-look="3"] .sbelly { fill: var(--snl); opacity: .5; }
[data-look="3"] .spat { fill: url(#goldg); stroke: #8a6214; stroke-width: .4; }
[data-look="3"] .sline { fill: none; stroke: #d4a237; stroke-width: 1.5; stroke-linejoin: round; }
[data-look="3"] .shead .hbody { fill: var(--sn); stroke: #d4a237; stroke-width: 1.6; }
[data-look="3"] .shead .hmark { fill: url(#goldg); stroke: #8a6214; stroke-width: .4; }
[data-look="3"] .shead .eye { fill: #ffe18a; stroke: #8a6214; stroke-width: .4; }
[data-look="3"] .shead .slit { fill: #1a1004; }
[data-look="3"] .shead .nos { fill: #1a1004; }
[data-look="3"] .shead .tongue { fill: none; stroke: #b8182c; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- gotis (the living goti rig, per look) */

.goti .shadow { fill: rgba(30, 15, 0, .3); }
[data-look="2"] .goti .shadow { fill: rgba(0, 0, 0, .55); }
.goti .glow { display: none; }
[data-look="2"] .goti .glow { display: inline; }
.goti.s0 .body { fill: url(#gb0); } .goti.s1 .body { fill: url(#gb1); } .goti.s2 .body { fill: url(#gb2); } .goti.s3 .body { fill: url(#gb3); }
.goti.s0 .hood { fill: url(#gh0); } .goti.s1 .hood { fill: url(#gh1); } .goti.s2 .hood { fill: url(#gh2); } .goti.s3 .hood { fill: url(#gh3); }
.goti.s0 .trim { fill: url(#gt0); } .goti.s1 .trim { fill: url(#gt1); } .goti.s2 .trim { fill: url(#gt2); } .goti.s3 .trim { fill: url(#gt3); }
[data-look="3"] .goti .trim { fill: url(#gold); stroke: #8a6214; stroke-width: .5; }
[data-look="2"] .goti .body, [data-look="2"] .goti .hood { fill-opacity: .92; }
.goti .limb, .goti .foot { fill: var(--cd); }
[data-look="3"] .goti .foot { fill: url(#gold); }
.goti .armo { stroke: var(--cd); stroke-width: 6; stroke-linecap: round; }
.goti .arm { stroke: var(--c); stroke-width: 3.9; stroke-linecap: round; }
[data-look="2"] .goti .armo { stroke: var(--cg); stroke-opacity: .55; }
[data-look="2"] .goti .arm { stroke: var(--cl); }
.goti .hand { fill: var(--cl); }
[data-look="3"] .goti .hand { fill: url(#skin); }
.goti .face { fill: url(#skin); }
[data-look="2"] .goti .face { display: none; }
.goti .sclera { display: none; fill: #fff; }
[data-look="2"] .goti .sclera { display: inline; }
.goti .pupil { fill: #2b170d; }
[data-look="2"] .goti .pupil { fill: #0d1120; }
.goti .glint { fill: #fff; }
.goti .lid { fill: none; stroke: #2b170d; stroke-width: 1.2; stroke-linecap: round; }
[data-look="2"] .goti .lid { stroke: #0d1120; stroke-width: 1.4; }
.goti .mouth { fill: none; stroke: #5a2414; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.goti .mouth.fill { fill: #8e2a1c; }
[data-look="2"] .goti .mouth { stroke: #12142a; }
[data-look="2"] .goti .mouth.fill { fill: #3a0f1c; }
.goti .cheek { fill: #ff7a7a; opacity: .5; }
[data-look="2"] .goti .cheek { fill: #fff; opacity: .28; }
.goti .hshine { fill: #fff; opacity: .62; }
.goti .bshine { fill: none; stroke: #fff; stroke-opacity: .38; stroke-width: 2.3; stroke-linecap: round; }
[data-look="2"] .goti .bshine { stroke-opacity: .6; }
.goti .belt { display: none; fill: none; stroke: url(#gold); stroke-width: 1.9; }
[data-look="3"] .goti .belt { display: inline; }
.goti .tuft { fill: var(--cd); }
[data-look="3"] .goti .tuft { fill: url(#gold); }

.ring ellipse { fill: none; }
.ring .ringo { stroke: rgba(30, 14, 0, .62); stroke-width: 5.6; }
.ring .ringi { stroke: #fff2c2; stroke-width: 2.6; }
[data-look="2"] .ring .ringo { stroke: var(--cg); stroke-opacity: .8; stroke-width: 6; filter: url(#aneon); }
[data-look="2"] .ring .ringi { stroke: #fff; }

/* effects */
.puff { fill: rgba(236, 218, 186, .95); stroke: rgba(150, 120, 80, .35); stroke-width: .6; }
[data-look="2"] .puff { fill: rgba(170, 195, 255, .7); stroke: none; }
.streak { stroke: rgba(120, 90, 50, .55); stroke-width: 1.6; stroke-linecap: round; fill: none; }
[data-look="2"] .streak { stroke: rgba(170, 200, 255, .7); }
.spark { fill: #ffe07a; }
.spark.gold { fill: #f3c64e; stroke: #8a6214; stroke-width: .4; }
[data-look="2"] .spark.gold { fill: #ffd27a; stroke: none; }
.dizzy path { fill: #ffd23a; stroke: #a8740e; stroke-width: .4; }
.sweat { fill: #8fd3ff; stroke: #3b8fd0; stroke-width: .4; }
.alarm path, .alarm circle { fill: #ff4d5e; stroke: #fff; stroke-width: .8; }
[data-look="3"] .alarm path, [data-look="3"] .alarm circle { fill: #b8182c; stroke: #fff3c4; }
.strail path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.strail .tw { stroke: var(--sn); stroke-width: 11; opacity: .35; }
.strail .tc { stroke: #fff; stroke-width: 2.4; opacity: .6; }
[data-look="2"] .strail .tw { opacity: .5; filter: url(#aneon); }
.ftext { font: 900 13px var(--sans); fill: #fff; paint-order: stroke; stroke: rgba(30, 16, 4, .85); stroke-width: 3px; stroke-linejoin: round; }
[data-look="2"] .ftext.six { fill: #ffd27a; stroke: rgba(4, 6, 14, .9); }
[data-look="3"] .ftext.six { fill: #fff6d8; stroke: #8a6214; }

/* ---------------------------------------------------------------- status, dock, dice (dice from the Ludo prototype) */

.dock {
  display: flex; flex-direction: column; gap: 4px; flex: none;
  padding: 8px 12px 8px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel);
}
body[data-look="2"] .dock { box-shadow: 0 0 0 1px rgba(143, 180, 255, .05), 0 10px 30px rgba(0, 0, 0, .35); }
/* always two lines tall, so nothing under it jumps */
.status {
  height: calc(2 * 1.35em); padding: 2px 6px 6px; font-size: 13.5px; line-height: 1.35; text-align: center;
  display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); box-sizing: content-box;
}
.status span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dockrow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; min-height: 40px; }
.dock.s0 { --seat: var(--r); } .dock.s1 { --seat: var(--g); } .dock.s2 { --seat: var(--y); } .dock.s3 { --seat: var(--b); }
.dock .turn { display: flex; flex-direction: column; min-width: 0; }
.dock .turn b { font-family: var(--title); font-size: 17px; color: var(--seat, var(--ink)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-look="3"] .dock.s2 .turn b { color: #b07f0c; }
.dock .turn span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock .side { display: flex; justify-content: flex-end; gap: 6px; }

.dicebox { position: relative; width: 92px; height: 92px; display: grid; place-items: center; }
.dicebox::before {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  border: 2px solid var(--seat, var(--line)); opacity: .9;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .06), rgba(0, 0, 0, .18) 70%);
}
body[data-look="2"] .dicebox::before {
  background: radial-gradient(circle at 50% 55%, rgba(255, 170, 60, .28), rgba(255, 140, 30, .06) 55%, transparent 70%),
              radial-gradient(circle at 50% 35%, #1c2230, #0a0d14 72%);
  box-shadow: inset 0 1px 0 rgba(160, 175, 210, .35), 0 0 18px rgba(255, 160, 50, .18);
}
body[data-look="3"] .dicebox::before {
  background: radial-gradient(circle closest-side, #2a54b8 0 62%, #163684 77%, transparent 78%),
              conic-gradient(from 0deg, #fff3b8, #c4932f, #f6d77c, #a8781f, #fff3b8, #c4932f, #f6d77c, #a8781f, #fff3b8);
  box-shadow: inset 0 0 0 1px rgba(110, 76, 14, .7), 0 3px 8px rgba(120, 90, 30, .3);
}
.dicebox::after { content: ""; position: absolute; bottom: 13px; left: 25px; right: 25px; height: 9px; border-radius: 50%; background: rgba(0, 0, 0, .38); filter: blur(3px); }
.dice { position: relative; z-index: 1; width: 78px; height: 78px; border: 0; background: none; padding: 0; perspective: 480px; display: grid; place-items: center; }
.dice.ready { animation: diceCall 1.3s ease-in-out infinite; }
@keyframes diceCall { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.cube { position: relative; width: 50px; height: 50px; transform-style: preserve-3d; }
.face {
  position: absolute; inset: 0; border-radius: 6px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  padding: 7px; gap: 1px; backface-visibility: hidden;
  background: radial-gradient(circle at 30% 25%, #fffdf6, #efe4cc 70%, #d9c8a4); box-shadow: inset 0 0 0 1px rgba(120, 90, 40, .25), inset 0 -3px 6px rgba(120, 90, 40, .2);
}
.face i { display: block; border-radius: 50%; margin: 1.4px; }
.face i.pip { background: radial-gradient(circle at 40% 35%, #5a3a24, #1e120a); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5); }
.f1 { transform: translateZ(25.5px); } .f6 { transform: rotateY(180deg) translateZ(25.5px); }
.f3 { transform: rotateY(90deg) translateZ(25.5px); } .f4 { transform: rotateY(-90deg) translateZ(25.5px); }
.f5 { transform: rotateX(90deg) translateZ(25.5px); } .f2 { transform: rotateX(-90deg) translateZ(25.5px); }
.cube::before, .cube::after { content: ""; position: absolute; inset: 1px; background: #e2d2ae; }
.cube::before { transform: translateZ(0); } .cube::after { transform: rotateY(90deg); }
body[data-look="2"] .cube::before, body[data-look="2"] .cube::after { background: #15171d; }
body[data-look="3"] .cube::before, body[data-look="3"] .cube::after { background: #e8dcc4; }
body[data-look="2"] .face { background: radial-gradient(circle at 30% 25%, #3a3f4c, #15171d 70%, #0a0b0e); box-shadow: inset 0 0 0 1px rgba(255, 190, 90, .35), inset 0 -3px 6px rgba(0, 0, 0, .5); }
body[data-look="2"] .face i.pip { background: radial-gradient(circle, #fff3c4, #ffb340 60%, #c96a00); box-shadow: 0 0 6px #ffae3a, 0 0 2px #fff0c0; }
body[data-look="3"] .face { background: radial-gradient(circle at 30% 25%, #ffffff, #f4eee2 65%, #e2d6bf); box-shadow: inset 0 0 0 1.5px #d4a237, inset 0 -3px 6px rgba(150, 110, 40, .2); }
body[data-look="3"] .face i.pip { background: radial-gradient(circle at 40% 35%, #3a2a0a, #6e4c0e 60%); box-shadow: 0 0 0 1.2px #e2b85a, inset 0 1px 1.5px rgba(0, 0, 0, .6); }

/* the void stamp */
.stamp {
  position: absolute; left: 50%; top: 50%; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) rotate(-8deg);
  padding: 12px 22px; border-radius: 14px; border: 3px solid #b3261e; color: #b3261e; background: rgba(255, 248, 232, .94);
  text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); white-space: nowrap; z-index: 3;
}
.stamp b { display: block; font: 900 30px var(--title); letter-spacing: .04em; text-transform: uppercase; }
.stamp span { font-size: 13px; font-weight: 700; letter-spacing: .06em; }
body[data-look="2"] .stamp { background: rgba(10, 14, 28, .94); color: #ff6b80; border-color: #ff3b52; box-shadow: 0 0 30px rgba(255, 59, 82, .5); }

/* ---------------------------------------------------------------- menu and result cards */

.card { max-height: calc(100dvh - 32px); overflow-y: auto; }
.card h1 { font-size: 36px; line-height: 1.05; white-space: nowrap; }
.hero { position: relative; height: 96px; margin: -8px auto 2px; width: 280px; max-width: 100%; }
.heroart { width: 100%; height: 100%; overflow: visible; display: block; }
.heroart path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
body[data-look="2"] .heroart .hlr { stroke: #ffb340; stroke-width: 3.2; filter: drop-shadow(0 0 4px rgba(255, 170, 60, .85)); }
body[data-look="2"] .heroart .hlg { stroke: #ffcf7a; stroke-width: 2.4; }
body[data-look="2"] .heroart .hsb { stroke: #ff4fd8; stroke-width: 9; opacity: .95; filter: drop-shadow(0 0 5px rgba(255, 79, 216, .8)); }
body[data-look="2"] .heroart .hsp { stroke: #0b1020; stroke-width: 4; stroke-dasharray: 3 7; opacity: .7; }
body[data-look="2"] .heroart .hse { fill: #0b1020; stroke: #ff4fd8; stroke-width: 2; }
body[data-look="2"] .heroart .hsi { fill: #fff; }
body[data-look="3"] .heroart .hlr { stroke: #5a2f13; stroke-width: 5; }
body[data-look="3"] .heroart .hlg { stroke: #6b3a18; stroke-width: 3.6; }
body[data-look="3"] .heroart .hsb { stroke: #1d3f8f; stroke-width: 10; }
body[data-look="3"] .heroart .hsp { stroke: #e2b64e; stroke-width: 4; stroke-dasharray: 3 8; }
body[data-look="3"] .heroart .hse { fill: #1d3f8f; stroke: #d4a237; stroke-width: 1.6; }
body[data-look="3"] .heroart .hsi { fill: #ffe18a; }
.mini { overflow: visible; }
/* the menu (Vishal, 2026-10-31): pick a game on the tiles and a count, then Play; Resume leads during a game */
.pick { display: grid; gap: 10px; margin-top: 4px; text-align: left; }
.ptitle { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tile {
  border: 1.5px solid var(--line); background: var(--chip); border-radius: 16px; padding: 10px 6px 9px; min-width: 0;
  display: grid; justify-items: center; gap: 2px; text-align: center; transition: transform .15s;
}
.tile:active { transform: scale(.97); }
.tile .ic { display: flex; justify-content: center; height: 34px; margin-bottom: 2px; }
.tile .ic .mini { width: 22px; height: 34px; }
.tile b { font-size: 14px; white-space: nowrap; }
.tile small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.tile.on { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.tile.on small { color: rgba(26, 16, 4, .75); }
body[data-look="2"] .tile.on { background: linear-gradient(180deg, #ffb340, #ff9a1f); box-shadow: 0 0 18px rgba(255, 160, 50, .35); }
body[data-look="3"] .tile.on { background: linear-gradient(180deg, #e8c066, #c4932f); color: #2a1a04; box-shadow: 0 0 0 3px rgba(196, 154, 62, .25); }
.prow { display: grid; grid-template-columns: 60px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.prow .seg button { color: var(--ink); padding: 8px 4px; font-size: 12.5px; }
.prow .seg button.on { color: var(--on-accent); }
.playbtn { width: 100%; margin-top: 14px; font-size: 18px; padding: 15px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.playbtn.ghost { font-size: 16px; padding: 13px; }
.pi { width: 17px; height: 17px; fill: currentColor; flex: none; }
.playbtn.ghost .pi { display: none; }
.resumebox { margin: 2px 0 12px; padding: 12px; border-radius: 18px; border: 1.5px solid var(--accent); background: var(--chip); text-align: center; }
.resumebox small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.resumebox .btn { width: 100%; font-size: 17px; display: flex; align-items: center; justify-content: center; gap: 8px; }
#menu.ingame .hero { display: none; }
.settings { margin-top: 12px; display: grid; gap: 8px; text-align: left; }
.settings .row { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.settings .seg button { display: flex; align-items: center; justify-content: center; gap: 5px; }
.settings .seg .ti { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.settings .seg .ti path:only-child { fill: currentColor; stroke-width: 1.2; }
.themenote { margin: -3px 0 0; font-size: 10.5px; color: var(--muted); text-align: right; }
.rules { margin: 12px 0 0; font-size: 11.5px; color: var(--muted); letter-spacing: .02em; }
.links { display: flex; justify-content: center; gap: 14px; margin-top: 4px; }

.rhero { height: 86px; display: flex; justify-content: center; align-items: flex-end; }
.rhero .mini { width: 52px; height: 86px; }
.ranking { list-style: none; padding: 0; margin: 12px 0 14px; display: grid; gap: 6px; }
.ranking li {
  display: grid; grid-template-columns: 24px 26px minmax(0, 1fr) auto; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--chip); text-align: left;
}
.ranking li.first { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ranking li > b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #fff; font-size: 12px; }
.ranking .rm .mini { width: 22px; height: 36px; display: block; margin-top: -6px; }
.ranking .rn { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranking .rs { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
body[data-look] .btn.ghost { background: var(--chip); color: var(--ink); border: 1px solid var(--line); box-shadow: none; }

/* ---------------------------------------------------------------- small and short screens */

@media (max-width: 380px) {
  .brand .t { font-size: 19px; }
  .badge-p .who b { font-size: 11.5px; }
  .card h1 { font-size: 32px; }
}
@media (max-width: 350px) {
  .brand .t { font-size: 16px; }
  .top { gap: 7px; }
}
@media (max-height: 720px) and (orientation: portrait) {
  #app { gap: 6px; }
  .players .badge-p { flex-direction: row; justify-content: center; padding: 4px 3px; gap: 4px; }
  .players .badge-p .who { align-items: flex-start; }
  .players .badge-p .who b { font-size: 11.5px; overflow: visible; }
  .players .badge-p .disc { width: 26px; height: 26px; border-width: 1.5px; }
  .players .badge-p .disc .mini { width: 20px; height: 32px; margin-top: 6px; clip-path: circle(12px at 50% 11px); }
  .players .badge-p .tag { display: none; }
  .cpad.badge-p { min-height: 54px; padding-top: 4px; padding-bottom: 4px; }
  body.dice-corners .boardwrap { --padsh: 130px; }
  .dicebox { width: 80px; height: 80px; } .dice { width: 70px; height: 70px; }
  .dicebox::after { left: 22px; right: 22px; bottom: 11px; }
  .status { font-size: 12.5px; padding-bottom: 4px; }
  .dock { padding: 6px 12px; }
  .hero { display: none; }
  .settings { margin-top: 8px; }
}

/* landscape phones, tablets and laptops: the board on the left at full height, everything else in a side column */
@media (orientation: landscape) and (min-aspect-ratio: 6/5) {
  #app {
    --side: clamp(260px, 30vw, 340px); --bw: min(calc(100dvh - 24px), calc(100vw - var(--side) - 52px));
    max-width: none; min-height: 0; padding: 12px 16px; display: grid; justify-content: center; align-content: stretch;
    grid-template-columns: var(--bw) var(--side); grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "board top" "board players" "board gap" "board dock"; column-gap: 20px; row-gap: 10px;
  }
  .top { grid-area: top; } .players { grid-area: players; } .dock { grid-area: dock; }
  .boardwrap, .stack { display: contents; }
  .board { grid-area: board; width: var(--bw); height: var(--bw); align-self: center; }
  .crow.north { grid-area: players; } .crow.south { grid-area: gap; align-self: start; }
  .players { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .players .badge-p { flex-direction: row; justify-content: flex-start; padding: 6px 8px; }
  .players .badge-p .who { align-items: flex-start; }
  /* the side column holds three round buttons: the title may take two lines, the subtitle steps aside */
  .brand .t { font-size: 17px; white-space: normal; line-height: 1.02; }
  .brand .s { display: none; }
}
@media (orientation: landscape) and (min-aspect-ratio: 6/5) and (max-height: 430px) {
  .players { gap: 4px; } .badge-p .disc { width: 32px; height: 32px; }
  .badge-p .disc .mini { width: 24px; height: 38px; margin-top: 7px; clip-path: circle(15px at 50% 13px); }
  .badge-p .tag { display: none; }
  .dicebox { width: 80px; height: 80px; } .dice { width: 70px; height: 70px; }
  .status { font-size: 12.5px; }
  .brand .t { font-size: 18px; }
  .top { gap: 8px; }
  .cpad.badge-p { min-height: 48px; padding: 4px 4px 4px 6px; gap: 4px; }
  .crow .cpad:nth-child(2) { padding: 4px 6px 4px 4px; }
  .cpad .disc { width: 28px; height: 28px; }
  .cpad .disc .mini { width: 22px; height: 34px; margin-top: 6px; clip-path: circle(13px at 50% 12px); }
  .cpad .who b { font-size: 12px; }
  .cpad .pmsg { display: none; }
  .cpad .dslot { transform: scale(.48); margin: -20px -20px; }
  .crow { gap: 6px; }
  .dock { padding: 6px 10px; }
}

/* ---------------------------------------------------------------- goti styles, as in Ludo (prototype/ludo/style.css, 1 Nov) */

/* goti styles (Vishal, 1 Nov): hoodie (pocket, hood rim, darker shoes) and jelly-bean (no clothing lines) */
.goti .pocket { fill: none; stroke: var(--cd); stroke-opacity: .55; stroke-width: 1.1; stroke-linejoin: round; }
.goti .hrim { fill: none; stroke: var(--cd); stroke-opacity: .7; stroke-width: 2.4; stroke-linecap: round; }
[data-look="2"] .goti .pocket { stroke: var(--cl); stroke-opacity: .5; }
[data-look="2"] .goti .hrim { stroke: var(--cl); stroke-opacity: .6; }
.goti.st-hoodie .foot, [data-look="3"] .goti.st-hoodie .foot { fill: var(--cd); }
.goti.st-jelly .foot, [data-look="3"] .goti.st-jelly .foot { fill: var(--c); }
.goti.st-jelly .limb { fill: var(--c); }

/* jelly-bean is one smooth piece in both looks: no skin face or hood tip, eyes and smile on the colour (as in Dark) */
.goti.st-jelly .face, .goti.st-jelly .tuft { display: none; }
.goti.st-jelly .sclera { display: inline; }
.goti.st-jelly .pupil { fill: #0d1120; }
.goti.st-jelly .lid { stroke: #0d1120; stroke-width: 1.4; }
.goti.st-jelly .mouth { stroke: #12142a; }
.goti.st-jelly .mouth.fill { fill: #3a0f1c; }
.goti.st-jelly .cheek { fill: #fff; opacity: .28; }
.goti.st-jelly .hand, [data-look="3"] .goti.st-jelly .hand { fill: var(--cl); }
.goti.st-jelly .armo { stroke: var(--cd); stroke-opacity: .35; }
/* photo-puppet gotis (1 Nov): the face drawn on the photo head, the same in every look */
.goti.ph .sclera { display: inline; fill: url(#psc); }
.goti.ph .pupil { fill: #0c0b10; }
.goti.ph .glint { fill: #fff; }
.goti.ph .lid { stroke: #160a0a; stroke-width: .6; }
.goti.ph .mouth { stroke: #140909; stroke-width: 1.7; }
.goti.ph .mouth.fill { fill: #3a0c10; }

/* ---------------------------------------------------------------- TV remote, keyboard, controller (Vishal, 2026-10-31) */

/* a ring on the focused button (.kbf, set in app.js), only while a remote, keyboard or controller is in use (body.kb) */
button:focus { outline: none; }
body.kb .kbf { outline: 4px solid #1d3f8f; outline-offset: 4px; box-shadow: 0 0 0 9px rgba(29, 63, 143, .18); }
body.kb[data-look="2"] .kbf { outline-color: #fff; box-shadow: 0 0 0 9px rgba(255, 255, 255, .14), 0 0 26px rgba(255, 255, 255, .5); }
body.kb .dicebox.kbf { border-radius: 50%; }

/* which key does what: shown on big screens only */
.keys { display: none; }
.keys b { color: var(--ink); font-size: 12.5px; letter-spacing: .02em; }
.keys .r { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.keys .r span { margin-left: auto; color: var(--ink); font-weight: 700; }
.keys kbd { font: 700 11px var(--sans); padding: 3px 7px; border-radius: 7px; border: 1px solid var(--line); background: var(--chip); color: var(--ink); }
.keys kbd.ab { border-radius: 50%; width: 22px; height: 22px; padding: 0; display: inline-grid; place-items: center; }

/* TV and big laptop screens: the side column grows and everything in it is drawn larger, readable from the sofa.
   Each step keeps the column at least ~340 px wide before the zoom, so four corner pads keep their names. */
@media (orientation: landscape) and (min-aspect-ratio: 6/5) and (min-width: 1600px) and (min-height: 900px) {
  #app { --side: clamp(260px, 30vw, 760px); }
  .top, .players, .crow, .dock, .keys { zoom: 1.4; }
  .card { zoom: 1.3; max-height: calc((100dvh - 32px) / 1.3); }
  .keys {
    display: grid; grid-area: gap; align-self: end; gap: 7px; padding: 10px 12px; border-radius: 16px;
    border: 1px solid var(--line); background: var(--panel); font-size: 12px; color: var(--muted);
  }
}
@media (orientation: landscape) and (min-aspect-ratio: 6/5) and (min-width: 1880px) and (min-height: 1000px) {
  .top, .players, .crow, .dock, .keys { zoom: 1.6; }
  .card { zoom: 1.45; max-height: calc((100dvh - 32px) / 1.45); }
}
@media (orientation: landscape) and (min-aspect-ratio: 6/5) and (min-width: 2400px) and (min-height: 1300px) {
  .top, .players, .crow, .dock, .keys { zoom: 2.1; }
  .card { zoom: 1.9; max-height: calc((100dvh - 32px) / 1.9); }
}

/* ---------------------------------------------------------------- the website's name, copies, ads (Vishal, 2026-10-31) */

/* the name: under the menu's title and on the result card (the board frame carries it too, view.js) */
.card .sub .site { display: block; margin-top: 3px; color: var(--ink); font-size: 14px; letter-spacing: .03em; }
.sitecard { margin: 0 0 12px; padding: 9px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--chip); font-size: 12.5px; color: var(--muted); }
.sitecard b { display: block; color: var(--ink); font-size: 15px; letter-spacing: .02em; }

/* a copy on another site, after each game */
#copy .count { font: 800 44px/1.1 var(--title); color: var(--accent); margin: 2px 0 6px; }
.copyto { margin: 0 0 14px; font-size: 14px; }
.copyto b { display: block; font-size: 17px; letter-spacing: .02em; }
.actions.one { grid-template-columns: 1fr; }

/* the request when an ad blocker is on */
.plea h2 { margin-bottom: 6px; }
.plea p { margin: 8px 0; font-size: 14px; line-height: 1.45; text-align: left; }
.plea .promise { display: grid; gap: 6px; margin: 10px 0 14px; text-align: left; font-size: 13px; }
.plea .promise div { display: flex; gap: 8px; align-items: flex-start; }
.plea .promise i { font-style: normal; font-weight: 800; color: #0f7d3e; }
body[data-look="2"] .plea .promise i { color: #20e06a; }
.plea .thanks { text-align: center; margin: 10px 0 0; font-size: 11.5px; color: var(--muted); }

/* ad places: before a match (menu), after it (result), beside the board on wide screens. Never during play. */
.adslot { margin: 12px auto 0; display: grid; justify-items: center; }
.adlabel { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.adbox { max-width: 100%; overflow: hidden; }
.adbox.m { width: 320px; height: 100px; } .adbox.r { width: 300px; height: 250px; } .adbox.s { width: 160px; height: 600px; }
body.adtest .adbox { border: 1.5px dashed var(--line); border-radius: 10px; background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(128, 128, 128, .07) 10px 20px); }
.rail { display: none; }
/* wide screens: the two side strips only (above the menu and result, never blurred behind them) */
@media (orientation: landscape) and (min-aspect-ratio: 6/5) and (min-width: 1600px) and (min-height: 900px) {
  .rail:not([hidden]) { display: grid; position: fixed; top: 50%; transform: translateY(-50%); margin: 0; z-index: 11; }
  .rail[data-ad="left"] { left: 16px; } .rail[data-ad="right"] { right: 16px; }
  .adslot[data-ad="menu"], .adslot[data-ad="result"] { display: none !important; }
  body.ads #app { padding-left: 196px; padding-right: 196px; --bw: min(calc(100dvh - 24px), calc(100vw - var(--side) - 52px - 392px)); }
}

/* a card taller than the screen (small phones, an ad) scrolls from its top instead of being cut off above it */
.screen { display: flex; flex-direction: column; align-items: center; }
.screen > .card { margin: auto 0; flex: none; }

/* reduced motion: no bobbing, pulsing or calling; the game's own moves are shortened in the view */
@media (prefers-reduced-motion: reduce) {
  .dice.ready, .cpad.ready { animation: none; }
  .cpad.ready { box-shadow: 0 0 0 3px var(--c); }
}
body.rm .dice.ready, body.rm .cpad.ready { animation: none; }
body.rm .cpad.ready { box-shadow: 0 0 0 3px var(--c); }