@font-face{font-family:"W98";src:url(/fonts/w98-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"W98";src:url(/fonts/w98-700.woff2) format("woff2");font-weight:700;font-display:swap}
/* Windows 98 "Standard" scheme; dark = Windows 98 "High Contrast Black"-style */
:root{--desk:#008080;--face:#C0C0C0;--hi:#FFFFFF;--lo:#808080;--dk:#000000;--li:#DFDFDF;--sel:#000080;--selt:#FFFFFF;--txt:#000000;--win:#FFFFFF;--dis:#808080;--mut:#404040;
  --t1:#000080;--t2:#000080;--ok:#008000;--bad:#FF0000;--chk1:#FFFFFF;--chk2:#DFDFDF;color-scheme:light}
:root[data-theme="dark"]{--desk:#000000;--face:#3C3C3C;--hi:#7A7A7A;--lo:#1E1E1E;--dk:#000000;--li:#5A5A5A;--sel:#0000C0;--selt:#FFFFFF;--txt:#FFFFFF;--win:#000000;--dis:#9A9A9A;--mut:#C8C8C8;
  --t1:#400080;--t2:#7040C0;--ok:#40FF40;--bad:#FF6060;--chk1:#202020;--chk2:#2C2C2C;color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--desk)}
body{margin:0;min-height:100vh;background:var(--desk);color:var(--txt);font:14px/1.35 "W98",Tahoma,Verdana,sans-serif;-webkit-font-smoothing:none;-webkit-tap-highlight-color:transparent;text-size-adjust:100%}
a{color:var(--sel)}:root[data-theme="dark"] a{color:#8EC8FF}
h1,h2,h3{font-weight:700;margin:0}
h1{font-size:18px}h2{font-size:16px}h3{font-size:14px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hidden,[hidden]{display:none!important}
/* bevels */
.raised{box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--lo),inset 2px 2px var(--li)}
.sunken{box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo),inset -2px -2px var(--li),inset 2px 2px var(--dk)}
.window{background:var(--face);padding:3px;box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--li),inset -2px -2px var(--lo),inset 2px 2px var(--hi)}
/* page frame */
.app{max-width:640px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
@media(min-width:700px){.app{padding:20px 16px}.app>.window{min-height:0}}
.app>.window{flex:1;display:flex;flex-direction:column}
.titlebar{display:flex;align-items:center;gap:6px;padding:3px 3px 3px 5px;background:linear-gradient(90deg,var(--t1),var(--t2));color:#fff;font-weight:700;min-height:24px}
.titlebar .tt{flex:1;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.titlebar .tt a{color:#fff;text-decoration:none}
.titlebar .ctl{width:18px;height:16px;min-width:0;min-height:0;padding:0;display:grid;place-items:center;font:700 10px/1 "W98",Tahoma}
.toolbar{display:flex;align-items:center;gap:4px;padding:4px 4px 5px;border-bottom:1px solid var(--lo);box-shadow:0 1px var(--hi)}
.toolbar .brand{display:flex;align-items:center;gap:6px;color:var(--txt);text-decoration:none;font-weight:700;font-size:15px;padding:2px 4px;margin-right:auto;min-height:44px}
.toolbar .brand img{image-rendering:pixelated}
.tbtn{min-width:44px;min-height:44px;padding:4px 6px;display:inline-flex;align-items:center;justify-content:center;gap:4px;box-shadow:none;background:none;text-decoration:none;color:var(--txt);font-size:13px}
.tbtn:hover{box-shadow:inset -1px -1px var(--lo),inset 1px 1px var(--hi)}
.tbtn:active{box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo)}
.tbtn svg{width:20px;height:20px;shape-rendering:crispEdges}
.main{flex:1;padding:10px;display:flex;flex-direction:column;gap:12px}
.footer{padding:8px 10px 10px;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;font-size:13px;border-top:1px solid var(--lo);box-shadow:inset 0 1px var(--hi)}
.footer .tag{margin-left:auto;color:var(--mut)}
.status{display:flex;gap:2px;padding:2px 0 0}
.status>span{padding:3px 6px;min-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo)}
.status>span:first-child{flex:1}
/* controls */
button,.btn{font:14px "W98",Tahoma,sans-serif;color:var(--txt);background:var(--face);border:0;border-radius:0;min-width:80px;min-height:44px;padding:4px 14px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;text-align:center;-webkit-appearance:none;appearance:none;
  box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--lo),inset 2px 2px var(--li)}
button:active:not(:disabled),.btn:active{box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--dk),inset -2px -2px var(--li),inset 2px 2px var(--lo);padding:5px 13px 3px 15px}
button.def,.btn.def{box-shadow:inset -2px -2px var(--dk),inset 1px 1px var(--dk),inset 2px 2px var(--hi),inset -3px -3px var(--lo),inset 3px 3px var(--li);font-weight:700}
button:disabled{color:var(--dis);text-shadow:1px 1px 0 var(--hi);cursor:default}
:root[data-theme="dark"] button:disabled{text-shadow:none}
button.link{min-width:0;box-shadow:none;background:none;text-decoration:underline;color:var(--sel);padding:4px 6px;font-size:13px}
:root[data-theme="dark"] button.link{color:#8EC8FF}
:focus{outline:none}
:focus-visible{outline:none}
button:focus-visible,.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,[role=option]:focus-visible,.mi:focus-visible{outline:1px dotted var(--txt)!important;outline-offset:-4px}
.tbtn:focus-visible,a:focus-visible,button.link:focus-visible{outline-offset:1px}
input[type=text],input[type=search],textarea{font:15px "W98",Tahoma,sans-serif;color:var(--txt);background:var(--win);border:0;border-radius:0;padding:4px 8px;min-height:44px;width:100%;-webkit-appearance:none;appearance:none;
  box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo),inset -2px -2px var(--li),inset 2px 2px var(--dk)}
textarea{min-height:0;resize:none;line-height:1.4}
input:disabled{background:var(--face);color:var(--dis)}



fieldset{margin:0;padding:6px 10px 10px;border:0;min-width:0;box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo),inset -2px -2px var(--lo),inset 2px 2px var(--hi)}
legend{padding:0 4px;background:var(--face)}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grow{flex:1;min-width:0}
.muted{color:var(--mut)}
.small{font-size:12px}
/* combobox */
.combo{position:relative;flex:1;min-width:0}
.lb{position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--win);border:1px solid var(--txt);max-height:290px;overflow:auto;margin:0;padding:0;list-style:none}
.lb li{min-height:44px;padding:6px 8px;display:flex;align-items:center;gap:8px;cursor:default}
.lb li[aria-selected="true"]{background:var(--sel);color:var(--selt)}
.lb li[aria-disabled="true"]{color:var(--dis)}
.lb li .al{color:inherit;opacity:.8}
.lb li img{width:30px;height:20px;image-rendering:pixelated;flex:none}
/* flag box */
.flagbox{position:relative;width:240px;height:160px;flex:none;margin:0 auto;background:repeating-conic-gradient(var(--chk1) 0 25%,var(--chk2) 0 50%) 0 0/16px 16px;overflow:hidden}
.flagwell{padding:2px;display:flex;justify-content:center}

.flagbox .ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:10px}
.tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}
.tile{background:var(--face);box-shadow:inset -3px -3px var(--lo),inset 3px 3px var(--hi),inset -4px -4px var(--dk)}
.tile.open{visibility:hidden}

/* guess history */
.hist{display:grid;gap:3px}
.hist .g{min-height:36px;display:flex;align-items:center;gap:10px;padding:4px 8px;background:var(--win);box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo)}

.hist .g .fw{width:48px;display:flex;justify-content:center;flex:none}
.hist .g .n{flex:1}
.hist .g.ok{background:var(--sel);color:var(--selt)}
.hist .g .v{white-space:nowrap}
.hist .g.gu{color:var(--mut)}
.hint{padding:6px 8px;background:var(--win);box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo)}
.panel{display:flex;gap:12px;align-items:flex-start}
.ico32{width:32px;height:32px;flex:none;image-rendering:pixelated}
/* option grid */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:360px){.opts{grid-template-columns:1fr}}
.opts button{min-height:56px;padding:8px;flex-direction:column;white-space:normal;line-height:1.25}
.opts button .k{position:absolute;left:6px;top:4px;font-size:11px;color:var(--mut)}
.opts button{position:relative}
.opts .pix{display:flex;align-items:center;justify-content:center;align-self:stretch;width:100%;min-height:104px;padding:2px;background:repeating-conic-gradient(var(--chk1) 0 25%,var(--chk2) 0 50%) 0 0/16px 16px;box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo),inset -2px -2px var(--li),inset 2px 2px var(--dk)}
.opts .pix img{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
:root[data-theme="dark"] .opts .pix img.shape{filter:invert(1)}

.opts button.right{font-weight:700}
.opts button .mk{font-size:13px}
.opts button.right .mk{color:var(--ok)}
.opts button.wrong .mk{color:var(--bad)}
.dots{display:flex;gap:6px;align-items:center}
.dots i{width:12px;height:12px;display:block;box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo);background:var(--win)}
.dots i.on{background:var(--sel)}
/* modals */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:12px;background:rgba(0,0,0,.25)}
.dlg{width:100%;max-width:34em;max-height:calc(100vh - 24px);display:flex;flex-direction:column;box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--li),inset -2px -2px var(--lo),inset 2px 2px var(--hi),4px 4px 0 rgba(0,0,0,.35)}
.dlg .body{padding:12px;overflow:auto}
.dlg .btns{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:6px 10px 12px}
.dlg p{margin:0 0 10px}
.statsnums{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center;margin-bottom:12px;font-size:12px}
.statsnums b{display:block;font-size:24px;line-height:1.2}
.dist{display:grid;grid-template-columns:22px 1fr;gap:4px 6px;align-items:center}
.dist .bar{height:20px;background:var(--win);box-shadow:inset 1px 1px var(--lo),inset -1px -1px var(--hi);padding:2px}
.dist .bar i{display:block;height:100%;background:var(--sel);color:var(--selt);font-style:normal;font-size:12px;text-align:right;padding:0 4px;line-height:16px;min-width:18px}
.dist .bar i.today{background:var(--ok);color:#000}
/* switch / radio / checkbox (Win98 style) */
.chk{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.chk input{position:absolute;opacity:0;width:1px;height:1px}
.chk .box{width:15px;height:15px;flex:none;background:var(--win);box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo),inset -2px -2px var(--li),inset 2px 2px var(--dk);display:grid;place-items:center;font-size:12px;line-height:1}
.chk input:checked+.box::after{content:"\2714";color:var(--txt)}
.chk input:focus-visible~.lbl{outline:1px dotted var(--txt);outline-offset:2px}
.chk .state{margin-left:auto;color:var(--mut);font-size:12px}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1;min-width:90px;flex-direction:column;gap:0;line-height:1.2;padding:6px}
.seg button[aria-pressed="true"]{box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--dk),inset -2px -2px var(--li),inset 2px 2px var(--lo);background:repeating-conic-gradient(var(--face) 0 25%,var(--hi) 0 50%) 0 0/2px 2px;font-weight:700}
.seg button small{font-size:11px;color:var(--mut);font-weight:400}
/* lists / grids */
.sets{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.sets a{min-height:64px;justify-content:flex-start;gap:10px;text-align:left;padding:8px 10px}
.sets a img{width:36px;height:24px;image-rendering:pixelated;flex:none}
.sets a small{display:block;color:var(--mut)}
.flaglist{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;margin:8px 0 0;padding:0;list-style:none}
.flaglist li{display:flex;align-items:center;gap:6px;font-size:13px}
.flaglist img{width:36px;height:24px;image-rendering:pixelated;flex:none}
details summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.faq h3{margin:12px 0 4px}
.faq p{margin:0}
.prose p{margin:0 0 10px}.prose ul{margin:0 0 10px;padding-left:20px}
.qbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.qbar .grow{font-weight:700}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;padding:8px 14px;background:#FFFFFF;color:#000;border:1px solid #000;box-shadow:2px 2px 0 rgba(0,0,0,.3)}
.banner{padding:8px 10px;background:#FFFFFF;color:#000;border:1px solid #000;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.miss{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.miss li{display:flex;gap:10px;align-items:center;padding:4px 8px;background:var(--win);box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo)}
.miss img{width:36px;height:24px;image-rendering:pixelated;flex:none}
.big{font-size:22px;font-weight:700}
.badge{display:inline-block;padding:2px 8px;background:#FFFF00;color:#000;border:1px solid #000;font-weight:700}


.reduce *,.reduce *::before{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.auto-motion *{animation:none!important;transition:none!important}}

canvas.sticker{display:block;width:100%;max-width:340px;height:auto;margin:0 auto 8px;image-rendering:pixelated}
.ctl svg,button svg{display:block}


.qframe .flagwell{padding:2px;flex:none}


.qframe .flagbox,#dBox{background:var(--face)}

/* ===== native Windows 98 pass ===== */
h1{font-size:15px}h2{font-size:14px}
button.def,.btn.def{font-weight:400}
input[type=text]:focus-visible,textarea:focus-visible,input:focus{outline:none!important}
::selection{background:var(--sel);color:var(--selt)}
/* desktop: real Win98 sizes; touch keeps 44px targets */
@media(pointer:fine){button,.btn{min-height:24px;padding:3px 12px;font-size:13px}button:active:not(:disabled),.btn:active{padding:4px 11px 2px 13px}
  input[type=text],input[type=search]{min-height:24px;padding:3px 5px;font-size:13px}.tbtn{min-width:28px;min-height:28px}.toolbar .brand{min-height:28px}
  .lb li{min-height:0;padding:2px 6px}.chk{min-height:22px}.opts button{min-height:40px}.hist .g{min-height:28px}}
.modal{background:none}
.dlg{box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--li),inset -2px -2px var(--lo),inset 2px 2px var(--hi)}
/* checkbox + option button (radio) glyphs */
.chk .box{width:13px;height:13px}
.chk input:checked+.box::after{content:"";width:7px;height:7px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath d='M6 0h1v3h-1v1h-1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-3h1v1h1v1h1v-1h1v-1h1z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/7px 7px}
:root[data-theme="dark"] .chk input:checked+.box::after{filter:invert(1)}
.chk .rad{width:12px;height:12px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'%3E%3Cpath d='M4 0h4v1h2v1h1v2h1v4h-1v2h-1v1h-2v1h-4v-1h-2v-1h-1v-2h-1v-4h1v-2h1v-1h2z' fill='%23808080'/%3E%3Cpath d='M4 1h4v1h2v2h1v4h-1v2h-2v1h-4v-1h-2v-2h-1v-4h1v-2h2z' fill='%230A0A0A'/%3E%3Cpath d='M4 2h4v1h1v1h1v4h-1v1h-1v1h-4v-1h-1v-1h-1v-4h1v-1h1z' fill='%23fff'/%3E%3Cpath d='M11 4h1v4h-1v2h-1v1h-2v1h-4v-1h4v-1h2v-2h1z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center/12px 12px;position:relative}
.chk input:checked+.rad::after{content:"";position:absolute;left:4px;top:4px;width:4px;height:4px;background:#000;box-shadow:0 -1px 0 -0px #000}
.chk input:focus-visible~.lbl{outline:1px dotted var(--txt);outline-offset:1px}
.radios{display:grid;gap:0}
.radios .sub{display:block;font-size:12px;color:var(--mut)}
.radios .chk{align-items:flex-start;padding:3px 0}.radios .chk .rad{margin-top:2px}
/* Win98 progress bar (segments) */
.prog{display:flex;gap:2px;padding:2px;height:18px;background:var(--win);box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo),inset -2px -2px var(--li),inset 2px 2px var(--dk);max-width:180px}
.prog i{flex:1;background:transparent}.prog i.on{background:var(--sel)}
.dist .bar i.today{background:var(--sel);color:var(--selt)}
/* inline small button inside text */
button.inl{min-width:0;min-height:0;padding:0 6px;margin-left:4px;font-size:12px;vertical-align:baseline}
/* footer + toolbar links look like flat toolbar buttons, not web links */
.footer a{color:var(--txt);text-decoration:none;padding:3px 6px}
.footer a:hover{box-shadow:inset -1px -1px var(--lo),inset 1px 1px var(--hi)}
.footer a:active{box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo)}
details summary{list-style:none}details summary::-webkit-details-marker{display:none}
details summary h2{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--face);box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--lo),inset 2px 2px var(--li);font-weight:400;font-size:13px}
details summary h2::after{content:"\25B8"}details[open] summary h2::after{content:"\25BE"}

.big{font-size:16px}
.opts button .k{display:none}
/* Win98 scrollbars */
*{scrollbar-color:var(--face) var(--li)}
::-webkit-scrollbar{width:16px;height:16px}
::-webkit-scrollbar-track{background:repeating-conic-gradient(var(--face) 0 25%,var(--hi) 0 50%) 0 0/2px 2px}
::-webkit-scrollbar-thumb{background:var(--face);box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--li),inset -2px -2px var(--lo),inset 2px 2px var(--hi)}
::-webkit-scrollbar-button:single-button{display:block;width:16px;height:16px;background-color:var(--face);background-repeat:no-repeat;background-position:center;box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--li),inset -2px -2px var(--lo),inset 2px 2px var(--hi)}
::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M3 0h1v1h1v1h1v1h1v1h-7v-1h1v-1h1v-1h1z'/%3E%3C/svg%3E")}
::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0h7v1h-1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-1z'/%3E%3C/svg%3E")}
::-webkit-scrollbar-button:single-button:horizontal:decrement{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7'%3E%3Cpath d='M3 0h1v7h-1v-1h-1v-1h-1v-1h-1v-1h1v-1h1v-1h1z'/%3E%3C/svg%3E")}
::-webkit-scrollbar-button:single-button:horizontal:increment{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7'%3E%3Cpath d='M0 0h1v1h1v1h1v1h1v1h-1v1h-1v1h-1v1h-1z'/%3E%3C/svg%3E")}
::-webkit-scrollbar-corner{background:var(--face)}
/* hint line as a Win98 tip (yellow tooltip colour) */
.hint{background:#FFFFFF;color:#000;box-shadow:none;border:1px solid #000}

/* ===== handover round: integer-scaled 120x80 flags (P0-04) ===== */
img{image-rendering:pixelated;image-rendering:crisp-edges}
.flagbox img.flag{position:absolute;inset:0;width:100%;height:100%}
.flagwell{max-width:100%}
.qframe{display:flex;justify-content:center;width:100%}
.qframe .flagwell{padding:2px;flex:none}
.hist .g img.th{width:60px;height:40px;flex:none}
.opts img.fl{width:120px;height:80px}
.sets a img,.miss img{width:60px;height:40px}
/* P1-01 distance row */
.hist .g .v{display:flex;align-items:center;gap:6px;margin-left:auto}
.hist .g .v svg{flex:none}
.hist .g .km{min-width:74px;text-align:right}
.hist .g .pc{min-width:36px;text-align:right;font-weight:700}
.hist .g.ok .v{font-weight:700}
@media(max-width:420px){.hist .g{gap:6px;padding:4px 5px}.hist .g .n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hist .g .km{min-width:0}}
/* P0-09: no zoom on focus */
@media(max-width:600px){input[type=text],input[type=search],textarea,select{font-size:16px!important}}
.qframe{align-items:center}
.flagbox{background:var(--face)}
/* ===== handover-2 round ===== */
canvas.flag{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
button.wide,.btn.wide{width:100%;justify-content:center}
button.big,.btn.big{min-height:48px;font-size:16px;font-weight:700}
.hist .g.slot{background:transparent;box-shadow:none;border:1px dashed var(--lo);min-height:30px}
/* combo box with dropdown button (P1-09) */
.combo.dd input{padding-right:40px}
.ddbtn{position:absolute;right:2px;top:2px;bottom:2px;width:30px;min-width:0;min-height:0;padding:0;font-size:9px}
.combo.open .ddbtn{box-shadow:inset 1px 1px var(--dk),inset -1px -1px var(--hi),inset 2px 2px var(--lo)}
.lb.full{max-height:min(352px,50vh)}
@media(pointer:fine){.lb.full{max-height:264px}}
/* menu (Games, round list) */
.menu{position:absolute;z-index:60;min-width:220px;padding:2px;display:flex;flex-direction:column}
.menu .mi{display:flex;align-items:center;gap:8px;min-height:36px;padding:2px 10px 2px 4px;background:none;box-shadow:none;color:var(--txt);text-decoration:none;justify-content:flex-start;text-align:left;font-weight:400}
.menu .mi:hover,.menu .mi:focus{background:var(--sel);color:var(--selt);outline:none}
.menu .mi.cur{font-weight:700}
.menu .mic{width:18px;display:flex;justify-content:center}.menu .mil{flex:1}.menu .mil small{opacity:.85}.menu .mim{min-width:16px;text-align:right}
@media(pointer:fine){.menu .mi{min-height:22px}}
/* bonus screens (P0-14) */
.bonus{display:grid;gap:10px}
.roundbar{display:flex;align-items:center;gap:6px}
.roundbar .rb-arrow{min-width:44px;font-weight:700}
.roundbar .rb-pill{flex:1;justify-content:center;gap:8px;font-weight:700}
.roundbar .rb-th{flex:none}
.bq{font-size:18px;text-align:center;margin:4px 0 0}
.bleft{margin:0;text-align:center}
.bopts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bopts button{position:relative;flex-direction:column;justify-content:center;gap:6px;min-height:96px;padding:6px;white-space:normal}
.bopts.text button{min-height:72px}
.bopts.shape button,.bopts.flag button{min-height:150px}
.bopts img{display:block;image-rendering:pixelated}
.bopts.shape img.shape{background:var(--win);box-shadow:inset 1px 1px var(--lo)}
.bopts button .nm{font-size:13px;min-height:0}
.bopts button .mk{position:absolute;top:4px;right:6px;font-weight:700;font-size:16px}
.bopts button.right{outline:3px solid var(--ok);outline-offset:-3px}
.bopts button.wrong{outline:3px solid var(--bad);outline-offset:-3px}
.bopts button.right .mk{color:var(--ok)}.bopts button.wrong .mk{color:var(--bad)}
.bopts button.right .nm{font-weight:700}
.bopts button:disabled{color:var(--txt)}
.bafter{display:grid;gap:8px}
/* end screen (P0-15) */
.endscr{display:grid;gap:10px}
.scoreline{display:grid;gap:6px;justify-items:center}
.scoreline .sq{display:grid;grid-template-columns:repeat(6,26px);gap:5px;align-items:center}
.scoreline .sq.small{grid-template-columns:auto repeat(3,18px);gap:5px}
.scoreline .sq span{height:26px;box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi)}
.scoreline .sq.small span{height:18px}.scoreline .sq .lbl{box-shadow:none;height:auto;padding-right:6px}
.cG{background:#008000}.cR{background:#FF0000}.cO{background:#FF8040}.cY{background:#FFFF00}.cF{background:#FFFFFF}.cE{background:var(--face)}
.sharerow{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:6px}
.sharerow button{padding:4px 6px}
.nextgames{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nextgames .btn:nth-child(3){grid-column:1/-1}
.statstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center;font-size:12px;padding:6px;box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo),inset -2px -2px var(--li),inset 2px 2px var(--dk)}
.statstrip b{display:block;font-size:20px}
/* set page option buttons (P0-13) */
.segb{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.segb .sl{min-width:56px;font-weight:700}
.segb button{flex:1;min-width:0}
.segb button[aria-pressed="true"]{box-shadow:inset 1px 1px var(--dk),inset -1px -1px var(--hi),inset 2px 2px var(--lo);background:repeating-conic-gradient(var(--hi) 0 25%,var(--face) 0 50%) 0 0/2px 2px;font-weight:700}
/* all games page */
.games{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gcard{justify-content:flex-start;gap:12px;text-align:left;padding:10px;min-height:80px;align-items:center}
.gcard span{display:flex;flex-direction:column;gap:2px}.gcard small{font-weight:400}.gcard .gm{color:var(--mut)}
@media(max-width:600px){.games{grid-template-columns:1fr}}
#homeNext{margin-top:4px}
/* ===== P1-10 Windows 98 fidelity pass ===== */
.toast{box-shadow:none}.dlg{box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--li),inset -2px -2px var(--lo),inset 2px 2px var(--hi)!important}
/* cursors: arrow everywhere, hand only on hyperlinks, hourglass while busy (our own drawings) */
html,body,button,.btn,.chk,details summary,.tile,label,.lb li{cursor:url(/cur/arrow.png) 0 0,default}
a:not(.btn),button.link,button.inl{cursor:url(/cur/hand.png) 5 0,pointer}
input[type=text],input[type=search],textarea{cursor:text}
body.busy,body.busy *{cursor:url(/cur/busy.png) 0 0,progress!important}
/* footer: plain hyperlinks */
.footer a{color:var(--sel);text-decoration:underline;box-shadow:none!important;padding:3px 6px}
:root[data-theme="dark"] .footer a{color:#FFFF00}
/* links inside text: Win98 hyperlink */
button.inl{background:none;box-shadow:none!important;border:0;color:var(--sel);text-decoration:underline;min-height:0;min-width:0;padding:0 2px;font-size:inherit}
:root[data-theme="dark"] button.inl{color:#FFFF00}
img.pi{width:16px;height:16px;vertical-align:-3px;image-rendering:pixelated;flex:none}
.bopts button .mk{display:flex}
/* menu bar (Game, Help) */
.menubar{display:flex;gap:0;padding:1px 2px;border-bottom:1px solid var(--lo);box-shadow:0 1px var(--hi)}
.menubar .mb{min-width:0;min-height:30px;padding:2px 10px;background:none;box-shadow:none!important;font-weight:400}
.menubar .mb[aria-expanded="true"]{background:var(--sel);color:var(--selt)}
.menubar .mb:focus-visible{outline:none;background:var(--sel);color:var(--selt)}
.menubar u{text-decoration:underline}
.menu hr.msep{border:0;border-top:1px solid var(--lo);border-bottom:1px solid var(--hi);margin:3px 2px;width:auto}
@media(pointer:fine){.menubar .mb{min-height:20px;padding:1px 8px}}
/* High Contrast Black scheme: real Win98 colours */
:root[data-theme="dark"]{--t1:#800080;--t2:#800080;--sel:#800080;--desk:#000000}
/* desktop type: MS Sans Serif-like 11px body, small bold headings */
@media(pointer:fine){body,button,.btn,input[type=text],input[type=search],textarea,select{font-size:11px}
  h1{font-size:13px}h2,h3,.bq{font-size:13px}.big,button.big,.btn.big{font-size:13px}
  .statstrip b,.statsnums b{font-size:16px}.scoreline .sq{grid-template-columns:repeat(6,22px)}.scoreline .sq span{height:22px}
  .hist .g{font-size:11px}.lb li{font-size:11px}.toolbar .brand{font-size:13px}}
.menubar .mb{gap:0}
.footer .fq{flex-basis:100%;display:flex;flex-wrap:wrap;gap:0 2px;font-size:12px}
/* Shape of the day */
.shapewell{background:var(--win);padding:6px}
.shapeimg{display:block;image-rendering:pixelated}
:root[data-theme="dark"] .shapewell{background:#FFFFFF}

/* ===== review v6: readable type, native answer states ===== */
/* body text in a real system font, crisp, no shadow; the pixel font only at its native 11px for window chrome */
body,p,li,td,label,.lbl,.hist .g,.prose,input[type=text],input[type=search],textarea,.small,.muted,small{font-family:Tahoma,Verdana,"DejaVu Sans",sans-serif}
body{font-size:14px}
h1,h2,h3,.big{font-family:Tahoma,Verdana,"DejaVu Sans",sans-serif;font-weight:700}
.titlebar,.titlebar *,.menubar .mb,.menu .mi,.status,.status *,.dlg .titlebar{font-family:"W98",Tahoma,sans-serif;font-size:11px!important;-webkit-font-smoothing:none;font-smooth:never}
button,.btn{font-family:Tahoma,Verdana,"DejaVu Sans",sans-serif;font-size:14px}
@media(pointer:fine){button,.btn{font-family:"W98",Tahoma,sans-serif;font-size:11px;-webkit-font-smoothing:none;font-smooth:never}
  body,p,li,.hist .g{font-size:13px}h1{font-size:15px}h2,h3,.bq,.big,button.big,.btn.big{font-size:14px}button.big,.btn.big{font-family:Tahoma,Verdana,sans-serif}}
button:disabled{text-shadow:none}
.bopts button:disabled{color:var(--mut)}
/* right answer = selected (navy, white text); your wrong pick = pushed in with a small cross */
.bopts button.right{outline:none;background:var(--sel);color:var(--selt)!important}
.bopts button.right .nm,.bopts button.right .lab{color:var(--selt)}
.bopts button.wrong{outline:none;box-shadow:inset 1px 1px var(--dk),inset -1px -1px var(--hi),inset 2px 2px var(--lo)}
.bopts button .mk{position:absolute;top:4px;right:4px}
.bopts.shape img.shape,.shapewell{background:#FFFFFF;padding:4px;box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo),inset -2px -2px var(--li),inset 2px 2px var(--dk)}
/* unused squares: flat, sunken */
.scoreline .sq span.cE{box-shadow:inset 1px 1px var(--lo),inset -1px -1px var(--hi)}
.scoreline .sq.small{display:flex;gap:5px;align-items:center}.scoreline .sq.small span:not(.lbl){width:18px}
.playmore .row{gap:6px}
.sharerow{grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}
.qbar .qopt{min-width:0}
/* help dialog tabs, examples, about box, games groups */
.tabs{display:flex;gap:0;margin:0 0 -2px;position:relative;z-index:1;flex-wrap:wrap}
.tab{min-width:0;min-height:30px;padding:3px 10px;font-weight:400;box-shadow:inset 1px 1px var(--hi),inset -1px 0 var(--dk),inset -2px 0 var(--lo)!important;margin-top:2px}
.tab[aria-selected="true"]{margin-top:0;padding-bottom:5px;font-weight:700;background:var(--face)}
.tabpanel{padding:10px;box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--lo);min-height:210px}
.steps{margin:0 0 10px;padding-left:22px}.steps li{margin:2px 0}
.example{display:flex;flex-direction:column;align-items:center;gap:6px;margin:6px 0}
.exboard{display:grid;grid-template-columns:repeat(3,40px);grid-template-rows:repeat(2,40px);width:120px;box-shadow:0 0 0 2px var(--win),0 0 0 3px var(--lo)}
.exboard i{background:var(--face);box-shadow:inset -2px -2px var(--lo),inset 2px 2px var(--hi)}
.exboard i.o1{background:linear-gradient(#68BFE5 0 60%,#FFFFFF 60%);box-shadow:none}.exboard i.o2{background:#68BFE5;box-shadow:none}
.exrow{display:flex;gap:8px;align-items:center;background:var(--win);padding:3px 8px;box-shadow:inset 1px 1px var(--lo),inset -1px -1px var(--hi);min-width:220px}
.exrow .exfl{width:30px;height:20px;background:linear-gradient(90deg,#002868 0 40%,#68BFE5 40%)}.exrow .exv{margin-left:auto;font-weight:700}
.btiles{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.btiles span{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi);font-size:12px}
.btiles small{font-size:11px;color:var(--mut)}
@media(max-width:420px){.btiles{grid-template-columns:1fr 1fr}}
.keys{display:flex;flex-wrap:wrap;gap:4px 12px}.key{display:inline-flex;align-items:center;gap:5px;font-size:12px}
.sqk{display:inline-block;width:14px;height:14px;box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi)}.sqk.cE{box-shadow:inset 1px 1px var(--lo),inset -1px -1px var(--hi)}
.aboutbox{max-width:34em;margin:10px auto}.aboutbox .abody{display:flex;gap:14px;padding:14px}.aboutbox .abig{image-rendering:pixelated;flex:none}
.aboutbox .abody>div{flex:1;min-width:0}.aboutbox p{margin:0 0 8px}
hr.etch{border:0;border-top:1px solid var(--lo);border-bottom:1px solid var(--hi);margin:8px 0}
.ascroll{background:var(--win);padding:8px 10px;max-height:220px;overflow:auto;font-size:12px}.ascroll ul{padding-left:18px;margin:4px 0}
.aboutbox .btns{display:flex;justify-content:flex-end;margin-top:10px}
.games.big2 .gcard{min-height:96px}.games.big2 .gcard img{width:48px;height:48px;image-rendering:pixelated}
main fieldset{margin:6px 0}
/* share preview: a sunken white text box with our own squares (no emoji in the page) */
.sharepreview{background:var(--win);color:var(--txt);padding:8px 10px;font-size:13px;line-height:1.5;box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo),inset -2px -2px var(--li),inset 2px 2px var(--dk);display:grid;gap:2px;justify-items:start;overflow-wrap:anywhere}
.sqline{display:inline-flex;gap:2px;vertical-align:-2px}.sharepreview .sqk{width:14px;height:14px}
pre{white-space:pre-wrap;overflow-wrap:anywhere}
/* Win98 combo box: arrow button inside the field, plain list with 1px black frame, compact rows, navy selection */
.combo{display:flex}
.ddbtn{width:28px;display:grid;place-items:center;color:var(--txt);padding:0}
.lb{border:1px solid #000;background:var(--win);box-shadow:none;margin-top:0}
.lb li{min-height:36px;padding:2px 8px;font-family:Tahoma,Verdana,"DejaVu Sans",sans-serif;font-size:15px;line-height:1.2}
.lb li:hover{background:var(--sel);color:var(--selt)}
@media(pointer:fine){.lb li{min-height:18px;padding:1px 4px;font-size:13px}}
.lb.full{max-height:min(320px,55vh)}
/* outlines sit on plain white (the checkerboard read as noise, Nov 2026) */
.bopts.shape img.shape,.shapewell{background:#FFFFFF}
:root[data-theme="dark"] .shapewell,:root[data-theme="dark"] .bopts.shape img.shape{background:#FFFFFF}
/* guesses as a Win98 list view (Explorer "Details"): one sunken white box, grey column headers, plain rows, navy selection */
.hist.listview{gap:0;background:var(--win);padding:2px;box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo),inset -2px -2px var(--li),inset 2px 2px var(--dk)}
.hist.listview .g{background:none;box-shadow:none;border:0;min-height:44px;padding:2px 6px}
.hist.listview .g.ok{background:var(--sel);color:var(--selt)}
.hist.listview .g.slot{min-height:44px;border:0}
.hist.listview .g.gh{min-height:0;padding:0;gap:0;background:var(--face);position:sticky;top:0}
.hist.listview .gh span{padding:2px 6px;font-size:12px;box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--lo)}
.hist.listview .gh .hc{flex:1;padding-left:72px}.hist.listview .gh .hd{width:150px;text-align:right}.hist.listview .gh .hp{width:60px;text-align:right}
@media(max-width:420px){.hist.listview .gh .hd{width:120px}.hist.listview .gh .hc{padding-left:6px}}
@media(pointer:fine){.hist.listview .g{min-height:44px}.hist.listview .gh span{font-family:"W98",Tahoma,sans-serif;font-size:11px}}
.hist.listview .gh span{text-align:left}.hist.listview .gh .hd,.hist.listview .gh .hp{text-align:right}
/* less white: guesses on the grey dialog face with etched lines between rows (as in Win98 game score dialogs) */
.hist.listview{background:var(--face)}
.hist.listview .g:not(.gh):not(:last-child){box-shadow:inset 0 -1px var(--hi),inset 0 -2px var(--lo)}
.hist.listview .g.slot{box-shadow:none!important}
.bopts img.pi{background:none!important;padding:0!important;box-shadow:none!important}
/* picture tiles: selected like an Explorer icon - picture untouched, name label in navy, tile pushed in */
.bopts.flag button.right,.bopts.shape button.right{background:var(--face);box-shadow:inset 1px 1px var(--dk),inset -1px -1px var(--hi),inset 2px 2px var(--lo)}
.bopts.flag button.right .nm,.bopts.shape button.right .nm{background:var(--sel);color:var(--selt);padding:1px 6px;outline:1px dotted var(--selt);outline-offset:-1px}
/* ===== Win98 design-lead pass ===== */
/* caption buttons _ [] x */
.titlebar .caps{display:flex;gap:0;margin-left:auto}
.titlebar .ctl{width:16px;height:14px;min-width:0;min-height:0;padding:0;display:grid;place-items:center;color:#000;background:var(--face);box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--lo),inset 2px 2px var(--li);text-decoration:none}
.titlebar .ctl:disabled{color:var(--dis)}.titlebar .cx{margin-left:2px}
@media(pointer:coarse){.titlebar .ctl{width:24px;height:20px}}
/* small icon toolbar, no second brand */
.toolbar{min-height:0;padding:2px 4px;gap:2px;justify-content:flex-start}
.toolbar .tbtn{min-width:32px;min-height:28px}
@media(pointer:coarse){.toolbar .tbtn{min-width:44px;min-height:40px}}
/* normal Windows buttons: plain weight, natural width, action rows on the right */
button.big,.btn.big{font-size:inherit!important;font-weight:400}
button.wide,.btn.wide{width:auto}
button,.btn{min-width:75px}
.btnrow,.wizbtns{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.wizbtns{border-top:1px solid var(--lo);box-shadow:0 -1px 0 var(--hi) inset;padding-top:8px;margin-top:4px}
.wizbtns button:nth-child(2){margin-right:8px}
/* headings: small, like dialog text */
h1{font-size:15px}h2,.bq{font-size:14px}.big{font-size:14px}
.bq{text-align:left;margin:0 0 4px}
fieldset.qbox{display:grid;gap:6px}
.wizhead{display:flex;align-items:center;gap:10px;padding:4px 2px 8px;border-bottom:1px solid var(--lo);box-shadow:0 1px 0 var(--hi)}
.wizhead img:first-child{image-rendering:pixelated;flex:none}.wizhead>div{flex:1}.wizhead .rb-th{flex:none}
/* progress bar (blocky, fills left to right) */
.progwrap{display:grid;gap:4px;width:min(240px,80%);margin:auto}
.progbar{display:flex;gap:2px;padding:3px;background:var(--win);height:22px}
.progbar i{flex:1;background:var(--sel);opacity:0;animation:pb 1.4s steps(1) infinite}
@keyframes pb{0%{opacity:0}10%{opacity:1}90%{opacity:1}100%{opacity:0}}
.reduce .progbar i{animation:none;opacity:1}
.flagbox .ph{background:var(--face)}
/* Explorer large icons */
.icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:4px}
.ico{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;text-decoration:none;color:var(--txt);text-align:center;min-height:84px}
.ico img{image-rendering:pixelated}.ico span{font-size:12px;line-height:1.25;padding:1px 3px}.ico small{display:block;color:var(--mut);font-size:11px}
.ico:focus-visible span,.ico:active span{background:var(--sel);color:var(--selt);outline:1px dotted var(--selt)}
.ico:focus-visible small,.ico:active small{color:var(--selt)}
/* tip of the day */
.tipbox{background:var(--win);box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo),inset -2px -2px var(--li),inset 2px 2px var(--dk);display:grid;grid-template-columns:auto 1fr;margin-bottom:10px}
.tiphead{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--lo)}
.tiphead img{image-rendering:pixelated}.tiphead b{font-size:15px}.tiptext{grid-column:1/-1;padding:12px 14px;min-height:70px}
/* see also box instead of a web footer */
.footer.seealso{display:flex;flex-wrap:wrap;gap:2px 8px;font-size:12px;padding:6px 8px;border-top:1px solid var(--lo);box-shadow:inset 0 1px var(--hi)}
.footer.seealso .sl{color:var(--mut)}.footer.seealso a{padding:0}
/* no white blocks on How to play: grey face with sunken edges */
.sharepreview{background:var(--face)}
.exrow{background:var(--face);box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo),inset -2px -2px var(--li),inset 2px 2px var(--dk);padding:4px 10px}
.exboard{box-shadow:none;padding:2px;width:124px;grid-template-columns:repeat(3,40px);background:var(--face);box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo),inset -2px -2px var(--li),inset 2px 2px var(--dk)}
.tipbox{background:var(--face)}
/* ===== game-studio polish pass ===== */
/* one chrome row under the title bar: menus left, tool icons right */
.menubar{align-items:center}.menubar .mbsp{flex:1}
.menubar .tbtn{min-width:30px;min-height:24px;padding:2px 6px;background:none;box-shadow:none}
.menubar .tbtn:hover{box-shadow:inset -1px -1px var(--lo),inset 1px 1px var(--hi)}
.menubar .tbtn:active{box-shadow:inset 1px 1px var(--lo),inset -1px -1px var(--hi)}
@media(pointer:coarse){.menubar .tbtn{min-width:44px;min-height:40px}.menubar .mb{min-height:40px}}
/* rhythm: one 8px grid */
.main{display:grid;gap:12px;padding:12px}
#daily,#shape{gap:12px!important}
.row{gap:8px}
/* header: title + date, streak LCD */
.dhead{display:flex;align-items:center;gap:10px}.dhead h1{margin:0;line-height:1.2}
.lcdbtn{min-width:0;min-height:0;padding:3px 4px 3px 8px;display:flex;align-items:center;gap:6px;font-size:11px}
.lcdlab{font-size:11px}
.lcd{display:inline-block;background:#000;color:#FF0000;font:700 20px/1 "Courier New",Courier,monospace;letter-spacing:1px;padding:2px 4px 1px;box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo);text-shadow:0 0 1px #FF0000;min-width:3ch;text-align:center}
.lcd button{font-size:12px}
/* tries left as pips */
.pips{display:inline-flex;gap:3px}.pips i{width:14px;height:14px;background:var(--sel);box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi)}
.pips i.used{background:var(--face);box-shadow:inset 1px 1px var(--lo),inset -1px -1px var(--hi)}
#dCount{align-items:center;min-height:20px}
/* result */
.hero{display:flex;gap:12px;align-items:center}.hero h2{margin:0;font-size:16px}
.scoreline .sharerow{width:100%;margin-top:6px}
.upnext .btn.def{min-width:180px}
.upnext p a{color:var(--sel)}:root[data-theme="dark"] .upnext p a{color:#FFFF00}
.cdrow{display:flex;align-items:center;gap:10px;justify-content:center}
.cdrow .lcd{font-size:18px;min-width:9ch}
.endscr{gap:12px}
/* quiz FAQ: quiet */
fieldset.faq h3{font-size:13px;margin:8px 0 2px}fieldset.faq p{margin:0;font-size:13px}
details summary.btn,details>summary{font-size:inherit}
@media(max-width:420px){.main{padding:8px 8px 12px}}
.bleft{text-align:left}
.icons{gap:2px}.ico{min-height:72px;padding:6px 2px}
#qTime.lcd{font-size:16px;min-width:5ch}
.shapewell{margin:0 auto}
/* easy-quiz answers: same native states as the bonus rounds */
.opts button.right{background:var(--sel);color:var(--selt)!important;font-weight:700}
.opts button.wrong{box-shadow:inset 1px 1px var(--dk),inset -1px -1px var(--hi),inset 2px 2px var(--lo)}
.opts button .mk{position:absolute;top:4px;right:4px}
.opts button:disabled{text-shadow:none;color:var(--mut)}
/* seven-segment LCD (Minesweeper) */
.lcd{display:inline-flex;align-items:center;gap:1px;background:#000;padding:2px 3px;min-width:0;font:inherit;text-shadow:none;box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo)}
.lcd svg.lcdd{width:13px;height:23px}.lcd svg.lcdc{width:5px;height:23px}
.cdrow .lcd svg.lcdd,#qTime svg.lcdd{width:11px;height:20px}.cdrow .lcd svg.lcdc,#qTime svg.lcdc{width:4px;height:20px}
.cdrow .lcd,#qTime.lcd{min-width:0}
.lcd{gap:2px;padding:3px 4px}
.quizscore .hero{align-items:center}.quizscore h2{font-size:18px;margin:0}
.quizscore .btnrow{margin-top:8px}
#setUi .hist.listview .g img.th{width:48px;height:32px;object-fit:contain}
#setUi .hist.listview .g{min-height:0;padding-top:3px;padding-bottom:3px}
details summary h2{font:14px Tahoma,Verdana,"DejaVu Sans",sans-serif;margin:0}
@media(pointer:fine){details summary h2{font:11px "W98",Tahoma,sans-serif;-webkit-font-smoothing:none}}
/* full pass: no stretched rows, quieter pages */
.main{align-content:start}
.prose h2{margin:16px 0 6px}
details.faq{border:0;padding:0}details.faq .faqbody{padding:4px 2px 0}
details.faq h3{font-size:13px;margin:10px 0 2px}details.faq p{margin:0;font-size:13px}
.games{gap:0;grid-template-columns:1fr;background:var(--face);box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo),inset -2px -2px var(--li),inset 2px 2px var(--dk);padding:2px}
.gcard{display:flex;gap:12px;align-items:center;padding:8px 10px;min-height:56px;color:var(--txt);text-decoration:none;box-shadow:inset 0 -1px var(--hi),inset 0 -2px var(--lo)}
.gcard:last-child{box-shadow:none}
.gcard:hover,.gcard:focus-visible{background:var(--sel);color:var(--selt);outline:0}.gcard:hover .gm,.gcard:focus-visible .gm{color:var(--selt)}
.gcard b{font:700 14px Tahoma,Verdana,"DejaVu Sans",sans-serif}.gcard small{font:13px Tahoma,Verdana,"DejaVu Sans",sans-serif}.gcard .gm{font-size:12px}
.games.big2 .gcard{min-height:64px}.games.big2 .gcard img{width:32px;height:32px}
.arch .g{text-decoration:none;color:var(--txt);display:flex;align-items:center;gap:10px}
.arch .g img{flex:none}.arch .g .n{flex:1}.arch .g .v{white-space:nowrap}
.arch .gh .hc{padding-left:6px}
.arch .g:not(.gh):hover{background:var(--sel);color:var(--selt)}.arch .g:hover .muted{color:var(--selt)}
/* slim shape tiles: the picture fills the button, thin bevel only */
.bopts.shape{gap:6px}
.bopts.shape button{min-height:0;padding:4px;gap:0}
.bopts.shape img.shape{padding:2px;box-sizing:border-box;box-shadow:inset 1px 1px var(--lo),inset -1px -1px var(--hi)}
/* new bonus rounds: map, landmark photo, emblem, summary */
.bopts.map button,.bopts.photo button,.bopts.emblem button{min-height:0;padding:4px;gap:0}
.bopts img.map,.bopts img.ph,.bopts img.em{display:block;image-rendering:pixelated;box-shadow:inset 1px 1px var(--lo),inset -1px -1px var(--hi)}
.bopts img.em{background:repeating-conic-gradient(#FFFFFF 0 25%,#C0C0C0 0 50%) 0 0/16px 16px}
.bopts.map button .nm,.bopts.photo button .nm,.bopts.emblem button .nm{margin-top:3px;font-size:13px}
.facts{display:grid;gap:0;background:var(--face)}
.facts .fr{display:grid;grid-template-columns:42% 1fr;gap:8px;padding:5px 2px;box-shadow:inset 0 -1px var(--hi),inset 0 -2px var(--lo)}
.facts .fr:last-child{box-shadow:none}.facts .fk{color:var(--mut)}.facts .fv{font-weight:700}
.btiles{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
.bopts img.em{background:var(--face)}
/* picture quizzes: shapes on white, maps/photos/emblems fill the well */
.flagbox[data-kind="shape"]{background:#FFFFFF}
.flagbox[data-kind="emblem"],.flagbox[data-kind="map"],.flagbox[data-kind="landmark"],.flagbox[data-kind="lmicon"]{background:var(--face)}
.flagbox[data-kind] img.flag{image-rendering:auto} /* hi-res sources are shown smaller than they are: smooth downscale, no jaggies */
/* landmark icons are pixel art: always shown 1:1 (320 box, or 288 with the empty margin cropped; 160px icons at exactly 2x) */
.flagbox[data-kind="lmicon"]{overflow:hidden}
.flagbox[data-kind="lmicon"] img.flag{width:320px!important;height:320px!important;left:50%!important;top:50%!important;transform:translate(-50%,-50%);position:absolute}
/* Higher or Lower */
.hlscore{display:grid;grid-template-columns:auto auto;gap:2px 6px;align-items:center;justify-items:end}
.hlq{font-size:16px;margin:0}
.hlcards{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:stretch}.hlvs{align-self:center}
.hlvs{font-weight:700;color:var(--mut)}
.hlbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}.hlbtns button{min-height:56px;font-size:16px}
/* Daily Capital / Landmark */
.capclue{display:grid;justify-items:center;gap:4px;padding:16px 8px;background:var(--win)}
.capclue b{font:700 28px Tahoma,Verdana,"DejaVu Sans",sans-serif;text-align:center;line-height:1.15}
.lmwell{margin:0 auto}.lmimg{display:block;image-rendering:pixelated}
/* Taskbar with Start (our waving flag), tray speaker and clock — Nov 2026 */
body{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
.taskbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;align-items:center;gap:4px;padding:3px 3px calc(3px + env(safe-area-inset-bottom));background:var(--face);box-shadow:inset 0 1px var(--li),inset 0 2px var(--hi)}
.taskbar .start{display:inline-flex;align-items:center;gap:4px;min-width:0;min-height:32px;padding:2px 8px 2px 4px;font-weight:700}
.taskbar .start img,.tray img{image-rendering:pixelated}
.taskbar .start[aria-expanded="true"]{box-shadow:inset 1px 1px var(--dk),inset -1px -1px var(--hi),inset 2px 2px var(--lo),inset -2px -2px var(--li);background:repeating-conic-gradient(var(--face) 0 25%,var(--hi) 0 50%) 0 0/2px 2px}
.taskbar .tbsp{flex:1}
.tray{display:flex;align-items:center;gap:6px;padding:0 8px 0 2px;min-height:30px;box-shadow:inset 1px 1px var(--lo),inset -1px -1px var(--hi)}
.tray .trb{min-width:36px;min-height:30px;padding:0;background:none;box-shadow:none;display:grid;place-items:center}
.tray .trb:focus-visible{outline:1px dotted var(--txt);outline-offset:-3px}
#clock{font:11px "W98",Tahoma,sans-serif;white-space:nowrap}
@media(pointer:coarse){.taskbar .start{min-height:36px}.tray .trb{min-width:44px;min-height:34px}}
.menu.startmenu{flex-direction:row;flex-wrap:wrap;padding-left:28px;min-width:240px;max-height:calc(100vh - 60px);overflow:auto}
.menu.startmenu>.mi,.menu.startmenu>.msep{flex:0 0 100%}
.smside{position:absolute;left:3px;top:3px;bottom:3px;width:22px;background:var(--t1);color:#C0C0C0;writing-mode:vertical-rl;transform:rotate(180deg);font:14px "W98",Tahoma,sans-serif;padding:6px 0;display:flex;align-items:center;gap:3px}
.smside b{color:#fff}
/* loading: drum + label */
.progwrap .pl{display:flex;align-items:center;gap:8px}.progwrap .drum{image-rendering:pixelated}

/* Higher or Lower, Win98 properties-dialog look */
.hlq{font:14px/1.4 Tahoma,Verdana,"DejaVu Sans",sans-serif;font-weight:400;margin:0}
.hlcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:stretch}
.hlcard{display:grid;grid-template-rows:auto auto 1fr;gap:8px;padding:10px 8px 10px;margin:0;text-align:left;background:var(--face)}
.hlcard legend{font:11px "W98",Tahoma,sans-serif}
.hlwell{justify-self:center;padding:2px;line-height:0}
.hlcard .fl{display:block;width:100%;max-width:120px;height:auto;aspect-ratio:3/2;image-rendering:pixelated}
.hlname{font:700 13px Tahoma,Verdana,"DejaVu Sans",sans-serif;text-align:center;align-self:start}
.hlrow{display:grid;gap:3px;align-self:end}
.hlcard .hlv.field{font:13px Tahoma,Verdana,"DejaVu Sans",sans-serif;min-height:22px;padding:2px 5px;background:var(--win);text-align:right;white-space:nowrap;box-shadow:inset 1px 1px var(--lo),inset -1px -1px var(--hi),inset 2px 2px var(--dk),inset -2px -2px var(--li)}
.hlcard .hlv.unk{background:var(--face);color:var(--dis);text-align:center}
.hlbtns button{min-height:48px;font-size:14px}

/* =====================================================================
   DESIGN SYSTEM v2 (Nov 2026) — built on the original Windows specs:
   MS layout metrics in dialog units (8pt MS Sans Serif: 1 hDLU = 1.5px, 1 vDLU = 1.625px),
   Wine non-client metrics (caption 18, menu 18, scrollbar 16, border 1), 98.css bevels.
   Touch screens: every size x ~1.5-1.9 so targets reach 44px; same proportions.
   One family + one size per pointer type. One shade per hue.
   ===================================================================== */
:root{
  --ff:"W98",Tahoma,sans-serif;--fs:11px;--lh:14px;     /* 8pt system font, 8 DLU text line */
  --u2:3px;--u3:5px;--u4:6px;--u7:11px;                 /* 2,3,4,7 DLU */
  --gl:14px;--gt:18px;                                  /* group box: 9 DLU left inset, 11 DLU top to first control */
  --btn:23px;--btnw:75px;--fld:23px;                    /* button 50x14 DLU, text box 14 DLU */
  --cap:18px;--menu:18px;--tool:23px;--tb:22px;--stat:20px;--task:28px;--start:22px}
@media(pointer:coarse){:root{
  --ff:Verdana,Tahoma,Arial,sans-serif;--fs:16px;--lh:22px;
  --u2:5px;--u3:8px;--u4:10px;--u7:16px;--gl:16px;--gt:26px;
  --btn:44px;--btnw:96px;--fld:44px;
  --cap:34px;--menu:40px;--tool:44px;--tb:44px;--stat:32px;--task:48px;--start:40px}}
/* type: one family, one size; bold only where Windows used it */
body,body *{font-family:var(--ff)!important;font-size:var(--fs)!important;line-height:var(--lh)}
body *:not(.lcd):not(.lcd *){font-weight:400}
b,strong,th,h2,h3,.titlebar .ttx,.hlname,.qbar .grow,.v b{font-weight:700!important}
@media(pointer:fine){body,body *{-webkit-font-smoothing:none;font-smooth:never}}
input,textarea,select{font-size:max(16px,var(--fs))!important}
@media(pointer:fine){input,textarea,select{font-size:var(--fs)!important}}
/* no in-client headline: the page name lives in the title bar */
main h1{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h2,h3{margin:0}
/* window chrome on the Wine metrics */
.titlebar{min-height:var(--cap);padding:2px 2px 2px 3px;gap:3px;background:var(--t1)}
.titlebar .tt{gap:3px}
.titlebar .ctl{width:16px;height:14px}
@media(pointer:coarse){.titlebar .ctl{width:30px;height:26px}.titlebar .ctl svg{transform:scale(1.6)}.titlebar .tt img{width:16px;height:16px}}
.menubar{min-height:var(--menu);padding:0 1px;align-items:stretch}
.menubar .mb{min-height:var(--menu)!important;padding:0 6px;display:flex;align-items:center}
@media(pointer:coarse){.menubar .mb{padding:0 12px}}
.toolbar98{display:flex;align-items:center;gap:0;min-height:var(--tool);padding:1px 2px;border-top:1px solid var(--hi);border-bottom:1px solid var(--lo);box-shadow:0 1px var(--hi)}
.toolbar98 .tbtn{min-width:var(--tb);min-height:calc(var(--tool) - 2px);padding:0;box-shadow:none;background:none}
.toolbar98 .tbtn:hover{box-shadow:inset -1px -1px var(--lo),inset 1px 1px var(--hi)}
.toolbar98 .tbtn:active{box-shadow:inset 1px 1px var(--lo),inset -1px -1px var(--hi)}
.toolbar98 .tbtn svg{width:16px;height:16px}
@media(pointer:coarse){.toolbar98 .tbtn svg{width:24px;height:24px}}
.status>span{min-height:var(--stat);padding:0 var(--u2);display:flex;align-items:center;box-shadow:inset -1px -1px var(--li),inset 1px 1px var(--lo)}
/* client area: 7 DLU margin, 7 DLU between unrelated groups */
.main{padding:var(--u7);gap:var(--u7)}
@media(max-width:420px){.main{padding:var(--u7)}}
/* controls */
button,.btn{min-height:var(--btn);min-width:var(--btnw);padding:0 12px;font-weight:400!important}
button:active:not(:disabled),.btn:active{padding:1px 11px 0 13px}
button:disabled{color:var(--lo);text-shadow:1px 1px var(--hi)}
.tbtn,.menubar .mb,.menu .mi,.ctl,.trb,button.inl,button.link,.ddbtn,.lcd,.cell{min-width:0}
input[type=text],input[type=search]{min-height:var(--fld);padding:0 var(--u2)}
button.big,.btn.big{min-height:var(--btn)}
@media(pointer:coarse){button.big,.btn.big,.opts button,.bopts button,.hlbtns button{min-height:var(--btn)}}
fieldset{padding:calc(var(--gt) - 8px) var(--gl) var(--u7);margin:0}
legend{padding:0 2px}
.chk{min-height:calc(var(--lh) + 2px);gap:var(--u4)}
@media(pointer:coarse){.chk{min-height:44px}}
/* dialogs: 7 DLU margins; buttons bottom-right, 4 DLU apart; message boxes centre them */
.dlg .body{padding:var(--u7)}
.dlg .btns{justify-content:flex-end;gap:var(--u4);padding:0 var(--u7) var(--u7)}
.dlg[data-name="confirm"] .btns,.dlg[data-name="over"] .btns,.dlg[data-name="post"] .btns{justify-content:center}
/* tabs (98.css): no icons, selected tab not bold */
.tab img,.tab .pi{display:none}
.tab[aria-selected="true"]{font-weight:400!important}
/* answers: right = check mark on the normal face; wrong pick = pushed in with a red cross */
.opts button.right,.bopts button.right{background:var(--face)!important;color:var(--txt)!important;outline:none}
.bopts button.right .nm,.bopts button.right .lab{color:var(--txt)!important}
.opts button:disabled,.bopts button:disabled{color:var(--txt)}
.opts button.right:disabled,.bopts button.right:disabled{text-shadow:none}
.opts button .mk,.bopts button .mk{position:absolute;top:var(--u2);right:var(--u2);line-height:0}
/* taskbar on the Win98 shell metrics */
body{padding-bottom:calc(var(--task) + env(safe-area-inset-bottom))}
.taskbar{min-height:var(--task);padding:2px 2px calc(2px + env(safe-area-inset-bottom));gap:var(--u2)}
.taskbar .start{min-height:var(--start)!important;padding:0 4px 0 2px;gap:3px}
.taskbar .start b,.taskbar .start{font-weight:700!important}
.tray{min-height:var(--start);padding:0 var(--u4) 0 var(--u2)}
.tray .trb{min-height:calc(var(--start) - 2px)}
@media(pointer:fine){.tray .trb{min-width:20px}}
/* share/score squares: no orange (one shade per hue): "close" squares use yellow */
.cO{background:repeating-conic-gradient(#FFFF00 0 25%,#C0C0C0 0 50%) 0 0/2px 2px!important}
/* credits page: long file names wrap instead of widening the page */
.prose,.prose *{overflow-wrap:anywhere}
/* Win98 High Contrast Black for dark mode: black, white, two greys, navy selection, yellow links */
:root[data-theme="dark"]{--desk:#000000;--face:#000000;--hi:#FFFFFF;--lo:#808080;--dk:#FFFFFF;--li:#C0C0C0;--sel:#000080;--selt:#FFFFFF;--txt:#FFFFFF;--win:#000000;--dis:#808080;--mut:#C0C0C0;--t1:#000080;--t2:#000080;--ok:#008000;--bad:#FF0000;--chk1:#000000;--chk2:#000000}
:root[data-theme="dark"] a,:root[data-theme="dark"] button.inl,:root[data-theme="dark"] .footer a{color:#FFFF00}
:root[data-theme="dark"] button:disabled{color:var(--lo);text-shadow:none}
.fbline{display:flex;align-items:flex-start;gap:var(--u4);margin:0}.fbline .pi{flex:none;margin-top:calc((var(--lh) - 16px)/2)}
/* status values are plain text; the question line is a normal label */
.qbar .grow{font-weight:400!important}
.hlq,.bq{font-weight:400!important}
details>summary,details summary *{font-weight:400!important}
/* every game header: date at left, LCD counters at right in a sunken panel (Minesweeper), never inside a button */
.lcdbtn{box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo)!important;background:var(--face)!important;padding:var(--u2) var(--u4)!important;min-height:0!important;gap:var(--u4)}
.dhead{align-items:center;gap:var(--u7)}
/* Explorer Details listview (games page) */
.lv{background:var(--win);box-shadow:inset -1px -1px var(--hi),inset 1px 1px var(--lo),inset -2px -2px var(--li),inset 2px 2px var(--dk);padding:2px;display:grid}
.lvh,.lvr{display:grid;grid-template-columns:minmax(150px,1.1fr) 2.4fr minmax(110px,.9fr);align-items:center}
.lvh span{background:var(--face);padding:0 var(--u3);min-height:calc(var(--lh) + 4px);display:flex;align-items:center;box-shadow:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--lo)}
.lvr{color:var(--txt);text-decoration:none;min-height:calc(var(--lh) + 4px)}
.lvr>span{padding:1px var(--u3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvr .c1{display:flex;align-items:center;gap:var(--u3)}.lvr .c1 img{width:16px;height:16px;image-rendering:pixelated;flex:none}
.lvr:hover .c1,.lvr:focus-visible .c1{background:var(--sel);color:var(--selt);outline:1px dotted var(--txt);outline-offset:-1px}
.lvr:focus-visible{outline:0}
@media(pointer:coarse){
  .lvh{display:none}
  .lvr{grid-template-columns:1fr;padding:var(--u3) 0;min-height:44px;border-bottom:1px solid var(--li)}
  .lvr>span{white-space:normal}
  .lvr .c1 img{width:32px;height:32px}
  .lvr .c2{color:var(--mut);padding-left:calc(32px + var(--u3) * 2)}
  .lvr .c3{display:none}}
.lv.arch2 .lvh,.lv.arch2 .lvr{grid-template-columns:1.2fr 1.2fr 1fr}
@media(pointer:coarse){.lv.arch2 .lvh{display:grid}.lv.arch2 .lvr{grid-template-columns:1.2fr 1.1fr 1fr;padding:0;border-bottom:0}.lv.arch2 .lvr>span{white-space:nowrap;padding-left:var(--u3)}.lv.arch2 .lvr .c3{display:block}.lv.arch2 .lvr .c1 img{width:16px;height:16px}.lv.arch2 .lvr .c2{color:var(--txt)}}

/* landmarks quiz list: icon + landmark name, country underneath */
.flaglist.lmlist{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.flaglist.lmlist img{width:48px;height:48px;image-rendering:auto;background:var(--face)}
.flaglist.lmlist span{display:flex;flex-direction:column;line-height:1.2}
.flaglist.lmlist small{color:var(--muted,#404040)}

/* Nov 2026: emblems 480px, shapes 480px, maps 800px are all downscaled on screen */
.bopts img.em,.bopts img.map,.bopts img.shape,.shapewell img{image-rendering:auto}