/* Two-player duel. Player one (bottom) is rose, player two (top, rotated to face them) is sky. Colour is never the only cue: names, avatars and pips sit beside it. */
/* setup: every choice and the Start button fit one tablet screen; Start sits beside the players, never on top of them */
.duel-setup{width:100%;max-width:860px;margin:0 auto;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);grid-template-areas:"game game" "sub tier" "who go";gap:var(--s3) var(--s4);align-items:start}
.duel-setup:has(#ds-subject-block[hidden]){grid-template-areas:"game game" "tier tier" "who go"} /* memory has no subject */
.duel-setup>.ds-block:nth-child(1){grid-area:game}.duel-setup>.ds-block:nth-child(2){grid-area:sub}.duel-setup>.ds-block:nth-child(3){grid-area:tier}.duel-setup>.ds-block:nth-child(4){grid-area:who}
@media (max-width:640px){.duel-setup,.duel-setup:has(#ds-subject-block[hidden]){grid-template-columns:minmax(0,1fr);grid-template-areas:"game" "sub" "tier" "who" "go"}}
.ds-block{width:100%;padding:var(--s3) var(--s4) var(--s4);border-radius:var(--r-lg);background:var(--card);box-shadow:var(--sh-2)}
.ds-block h3{margin:0 0 var(--s3);font-size:var(--fs-md)}
.ds-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3)}
.ds-block .mode-card{min-height:0;padding-block:var(--s3) var(--s2)} /* compact enough that the players row is on screen at 1024x768 */
.mode-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--s1);min-height:144px;padding:var(--s4) var(--s2) var(--s3);border:3px solid transparent;border-radius:var(--r-md);background:var(--gloss),var(--paper);color:var(--ink);box-shadow:0 var(--lip-h) 0 var(--lip),var(--drop);transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
.mode-card:active{transform:translateY(calc(var(--lip-h) - var(--press)));box-shadow:0 var(--press) 0 var(--lip),var(--sh-press)}
.mode-card .badge{width:56px;height:56px}
.mode-card>.bi{font-family:var(--font-display);font-size:var(--fs-lg)} /* the name outranks its note, as on .gcard .nm */
.mode-card small{font-size:var(--fs-sm);color:var(--ink-2);font-weight:700;text-align:center}
.chips{display:flex;gap:var(--s2);flex-wrap:wrap}
.chip-btn{position:relative;min-height:60px;padding:var(--s1) var(--s5);border:3px solid transparent;border-radius:var(--r-pill);background:var(--gloss),var(--paper);color:var(--ink);box-shadow:0 var(--lip-h-sm) 0 var(--lip),var(--sh-1);font-weight:700;transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
.chip-btn:active{transform:translateY(calc(var(--lip-h-sm) - var(--press)));box-shadow:0 var(--press) 0 var(--lip)}
.chip-btn .it{height:1.4em}
.ds-players{display:flex;align-items:center;gap:var(--s3)}
.ds-players .vs{font-family:var(--font-display);font-size:var(--fs-lg)}
/* friends to play against scroll sideways in one row, so the list never grows under the Start button; the half-shown tile says there is more */
.p2-list{display:flex;align-items:center;gap:var(--s2);flex:1;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:var(--s2) var(--s2) var(--s4);margin-block:calc(-1 * var(--s2)) calc(-1 * var(--s4))}
.p2-list>*{flex:none;scroll-snap-align:start}
.p2-sep{display:flex;flex-direction:column;align-items:center;gap:var(--s1);padding-inline:var(--s1);font-family:var(--font-display);font-size:var(--fs-md)}
.p2-sep .ui3d{width:32px;height:32px}
.ds-players .ds-p1{flex:none;cursor:default;border-color:var(--rose-d)}
.ds-players .p2-list .prof.sel{border-color:var(--sky-d)}
@media (max-width:640px){.ds-players{flex-wrap:wrap}.p2-list{flex-basis:100%}}
.duel-start{grid-area:go;align-self:center;display:flex;justify-content:center}
.duel-start .btn{width:100%;padding-inline:var(--s4)}

/* ===== the table ===== */
#s-duel{padding:0;gap:0;overflow:hidden}
#s-duel.active{display:grid;grid-template-rows:1fr auto 1fr}
#s-duel[data-mode="memory"].active{grid-template-rows:auto 1fr auto}
#s-duel[data-mode="memory"] .dz{container-type:normal} /* memory rows size to their content, so a half may not be a size container there */
.dz{--fs-dz:clamp(calc(var(--fs-piece) * .66),14.5cqh,var(--fs-piece-lg));--fs-dz-pic:clamp(var(--fs-piece-sm),14cqh,var(--fs-piece-lg));container-type:size;position:relative;display:flex;flex-direction:column;gap:var(--s2);padding:var(--s2) var(--s4);min-height:0;overflow:hidden;transition:background-color var(--t-move) var(--ease-out)}
.dz-bot{background:color-mix(in srgb,var(--rose) 34%,var(--paper))}
.dz-top{background:color-mix(in srgb,var(--sky) 36%,var(--paper));transform:rotate(180deg)}
.dz.turn{background:color-mix(in srgb,var(--sun) 62%,var(--paper))}
.dz-head{flex:none;display:flex;align-items:center;gap:var(--s3);min-height:64px}
.dz-av{width:60px;height:60px;flex:none;border-radius:50%;overflow:hidden;background:var(--paper);box-shadow:0 0 0 3px var(--paper),0 4px 8px -4px rgb(var(--shade)/.4)}
.dz-name{font-family:var(--font-display);font-size:var(--fs-lg)}
.dz-name{color:var(--ink)}
.dz-note{flex:1;font-weight:700;text-align:center;font-size:var(--fs-sm);min-width:0}
.dz-say{flex:none;display:grid;place-items:center;width:var(--tap);height:var(--tap);border:0;border-radius:50%;background:var(--gloss),var(--paper);box-shadow:0 var(--lip-h-sm) 0 var(--lip),var(--sh-1);transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) var(--ease-out)}
.dz-say:active{transform:translateY(calc(var(--lip-h-sm) - var(--press)));box-shadow:0 var(--press) 0 var(--lip)}
.dz-say .ui3d{width:34px;height:34px}
.dz-score{margin-inline-start:auto;display:flex;gap:var(--s2);align-items:center;font-family:var(--font-display);font-size:var(--fs-xl);font-variant-numeric:tabular-nums}
.pip{width:20px;height:20px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 3px var(--line);transition:transform var(--t-ui) var(--ease-out),background-color var(--t-ui)}
.pip.on{background:var(--sun);transform:scale(1.15);box-shadow:inset 0 0 0 3px var(--sun-d)}
.dz-bot .pip.on{background:var(--rose);box-shadow:inset 0 0 0 3px var(--rose-d)}.dz-top .pip.on{background:var(--sky);box-shadow:inset 0 0 0 3px var(--sky-d)}
.dz-q{flex:1 1 0;display:flex;flex-direction:column;gap:var(--s2);align-items:center;justify-content:safe center;min-height:0;overflow:hidden}
.dz-opts{flex:0 1 auto;min-height:0;gap:var(--s2);width:100%}
/* every answer in one row, even on a phone (the answers are pictures and numbers), so the height goes to the question */
#s-duel .dz-opts.c3{grid-template-columns:repeat(3,1fr)}#s-duel .dz-opts.c4{grid-template-columns:repeat(4,1fr)}#s-duel .dz-opts>*{grid-column:auto}
.dz .bubble{flex:none;min-height:0;padding:var(--s1) var(--s4);font-size:clamp(var(--fs-md),3.2cqh,var(--fs-xl));box-shadow:var(--sh-1);background:var(--paper)}
.dz-body:has(.items,.bigpic,.rowitems,.eq,.seq,.mixrow,.word){padding:var(--s2) var(--s4);border-radius:var(--r-md);background:var(--card);box-shadow:var(--sh-1)} /* items sit on a paper card sized to them, so they read on either colour half */
.dz .bubble::before{display:none}
/* a wide, short half (a tablet on its side) sets a picture sum's pictures beside its "a + b = ?" line, so neither has to shrink */
@container (min-aspect-ratio:2/1){.dz-body:has(>.word:nth-child(2)){display:flex;align-items:center;justify-content:center;gap:var(--s4)}}
.dz .dz-body .items{font-size:var(--fs-dz-pic);gap:2px var(--s2)}.dz .dz-body .items:has(>.it:nth-child(8)){font-size:calc(var(--fs-dz-pic) * .8)} /* three classes: outrank the page-size .items:has(…) rules in game.css; eight or more pictures step down so a sum stays one row */.dz .bigpic{font-size:var(--fs-dz-pic);animation:none}.dz .bigpic .it{height:1.5em}.dz .bigpic.sm{font-size:calc(var(--fs-dz-pic) * .84)}
.dz .word{font-size:var(--fs-dz)}.dz .eq .grp{padding:var(--s1) var(--s2)}.dz .eq .op{font-size:var(--fs-dz)}
.dz .shp{width:44px}.dz .opt .shp{width:48px}.dz .seq .shp{width:36px}
.dz .sw{width:40px;height:40px}.dz .mixrow{font-size:var(--fs-dz);gap:var(--s2)}.dz .rowitems{font-size:calc(var(--fs-piece) * .84)}
.dz .opt{min-height:clamp(var(--tap),30cqh,120px);font-size:var(--fs-dz);padding:2px var(--s2);box-shadow:0 var(--lip-h-sm) 0 var(--edge),var(--sh-1)}
/* a question with no picture (tap the blue one) gives its height to the answers, as .qbody:empty+.opts does on the page */
.dz:has(.dz-body:empty) .opt{min-height:clamp(var(--tap),40cqh,200px)}.dz:has(.dz-body:empty) .opt .shp{width:clamp(48px,18cqh,96px)}
.dz .opt .it{height:1.6em}
.dz .opt:active{transform:translateY(calc(var(--lip-h-sm) - var(--press)));box-shadow:0 var(--press) 0 var(--edge)}
.dz .opts{padding-bottom:var(--s1)}
.dz .opt.txt{font-size:var(--fs-lg)}
.dz .clock{width:auto;height:min(140px,18vh)}
/* duel.js fitQuestion: a question that still does not fit at the smallest zoom drops to a one-line bubble and smaller pictures */
.dz.tight .dz-prompt{white-space:nowrap}.dz.tight .dz-prompt .bi{flex-direction:row;gap:var(--s2);align-items:baseline}
.dz.tight .dz-body .it{max-height:2em}
/* a short half keeps the habitat pictures and moves their names off screen (still read aloud by a screen reader) */
@container (max-height:360px){.dz .hab small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.dz .opt.dz-locked{pointer-events:none}
.dz.dz-lockout .opt:not(.wrong){color:color-mix(in srgb,var(--ink) 40%,transparent)}.dz.dz-lockout .opt:not(.wrong) :is(img,svg){opacity:.45}
.dz.idle .dz-q,.dz.idle .dz-opts{visibility:hidden}
#s-duel[data-mode="memory"] :is(.dz-q,.dz-opts){display:none}
#s-duel[data-mode="tug"] .dz{padding-inline-start:52px}
.dz-end{position:absolute;inset:0;z-index:3;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);animation:popIn var(--t-ui) var(--ease-out) backwards}
.dz-big{font-size:var(--fs-piece-lg);line-height:1}.dz-big .it{height:1.5em;filter:var(--item-drop)}.dz-coins .ui3d{width:1.5em;height:1.5em}.dz-msg{font-family:var(--font-display);font-size:var(--fs-xl)}.dz-coins{display:flex;gap:var(--s1);align-items:center;font-weight:700}
.dz-mid{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--s3);padding:var(--s2) var(--s4);min-height:64px;z-index:2}
.dz-mid>.icon-btn{position:absolute;inset-inline-start:var(--s3);top:50%;translate:0 -50%}
.dz-center{display:flex;align-items:center;justify-content:center}
.dz-actions{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:center;background:var(--paper);box-shadow:var(--sh-2);border-radius:var(--r-pill);padding:var(--s2) var(--s3)}
.dz-board{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);width:min(86vw,520px);max-height:56vh}
.dz-board.c5{grid-template-columns:repeat(5,1fr)}
#s-duel[data-mode="memory"] .dz-board{width:min(calc(100vw - 2*(var(--tap) + var(--s3) + var(--s2))),520px)} /* both sides keep the quit button's width plus a gap clear, so no card sits under it */
.dz-board .card{max-height:calc(56vh / 4)}
.dz-board .card .b{font-size:clamp(1.4rem,5vw,2.4rem)}
.dz-board.tic{grid-template-columns:repeat(3,1fr);gap:var(--s2);width:min(32vh,320px);padding:var(--s2);border-radius:var(--r-lg);background:var(--card);box-shadow:var(--sh-2)}
.dz-board.tic.waiting .cell:not(.pending){opacity:.65}
.cell{aspect-ratio:1;border:0;border-radius:var(--r-sm);background:var(--gloss),var(--paper);box-shadow:0 var(--lip-h-sm) 0 var(--lip),var(--sh-1);padding:6px;transition:transform var(--t-fast) var(--ease-out),scale var(--t-fast) var(--ease-out),background-color var(--t-ui)}
.cell .shp{width:100%}
.cell:active{transform:scale(.94)}
.cell.pending{background:var(--sel);scale:1.04}
.cell.mine0{background:color-mix(in srgb,var(--rose) 40%,var(--paper))}.cell.mine1{background:color-mix(in srgb,var(--sky) 40%,var(--paper))}
.dz-rope{position:absolute;inset-inline-start:var(--s3);top:12%;bottom:12%;width:20px;border-radius:var(--r-pill);background:var(--paper);box-shadow:var(--sh-1);z-index:4;pointer-events:none}
.dz-rope .end{position:absolute;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%}
.dz-rope .e0{bottom:3px;background:var(--rose-d)}.dz-rope .e1{top:3px;background:var(--sky-d)}
.dz-rope .knot{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--enamel),var(--sun);box-shadow:var(--bevel),var(--sh-1);transition:transform var(--t-move) var(--ease-out)}
@media (orientation:portrait){.dz-board.tic{width:min(46vw,300px)}}
@media (max-height:700px){.dz .opt{font-size:calc(var(--fs-piece) * .55)}.dz-head{min-height:46px}.dz-av{width:40px;height:40px}.dz-say{width:56px;height:56px}}
@media (max-height:560px){.dz .opt{min-height:56px}} /* the only place a duel answer drops below the 64px tap size */
/* dark: a soft sun wash with a sun rim, so light ink keeps its contrast on the active side */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dz.turn{background:color-mix(in srgb,var(--sun) 28%,var(--paper));box-shadow:inset 0 0 0 4px var(--sun)}
  :root:not([data-theme="light"]) .dz .bi .en{color:var(--ink)}} /* --ink-2 on a tinted half is 4.2:1, full ink 6.4:1 */
/* duel.js whenUpright: a phone on its side shows this until it is turned; the leave button in the middle bar stays usable */
.dz-rotate{display:none}
@media (orientation:landscape) and (max-height:480px){
  #s-duel .dz-rotate{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:var(--s4);background:color-mix(in srgb,var(--paper) 88%,transparent)}
  #s-duel .dz-mid{z-index:6}#s-duel .dz-center{visibility:hidden}
}
.dz-rotate-card{display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s6);border-radius:var(--r-lg);background:var(--card);box-shadow:var(--sh-2);font-family:var(--font-display);font-size:var(--fs-lg)}
.dz-rotate-ico{flex:none;width:36px;height:60px;border:5px solid var(--ink);border-radius:10px;animation:turnUp var(--t-loop) var(--ease-in-out) infinite}
@keyframes turnUp{0%,25%{rotate:90deg}60%,100%{rotate:0deg}}

/* a tablet on its side: notes and tiles tighten so the whole setup, players included, is on one screen */
@media (min-width:641px) and (max-height:820px){
  .ds-block{padding-block:var(--s2) var(--s3)}.ds-block h3{margin-bottom:var(--s2)}
  .ds-block .mode-card{gap:2px}.ds-block .mode-card .badge{width:48px;height:48px}.ds-block .mode-card small{font-size:var(--fs-xs);line-height:1.15}
  .ds-players .prof{padding-block:var(--s1)}
}