html{-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%}
/* Layout and look: a private viewing room at night. The canvas hangs in a gilt frame with a brass plaque;
   the wallet sits in the header; one Paint card and one tabbed card on the right. Single dark look by choice. */
:root{
  --bg:#08160f; --panel:#0e2219; --panel2:#132c21; --line:#24493a; --ink:#f1ead6; --muted:#93ab9c;
  --gold:#dcb95f; --gold-hi:#f4e1a1; --gold-lo:#a47f2b; --on-gold:#1c1403;
  --envy:#46d395; --danger:#f08a76;
  --display:"Bodoni Moda","Didot","Times New Roman",serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:radial-gradient(900px 520px at 28% -8%,rgba(70,211,149,.13),transparent 62%),radial-gradient(700px 500px at 100% 0,rgba(220,185,95,.07),transparent 60%),var(--bg);
  background-color:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45;padding-inline:16px;padding-block:22px 44px}
.wrap{max-width:1080px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;border-bottom:1px solid var(--line);padding-bottom:14px}
.brand{display:flex;flex-direction:column;gap:4px;min-width:0}
h1{font-family:var(--display);font-weight:500;font-size:clamp(34px,5vw,46px);letter-spacing:-.015em;margin:0;line-height:.95}
h1 i{color:var(--gold)}
.tag{font-family:var(--display);font-style:italic;font-size:16px;color:var(--muted);margin:0}
.note{color:var(--muted);font-size:12.5px;margin:0}
.k,.label{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}
.label{color:var(--gold)}
.purse{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px}
.pill{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--panel);padding:7px 13px;border-radius:999px}
.pill b{font-family:var(--mono);font-weight:500;font-size:18px;font-variant-numeric:tabular-nums;line-height:1}
.coin{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--gold-hi),var(--gold) 55%,var(--gold-lo));box-shadow:0 0 0 1px var(--gold-lo)}
.gem{width:10px;height:10px;transform:rotate(45deg);background:linear-gradient(135deg,#a9f3d0,var(--envy) 55%,#17865a);margin-inline:2px}
.gold{color:var(--gold)} .envy{color:var(--envy)}
main{display:grid;grid-template-columns:minmax(0,1fr) 350px;grid-template-rows:auto 1fr;grid-template-areas:"canvas side" "below side";gap:16px 26px;align-items:start}
.canvasCol{grid-area:canvas} .side{grid-area:side} .belowCol{grid-area:below}
@media (max-width:880px){main{grid-template-columns:minmax(0,1fr);grid-template-areas:"canvas" "side" "below"}}
.canvasCol,.side,.belowCol{display:flex;flex-direction:column;gap:12px;min-width:0}
.row{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.bar{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;max-width:640px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{border:0;background:var(--panel);padding:6px 14px;font-size:13px;cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"],.tog[aria-pressed="true"]{background:var(--gold);color:var(--on-gold);border-color:var(--gold);font-weight:600}
.tog{border-radius:999px!important}
.cd{margin-left:auto;font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--muted)}
.cd.ok{color:var(--envy)}
.chip{display:inline-flex;align-items:center;gap:10px;font-size:13px;border:1px solid var(--gold-lo);background:var(--panel);padding:4px 6px 4px 12px;border-radius:999px;align-self:flex-start}
.legend{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--muted);max-width:640px}
.legend i{flex:1;height:8px;border:1px solid var(--line);border-radius:2px}
/* The gilt frame. */
.stage{overflow:auto;max-width:640px;max-height:82vh;padding:12px;background:#050d09;
  border:10px solid var(--gold);border-image:linear-gradient(135deg,#f4e1a1,#b88a2c 28%,#f8ebb5 50%,#9a7323 72%,#e6c668) 1;
  box-shadow:0 0 0 1px #040a07,inset 0 0 0 1px #040a07,0 26px 60px rgba(0,0,0,.55)}
.board{position:relative;aspect-ratio:1;width:100%;cursor:crosshair;outline-offset:3px;overflow:hidden}
.board canvas.tpl{position:absolute;pointer-events:none;width:auto;height:auto}
.board:focus-visible{outline:2px solid var(--gold-hi)}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
/* Selection frame: drawn inside the selected pixel only, so neighbours stay visible.
   Its border fills clockwise as the cooldown runs down. */
.mark{position:absolute;width:1%;height:1%;padding:max(1px,0.24%);pointer-events:none;
  background:conic-gradient(#fff calc(var(--p,100)*1%),#2a2a2a 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* A brief ring when the selection moves, so the pixel is easy to find. It can be switched off under You. */
.ping{position:absolute;width:1%;height:1%;pointer-events:none;opacity:0;border-radius:50%;box-shadow:0 0 0 1px #fff,0 0 0 2px #000}
.ping.pulse{animation:ping .55s ease-out}
@keyframes ping{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(7)}}
@media (prefers-reduced-motion:reduce){.ping.pulse{animation:none}}
.plaque{align-self:center;max-width:min(640px,100%);text-align:center;padding:7px 18px;border-radius:2px;color:var(--on-gold);
  background:linear-gradient(180deg,#ecd38a,#c6a04a);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(0,0,0,.25),0 6px 16px rgba(0,0,0,.4)}
.canvasCol .plaque{margin-inline:auto}
@media (min-width:881px){.canvasCol .plaque{margin-inline:0;align-self:flex-start;margin-left:max(0px,calc((min(640px,100%) - 100%)/2))}}
.plaque b{display:block;font-family:var(--display);font-weight:500;font-size:16px;line-height:1.2}
.plaque span{font-size:11.5px;letter-spacing:.04em}
.stats{font-family:var(--mono);font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;max-width:640px}
.stats b{color:var(--ink);font-weight:500}
.card{border:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel));border-radius:4px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0;box-shadow:0 14px 34px rgba(0,0,0,.28)}
.card.flush{padding:0;gap:0;overflow:hidden}
.pane{padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.placard h2{font-family:var(--display);font-weight:500;font-size:26px;margin:2px 0 2px;line-height:1.1}
.placard p{margin:0;color:var(--muted);font-size:13.5px}
.placard .price{font-family:var(--mono);color:var(--gold-hi);font-size:13.5px;margin-top:6px}
.swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.sw{aspect-ratio:1;border:1px solid rgba(241,234,214,.22);padding:0;cursor:pointer;border-radius:2px}
.sw[aria-pressed="true"]{outline:2px solid var(--gold-hi);outline-offset:2px}
.custom{display:flex;gap:8px;align-items:center;margin-top:8px}
.custom input[type=color]{width:40px;height:32px;padding:0;border:1px solid var(--line);background:var(--bg);border-radius:3px;cursor:pointer}
input[type=text],input[type=password]{font:inherit;font-size:13.5px;padding:7px 9px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:3px;min-width:0}
input::placeholder{color:#6f8779}
input[type=number]{font:inherit;font-family:var(--mono);font-size:13px;padding:6px 8px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:3px;width:100%;min-width:0}
input[type=range]{width:100%;accent-color:var(--gold);display:block;margin-top:4px}
.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fields label{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--muted)}
.custom input[type=text]{flex:1;font-family:var(--mono);font-size:13px}
input[aria-invalid="true"]{border-color:var(--danger)}
input[type=checkbox]{accent-color:var(--gold)}
button{font:inherit;color:inherit}
button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
.go{width:100%;padding:13px;border:0;background:linear-gradient(180deg,#f2dc93,#c9a246);color:var(--on-gold);font-weight:600;cursor:pointer;border-radius:3px;
  font-variant-numeric:tabular-nums;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 18px rgba(0,0,0,.35)}
.go:hover:not(:disabled){background:linear-gradient(180deg,#f8e7ad,#d4ae54)}
.go:disabled{background:transparent;color:var(--muted);border:1px dashed var(--line);cursor:not-allowed;box-shadow:none}
.btn{padding:6px 11px;border:1px solid var(--line);background:var(--panel);cursor:pointer;border-radius:3px;font-size:13px}
.card .btn{background:var(--bg)}
.btn:hover:not(:disabled){border-color:var(--gold-lo)}
.btn:disabled{color:var(--muted);cursor:not-allowed}
.btn.warn{color:var(--danger)}
.btn.solid{background:linear-gradient(180deg,#f2dc93,#c9a246);color:var(--on-gold);border-color:var(--gold-lo);font-weight:600}
.btn.solid:disabled{background:transparent;color:var(--muted);border:1px dashed var(--line)}
.btn.buy{border-color:var(--gold-lo);color:var(--gold-hi);border-radius:999px;padding-inline:14px}
.packs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.packs .btn{text-align:left;display:flex;justify-content:space-between;gap:6px}
.packs span{font-family:var(--mono);color:var(--muted);font-size:12px}
label.chk{display:flex;gap:8px;align-items:center;font-size:13.5px;cursor:pointer}
select{font:inherit;font-size:13px;padding:5px 6px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:3px}
.log{list-style:none;margin:0;padding:0;font-size:13px;color:var(--muted);display:flex;flex-direction:column;min-height:6.6em}
.log li{overflow:hidden;padding-block:2px}
.log li:first-child{color:var(--ink)}
.log li.in{animation:bubble .45s cubic-bezier(.2,.8,.2,1)}
@keyframes bubble{from{opacity:0;max-height:0;padding-block:0;transform:translateY(-8px) scale(.96)}to{opacity:1;max-height:4.5em;transform:none}}
@media (prefers-reduced-motion:reduce){.log li.in{animation:none}}
.tabs{display:flex;border-bottom:1px solid var(--line);background:var(--bg)}
.tabs button{flex:1 1 auto;border:0;background:transparent;padding:11px 6px;font-size:13px;font-weight:500;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent}
.tabs button+button{border-left:1px solid var(--line)}
.tabs button[aria-selected="true"]{background:var(--panel2);color:var(--ink);border-bottom-color:var(--gold)}
.subtabs{display:flex;flex-wrap:wrap;gap:6px}
.subtabs button{border:1px solid var(--line);background:var(--bg);padding:4px 10px;font-size:12.5px;cursor:pointer;border-radius:999px;white-space:nowrap}
.subtabs button[aria-selected="true"]{background:var(--gold);color:var(--on-gold);border-color:var(--gold);font-weight:600}
.lb{list-style:none;margin:0;padding:0;min-height:9em}
.lb li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:6px;align-items:baseline;padding:5px 0;font-size:13.5px;border-top:1px solid var(--line)}
.lb li:first-child{border-top:0}
.lb li:first-child .who,.lb li:first-child .val{color:var(--gold-hi)}
.lb .rk{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:center}
.lb .who{border:0;background:none;padding:0;text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .who:hover{text-decoration:underline;text-underline-offset:3px}
.lb .who[aria-pressed="true"]{font-weight:600;color:var(--envy)!important}
.lb .who small{color:var(--muted);font-size:12px;font-weight:400}
.lb .val{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums}
.lb .none{display:block;color:var(--muted);padding:6px 0;border:0}
.lb li.you{border-top:1px solid var(--gold-lo);margin:6px -8px 0;padding:7px 8px;background:rgba(220,185,95,.09);border-radius:0 0 3px 3px}
.lb li.you .who,.lb li.you .val{color:var(--ink)}
.lb span.who{cursor:default;color:var(--muted)!important}
.lb span.who:hover{text-decoration:none}
.glist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.glist li{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:13.5px}
.glist .gn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.glist small,.small{color:var(--muted);font-size:12.5px}
.small{margin:0}
.err{color:var(--danger);font-size:12.5px;margin:0}
.rule{border:0;border-top:1px solid var(--line);margin:4px 0;width:100%}
.modal{position:fixed;inset:0;z-index:20;background:rgba(3,9,6,.8);display:grid;place-items:start center;overflow:auto;padding:24px 16px}
.sheet{width:100%;max-width:400px;margin-block:auto;border:1px solid var(--gold-lo);background:linear-gradient(180deg,var(--panel2),var(--panel));border-radius:4px;padding:20px;display:flex;flex-direction:column;gap:12px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.sheet.wide{max-width:640px} .sheet.stream{max-width:1040px}
.sheet h2{font-family:var(--display);font-weight:500;font-size:26px;line-height:1.1;margin:0}
.vstage{max-width:440px;width:100%;margin:0 auto;max-height:none;padding:8px;border-width:8px}
#vw{height:auto;aspect-ratio:1}
#sv{height:auto;aspect-ratio:16/9;image-rendering:auto;border:1px solid var(--line);background:#050d09}
.awards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:13.5px;color:var(--muted)}
.awards b{color:var(--gold-hi);font-weight:500}
.toast{position:fixed;z-index:30;top:14px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);padding:10px 18px;border-radius:999px;color:var(--on-gold);font-weight:600;font-size:13.5px;
  background:linear-gradient(180deg,#f2dc93,#c9a246);box-shadow:0 14px 36px rgba(0,0,0,.55);animation:drop .35s ease-out}
@keyframes drop{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}
.hall{border-top:1px solid var(--line);padding-top:18px;display:flex;flex-direction:column;gap:16px}
.counters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:760px){.counters{grid-template-columns:minmax(0,1fr)}}
.counters div{border:1px solid var(--line);background:var(--panel);border-radius:4px;padding:14px 16px;display:flex;flex-direction:column;gap:2px;min-width:0}
.counters b{font-family:var(--display);font-weight:500;font-size:28px;line-height:1.15;color:var(--gold-hi);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.counters small{color:var(--muted);font-size:12.5px}
.frames{display:flex;flex-wrap:wrap;gap:20px}
.fr{border:0;background:none;padding:0;cursor:pointer;text-align:left;width:168px;max-width:100%;display:flex;flex-direction:column;gap:6px}
.fr canvas{height:auto;aspect-ratio:1;border:7px solid var(--gold);border-image:linear-gradient(135deg,#f4e1a1,#b88a2c 28%,#f8ebb5 50%,#9a7323 72%,#e6c668) 1;box-shadow:0 12px 26px rgba(0,0,0,.45);margin-bottom:4px}
.fr:hover canvas{box-shadow:0 12px 26px rgba(0,0,0,.45),0 0 0 2px var(--gold-hi)}
.fr b{font-family:var(--display);font-weight:500;font-size:17px;line-height:1.2}
.fr small{color:var(--muted);font-size:12.5px}
.prov{border-top:1px solid var(--line);margin-top:10px;padding-top:8px}
.prov summary{cursor:pointer;font-size:12.5px;color:var(--muted)}
.prov ol{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.prov li{display:flex;gap:8px;align-items:center}
.prov li:first-child{color:var(--ink)}
.prov li i{width:10px;height:10px;flex:none;border:1px solid rgba(241,234,214,.3)}
.prov input{width:100%;margin-top:6px}
details.test{border-top:1px solid var(--line);padding-top:12px}
details.test summary{cursor:pointer;font-size:13px;color:var(--muted)}
details.test .row{margin-top:10px}

a{color:var(--gold-hi)}
a.btn{text-decoration:none;display:inline-block;color:var(--ink)}
a.btn.buy{color:var(--gold-hi)}
.agrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:12px}
@media (max-width:980px){.agrid{grid-template-columns:minmax(0,1fr)}}
.agrid section{display:flex;flex-direction:column;gap:10px;min-width:0}
.agrid .row{margin-top:0}
.arow{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:flex-end;padding:8px 0;border-top:1px solid var(--line);color:var(--ink)}
.arow b{font-weight:600}
.arow small{color:var(--muted);flex:1 1 100%;overflow-wrap:anywhere}
.arow label{display:flex;flex-direction:column;gap:2px;font-size:11.5px;color:var(--muted);width:84px}
.foot{display:flex;flex-wrap:wrap;gap:6px 16px;border-top:1px solid var(--line);padding-top:14px;color:var(--muted);font-size:13px}

.linkish{border:0;background:none;padding:0;font:inherit;color:var(--gold-hi);text-decoration:underline;text-decoration-color:rgba(244,225,161,.4);text-underline-offset:3px;cursor:pointer}
.linkish:hover{text-decoration-color:var(--gold-hi)}
.mchip{display:none}
.board{touch-action:manipulation}
/* Phones: a compact header, a slimmer frame, and the paint card as a bar along the bottom of the screen. */
@media (max-width:880px){
  body{padding-bottom:calc(132px + env(safe-area-inset-bottom,0px))}
  header{align-items:center;padding-bottom:10px}
  h1{font-size:30px}
  .tag{display:none}
  .pill{padding:5px 10px}
  .pill .k{display:none}
  .stage{padding:4px;border-width:6px;max-height:min(100vw,62vh)}
  .bar{gap:6px 8px}
  .bar .k{display:none}
  .cd{display:none}
  body{padding-top:12px}
  .wrap{gap:12px}
  h1{font-size:28px}
  header{gap:8px 12px}
  .pill b{font-size:16px}
  .note{font-size:12px}
  .seg button,.tog{padding:6px 10px!important;font-size:12.5px}
  .bar label{font-size:12.5px!important}
  #paint{position:fixed;left:0;right:0;bottom:0;z-index:15;border-radius:14px 14px 0 0;border-width:1px 0 0;
    padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px));gap:8px 12px;max-height:78vh;overflow:auto;
    display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"chip place" "go go" "colors colors" "quick quick";
    box-shadow:0 -14px 34px rgba(0,0,0,.55)}
  #paint .mchip{grid-area:chip;display:flex;align-items:center;gap:8px;align-self:center;border:1px solid var(--line);background:var(--bg);
    border-radius:999px;padding:5px 12px 5px 5px;font-size:13px;cursor:pointer;min-height:40px}
  #paint .mchip i{width:28px;height:28px;border-radius:50%;border:1px solid rgba(241,234,214,.35)}
  #paint[class~=open] .mchip{border-color:var(--gold)}
  #paint .placard{grid-area:place;min-width:0;align-self:center}
  #paint .placard .label,#paint #pState,#paint .prov,#paint .colors,#paint label.chk{display:none}
  #paint .placard h2{font-size:18px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #paint .placard .price{margin:2px 0 0;font-size:12.5px}
  #paint .go{grid-area:go;padding:13px}
  #paint .colors{grid-area:colors}
  #paint label.chk{grid-area:quick}
  #paint.open .colors,#paint.open .prov,#paint.open #pState{display:block}
  #paint.open label.chk{display:flex}
  .swatches{gap:7px}
  .sw{border-radius:4px}
}

.navl{display:inline-flex;flex-wrap:wrap;gap:4px 14px;margin-left:14px}
.under{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;max-width:640px}
.under .stats{flex:1 1 220px}
.actcard{gap:6px}
.actcard .log{min-height:4.6em}
.sheet.hallsheet{max-width:1000px}
.sheet.adminsheet{max-width:1180px}
.tourchip{position:fixed;left:16px;bottom:16px;z-index:12;display:flex;gap:10px;align-items:center;padding:8px 8px 8px 14px;border:1px solid var(--gold-lo);border-radius:999px;background:var(--panel2);font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.tourchip .x{border:0;background:none;color:var(--muted);font-size:20px;cursor:pointer;line-height:1;padding:0 6px}
.tour{position:fixed;inset:0;z-index:25}
.tring{position:fixed;border-radius:8px;box-shadow:0 0 0 2px var(--gold-hi),0 0 0 9999px rgba(3,9,6,.64);transition:left .25s ease,top .25s ease,width .25s ease,height .25s ease;pointer-events:none}
.tcard{position:fixed;width:min(320px,calc(100vw - 24px));background:var(--panel2);border:1px solid var(--gold-lo);border-radius:6px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;box-shadow:0 18px 50px rgba(0,0,0,.6);font-size:14.5px}
.tcard p{margin:0}
.btn:disabled{opacity:.5}
@media (prefers-reduced-motion:reduce){.tring{transition:none}}
@media (max-width:880px){
  .tourchip{bottom:calc(140px + env(safe-area-inset-bottom,0px));left:12px}
  .navl{margin-left:0;display:flex;margin-top:4px}
}
/* Desktop: everything fits in one window, so the page itself never scrolls. */
/* Desktop: the whole page fits one window. Three columns: paint + activity | canvas | leaderboard tabs.
   Only the inner lists scroll; the cards never shrink to strips. */
@media (min-width:881px) and (min-height:620px){
  html,body{height:100%}
  body{overflow:hidden;padding-block:14px}
  .wrap{height:100%;max-width:1500px;gap:12px}
  header{padding-bottom:10px}
  h1{font-size:34px}
  header{align-items:center}
  .brand{flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:2px 16px}
  main{flex:1 1 auto;min-height:0;grid-template-columns:minmax(270px,300px) minmax(0,1fr) minmax(290px,340px);
    grid-template-rows:auto minmax(0,1fr);grid-template-areas:"paint canvas board" "act canvas board";align-items:stretch;gap:12px 22px}
  .side{display:contents}
  #paint{grid-area:paint;align-self:start}
  .actcard{grid-area:act;min-height:0;overflow:hidden}
  .actcard .log{flex:1 1 auto;min-height:0;overflow-y:auto}
  .side>.card.flush{grid-area:board;min-height:0;display:flex;flex-direction:column}
  .side>.card.flush>.tabs{flex:none}
  .side>.card.flush>.pane{flex:1 1 auto;min-height:0;overflow-y:auto}
  .canvasCol{grid-area:canvas;min-height:0;gap:10px;align-items:center}
  .canvasCol>*{min-width:var(--sz,0);max-width:100%;box-sizing:border-box}
  .canvasCol>.bar{justify-content:space-between}
  .canvasCol>.under{justify-content:center}
  .canvasCol>.under .stats{flex:none}
  .canvasCol .plaque{margin:0}
  .stage{max-width:none;max-height:none;flex:none}
  .bar,.legend,.under{max-width:none}
  .actcard .log,.side>.card.flush>.pane{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .card{box-shadow:none}
  .placard h2{font-size:22px}
}

/* ---- switches: every on/off setting is a gold toggle, not a bare checkbox ---- */
label.chk input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:34px;height:20px;margin:0;border-radius:999px;
  background:var(--bg);border:1px solid var(--line);cursor:pointer;transition:background .18s,border-color .18s}
label.chk input[type=checkbox]::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:transform .18s cubic-bezier(.3,.7,.3,1),background .18s}
label.chk input[type=checkbox]:checked{background:linear-gradient(180deg,#f2dc93,#c9a246);border-color:var(--gold-lo)}
label.chk input[type=checkbox]:checked::after{transform:translateX(14px);background:var(--on-gold)}
label.chk:hover input[type=checkbox]:not(:checked){border-color:var(--gold-lo)}
@media (prefers-reduced-motion:reduce){label.chk input[type=checkbox],label.chk input[type=checkbox]::after{transition:none}}
/* Quick place: a small panel with an icon, a title and the switch on the right */
label.quickp{gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:var(--bg);transition:border-color .18s,background .18s}
label.quickp:hover{border-color:var(--gold-lo)}
label.quickp:has(input:checked){border-color:var(--gold-lo);background:linear-gradient(90deg,rgba(220,185,95,.12),transparent 70%),var(--bg)}
.quickp .qt{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.quickp .qt b{font-weight:600;font-size:13.5px;color:var(--ink)}
.quickp .qt small{font-size:12px;color:var(--muted)}
.bolt{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);transition:color .18s,border-color .18s}
.bolt::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 2 4 14h6.5L9 22l11-13h-7z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 2 4 14h6.5L9 22l11-13h-7z'/%3E%3C/svg%3E") center/contain no-repeat}
label.quickp:has(input:checked) .bolt{color:var(--gold-hi);border-color:var(--gold-lo)}

/* ---- locks: members-only features stay visible but blurred, with a way in ---- */
.lki{display:inline-block;flex:none;width:12px;height:12px;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1.5A1.5 1.5 0 0 1 20 11.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 20.5v-9A1.5 1.5 0 0 1 5.5 10zm2.5 0h5V7a2.5 2.5 0 0 0-5 0z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1.5A1.5 1.5 0 0 1 20 11.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 20.5v-9A1.5 1.5 0 0 1 5.5 10zm2.5 0h5V7a2.5 2.5 0 0 0-5 0z'/%3E%3C/svg%3E") center/contain no-repeat}
.tabs button.lk::after,.btn.lk::after{content:"";display:inline-block;width:10px;height:10px;margin-left:6px;vertical-align:-1px;background:currentColor;opacity:.8;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1.5A1.5 1.5 0 0 1 20 11.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 20.5v-9A1.5 1.5 0 0 1 5.5 10zm2.5 0h5V7a2.5 2.5 0 0 0-5 0z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1.5A1.5 1.5 0 0 1 20 11.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 20.5v-9A1.5 1.5 0 0 1 5.5 10zm2.5 0h5V7a2.5 2.5 0 0 0-5 0z'/%3E%3C/svg%3E") center/contain no-repeat}
.lockv{display:none}
.pane.locked{position:relative;overflow:hidden!important;min-height:300px}
.pane.locked>:not(.lockv){filter:blur(3px);opacity:.35;pointer-events:none;user-select:none}
.pane.locked>.lockv{display:flex;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;padding:56px 28px 20px;text-align:center;
  background:linear-gradient(180deg,rgba(8,22,15,.35),rgba(8,22,15,.85) 60%)}
.lockc{width:44px;height:44px;border:1px solid var(--gold-lo);border-radius:50%;display:grid;place-items:center;background:rgba(220,185,95,.08)}
.lockc::before{content:"";width:18px;height:18px;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1.5A1.5 1.5 0 0 1 20 11.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 20.5v-9A1.5 1.5 0 0 1 5.5 10zm2.5 0h5V7a2.5 2.5 0 0 0-5 0z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3h1.5A1.5 1.5 0 0 1 20 11.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 20.5v-9A1.5 1.5 0 0 1 5.5 10zm2.5 0h5V7a2.5 2.5 0 0 0-5 0z'/%3E%3C/svg%3E") center/contain no-repeat}
.lockv b{font-family:var(--display);font-weight:500;font-size:21px;color:var(--ink)}
.lockv p{color:var(--muted);font-size:13px;max-width:260px}
.lockv .go{width:auto;padding:10px 22px;margin-top:6px}
.custom.locked{position:relative;cursor:pointer}
.custom.locked>*{opacity:.35;pointer-events:none;filter:blur(1.5px)}
.custom.locked::after{content:"Any color or hex code for members";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12.5px;color:var(--gold-hi);letter-spacing:.02em;
  border:1px dashed var(--gold-lo);border-radius:3px;background:rgba(8,22,15,.55)}
.custom.locked:hover::after{background:rgba(8,22,15,.35)}

/* ---- the "sign in to paint" popup ---- */
.joinsheet{max-width:420px;border-color:var(--gold)}
.perks{list-style:none;margin:2px 0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:13.5px;color:var(--muted)}
.perks li{display:grid;grid-template-columns:18px 1fr;gap:11px;align-items:center}
.perks li>i{justify-self:center;margin:0}
.perks b{color:var(--ink);font-weight:600}
.joinauth{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.joinauth a.go{display:block;text-align:center;text-decoration:none}

/* ---- Founder badge ---- */
.fb{display:inline-flex;align-items:center;gap:3px;margin-left:7px;padding:1px 6px 1px 5px;border-radius:999px;vertical-align:1px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;line-height:1.5;color:var(--on-gold);letter-spacing:0;
  background:linear-gradient(180deg,#f6e3a1,#c9a246);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 1px var(--gold-lo)}
.fb::before{content:"\2726";font-size:9px}
.fb.big{margin:0;font-size:15px;padding:4px 11px 4px 9px;flex:none}
.fb.big::before{font-size:12px}
.founder{display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--gold-lo);border-radius:4px;
  background:linear-gradient(90deg,rgba(220,185,95,.14),transparent 75%)}
.founder>span:last-child{font-size:12.5px;color:var(--muted)}
.founder b{display:block;font-family:var(--display);font-weight:500;font-size:17px;color:var(--gold-hi)}
.fleft{display:flex;gap:10px;align-items:flex-start;margin:0;padding:10px 12px;border:1px dashed var(--gold-lo);border-radius:4px;font-size:12.5px;color:var(--muted)}
.fleft .fb{margin:1px 0 0;flex:none}
.fleft b{color:var(--gold-hi)}
.btn.buy .fb{margin-left:6px}

/* ---- share card ---- */
.shareln{display:block;margin-top:8px;font-size:13px}
.shimg{display:block;width:100%;height:auto;aspect-ratio:1200/630;border:1px solid var(--line);border-radius:3px;background:var(--bg)}
#shareBox .btn{text-decoration:none}
@media (max-width:880px){#paint:not(.open) #pShare{display:none}}