*{box-sizing:border-box} :root{font-family:ui-rounded,'Trebuchet MS',system-ui,sans-serif;color-scheme:dark;--bg:#081a24;--surface:#122d38;--table:#0e3942;--ink:#d9f6f2;--muted:#8cafb2;--accent:#84eed0;--card:#f5fbf8;--red:#c44359;--black:#203741;--back:#176d70;--line:#53818a55;--radius:14px;--card-h:clamp(74px,13.6vw,180px);--step:clamp(17px,2.7vw,31px)}body{margin:0;min-height:100dvh;background:radial-gradient(ellipse at 50% 20%,var(--table),var(--bg) 85%);color:var(--ink)}button,select,input{font:inherit}button,select{min-height:40px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 13px;cursor:pointer;font-size:14px}button:hover,select:hover{border-color:var(--accent)}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button:disabled{opacity:.42;cursor:default}button.on,.primary{background:var(--accent);color:var(--bg)}main{max-width:1240px;margin:auto;padding:24px 36px 20px;position:relative;z-index:1}header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px}.logo{font-size:42px;color:var(--accent);filter:drop-shadow(0 0 12px #69ebcf66)}h1{font-size:22px;letter-spacing:.02em;margin:0 0 3px;font-weight:750}small{font-size:13px;color:var(--muted)}.utility{display:flex;gap:7px}.dashboard{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:132px}.hero-area{display:flex;align-items:center;gap:12px}.hero{padding:0;border:0;width:96px;height:104px;background:none;transition:transform .2s}.hero:hover{transform:translateY(-3px)}.mascot{position:relative;width:100%;height:100%;isolation:isolate;border-radius:20px;overflow:hidden;background:var(--surface)}.mascot img{width:100%;height:100%;object-fit:contain}.hero-area strong{font-size:16px}.hero-area #level{font-size:13px;color:var(--muted);margin-top:5px}progress{display:block;width:140px;height:5px;border:0;appearance:none;background:var(--line);border-radius:3px;margin:8px 0;overflow:hidden}progress::-webkit-progress-bar{background:var(--line)}progress::-webkit-progress-value{background:var(--accent)}progress::-moz-progress-bar{background:var(--accent)}#wallet{border:0;background:transparent;color:var(--accent);padding:0;min-height:28px;font-weight:700}.stats{display:flex;gap:38px}.stats>div{display:flex;flex-direction:column;gap:8px}.stats strong{font-size:23px;font-variant-numeric:tabular-nums;letter-spacing:.03em}.toolbar{display:flex;align-items:center;gap:8px;padding:0 0 20px;flex-wrap:wrap}.toolbar #new{background:var(--accent);color:var(--bg);font-weight:700}.toolbar #theme{margin-left:auto;max-width:170px}#board{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(120deg,#ffffff03,#0000000a),var(--table);padding:24px;min-height:520px;box-shadow:inset 0 0 100px #00000012;--gap:clamp(5px,1.7vw,22px)}.top,.tableau{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--gap)}.top{margin-bottom:28px;height:var(--card-h)}.tableau{align-items:start;min-height:calc(var(--card-h) + 6 * var(--step))}.slot{position:relative;border:1px dashed var(--line);border-radius:9px;min-height:var(--card-h)}.slotmark{position:absolute;left:50%;top:calc(var(--card-h) / 2);transform:translate(-50%,-50%);font-family:Georgia,serif;color:var(--muted);opacity:.6;font-size:clamp(22px,4vw,40px)}.stock{position:relative;font-size:36px;padding:0;border-radius:9px;min-height:var(--card-h)}.stock small{position:absolute;bottom:8px;right:10px;background:#0008;border-radius:5px;padding:1px 4px;color:#fff}.waste{position:relative}.waste>div{position:absolute;top:0;width:100%;height:100%}.spacer{pointer-events:none}.stack-card{position:absolute;width:100%;height:var(--card-h)}.card{position:relative;width:100%;height:var(--card-h);min-height:0;border:1px solid #18313966;border-radius:8px;padding:0;display:block;user-select:none;-webkit-user-select:none;touch-action:none;box-shadow:0 3px 8px #0003;transition:filter .12s,outline .12s;color:var(--black);overflow:hidden}.card.face{background:var(--card);color:var(--black)}.card.red{color:var(--red)}.corner{position:absolute;top:6%;left:8%;font-size:clamp(14px,2.3vw,26px);font-weight:700;line-height:.95;font-family:Georgia,serif;display:flex;flex-direction:column;align-items:center}.corner b{font-size:.8em;margin-top:3px}.inverse{top:auto;left:auto;bottom:6%;right:8%;transform:rotate(180deg)}.pip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(26px,5vw,58px);font-family:Georgia,serif}.back{background:repeating-linear-gradient(45deg,#ffffff12 0 2px,transparent 2px 9px),var(--back);color:var(--accent);border:4px solid var(--card);box-shadow:inset 0 0 0 1px var(--accent),0 3px 8px #0003}.back>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(22px,4vw,46px);font-weight:700}.stock.back{font-size:clamp(24px,4vw,48px);color:var(--accent)}.empty{border:1px dashed var(--line);background:none;color:var(--muted)}.selected{outline:3px solid var(--accent);outline-offset:1px;filter:brightness(1.06);z-index:2}.unavailable{pointer-events:none}.hinted{outline:3px solid var(--accent);outline-offset:3px;box-shadow:0 0 20px var(--accent)}.dragghost{position:fixed;z-index:1000;pointer-events:none;transform:rotate(2deg);opacity:.95;height:var(--card-h)}.dragghost>div{position:absolute;width:100%}#notice{min-height:40px;padding:13px 5px 5px;font-size:14px;color:var(--accent)}footer{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px}footer button{min-height:30px;background:none;border:0;color:var(--muted);font-size:13px;padding:5px}dialog{color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:18px;max-width:760px;width:calc(100% - 28px);max-height:88dvh;padding:30px;box-shadow:0 20px 100px #0007}dialog::backdrop{background:#031018aa;backdrop-filter:blur(6px)}h2{font-size:24px;margin:0 38px 20px 0}h3{font-size:17px;margin:25px 0 12px}dialog p{line-height:1.7;font-size:16px}.close{position:absolute;right:12px;top:12px;font-size:23px;min-width:38px;padding:1px;border:0;background:none}.actions{display:flex;gap:10px;justify-content:flex-end}.lesson{font-size:40px;text-align:center;color:var(--accent);padding:20px;border:1px solid var(--line);border-radius:12px}.wardrobeHero{display:flex;gap:24px;align-items:center}.wardrobeHero .mascot{width:135px;height:170px}.wardrobeHero p{font-size:14px}.slotTabs{display:flex;gap:12px;flex-wrap:wrap;margin-top:15px}.slotTabs a{font-size:14px;color:var(--accent)}.shop{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.shopItem{padding:14px;border:1px solid var(--line);background:var(--surface);border-radius:10px;display:flex;flex-direction:column;gap:10px}.shopItem strong{font-size:14px;min-height:38px;line-height:1.4}.shopItem small{font-size:12px}.shopItem button{margin-top:auto}.recordGrid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.recordGrid article,.achievementList article{padding:14px;border:1px solid var(--line);border-radius:9px}.recordGrid h3{margin:0}.recordGrid p{font-size:14px;margin:8px 0}.achievementList{display:grid;grid-template-columns:1fr 1fr;gap:10px}.achievementList article{display:flex;flex-direction:column;gap:8px}.achievementList strong{font-size:14px}.achievementList small{font-size:12px}.achievementList progress{width:100%}.setting{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:16px}.setting input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent)}.setting input[type=range]{max-width:160px;accent-color:var(--accent)}#effects{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}#effects i{position:absolute;top:-8%;color:var(--accent);font-style:normal;opacity:.2;animation:float 14s linear infinite;font-size:20px}@keyframes float{to{transform:translate(30px,110vh) rotate(160deg)}}.quiet *{animation:none!important;transition:none!important}.quiet #effects{display:none}
body[data-theme=light]{color-scheme:light;--bg:#d6eaf5;--surface:#eef8ff;--table:#b9dbe8;--ink:#223d51;--muted:#527487;--accent:#24799e;--card:#fffcf0;--red:#bd4250;--black:#24475d;--back:#75a7c1;--line:#4b778555}.light .card{font-family:serif}body[data-theme=light] .back{background:repeating-linear-gradient(0deg,#fff4 0 1px,transparent 1px 12px),repeating-linear-gradient(90deg,#fff4 0 1px,transparent 1px 12px),var(--back)}body[data-theme=cats]{--bg:#382238;--surface:#59354e;--table:#6b414b;--ink:#ffe7e8;--muted:#e4b8ba;--accent:#ffbfac;--card:#fff6ee;--red:#bd5061;--black:#633d46;--back:#b97b80;--line:#ffcfac44}body[data-theme=cats] #board{background:radial-gradient(circle at 8px 8px,#ffc5ae12 2px,transparent 3px) 0 0/22px 22px,var(--table)}body[data-theme=cats] .back{background:radial-gradient(circle,#f8dcc44d 2px,transparent 3px) 0 0/12px 12px,var(--back);border-radius:16px}body[data-theme=cats] .card.face{border-radius:13px;background:linear-gradient(145deg,#fffdf8,#ffe5d5)}body[data-theme=anime]{--bg:#241d4c;--surface:#392969;--table:#3e326c;--ink:#f3ecff;--muted:#c4b1e3;--accent:#f4b7e8;--card:#fcf2ff;--red:#c84693;--black:#4d4382;--back:#8455ad;--line:#dcbdff44}body[data-theme=anime] #board{background:radial-gradient(ellipse at 90% 0,#ba65ac33,transparent 55%),var(--table)}body[data-theme=anime] .back{background:repeating-conic-gradient(from 45deg,#ffffff18 0 25%,transparent 0 50%) 0 0/20px 20px,var(--back)}body[data-theme=retro]{font-family:'Courier New',monospace;color-scheme:light;--bg:#166e70;--surface:#d7d6c8;--table:#0e6960;--ink:#1f3031;--muted:#4c6462;--accent:#e9ca4c;--card:#fffdf1;--red:#b52048;--black:#183639;--back:#2d477c;--line:#052e3988;--radius:0}body[data-theme=retro] main{background:#c7c6ba;margin-top:20px;box-shadow:4px 4px #073d42;border:3px outset #dddcd0}body[data-theme=retro] header{background:#233e66;color:#fff;padding:10px 12px;margin:-12px -24px 12px}body[data-theme=retro] header small{color:#b7c7d9}body[data-theme=retro] button,body[data-theme=retro] select{border-radius:0;border:2px outset #e6e6d7;box-shadow:1px 1px #3335}body[data-theme=retro] button:active{border-style:inset}body[data-theme=retro] #board{border:3px inset #eee8d1;background:repeating-linear-gradient(90deg,#fff00003 0 1px,transparent 1px 5px),var(--table)}body[data-theme=retro] .card,body[data-theme=retro] .slot{border-radius:2px}body[data-theme=retro] .back{background:repeating-conic-gradient(#aeb9d0 0 25%,#344b79 0 50%) 0 0/7px 7px;color:#fff4b1}body[data-theme=retro] .slotmark{color:#aec7a1}body[data-theme=retro] #notice{color:#174942}body[data-theme=halloween]{--bg:#201b2d;--surface:#342d42;--table:#453142;--ink:#ffedd6;--muted:#d3bba6;--accent:#ffc077;--card:#fff0da;--red:#bf4d28;--black:#443147;--back:#6c3e32;--line:#ffc07744}body[data-theme=halloween] #board{background:radial-gradient(ellipse at bottom,#8b593133,transparent 70%),var(--table)}body[data-theme=halloween] .back{background:repeating-linear-gradient(60deg,#ffc07722 0 1px,transparent 1px 15px),repeating-linear-gradient(-60deg,#ffc07722 0 1px,transparent 1px 15px),var(--back)}body[data-theme=winter]{--bg:#152b3c;--surface:#25495e;--table:#235547;--ink:#f6f5ea;--muted:#b6d7d2;--accent:#e7cf89;--card:#fffdf5;--red:#b23740;--black:#225444;--back:#91414b;--line:#e7cf8944}body[data-theme=winter] .back{background:repeating-linear-gradient(45deg,#fff2 0 4px,transparent 4px 13px),var(--back)}body[data-theme=winter] .card.face{background:linear-gradient(135deg,#fffdf8,#e8f1e9);border-color:#c5a366}body[data-theme=pond]{--bg:#132d32;--surface:#23484a;--table:#2d5650;--ink:#e9f3d9;--muted:#bad0ab;--accent:#c2e28b;--card:#f4fae5;--red:#b25757;--black:#345343;--back:#608a6b;--line:#c2e28b44}body[data-theme=pond] #board{background:repeating-radial-gradient(ellipse at 80% 10%,transparent 0 35px,#d1f9d00a 36px 37px,transparent 38px 70px),var(--table)}body[data-theme=pond] .back{background:repeating-radial-gradient(ellipse at center,transparent 0 10px,#def5be44 11px 12px,transparent 13px 20px),var(--back)}body[data-theme=pond] .face{border-radius:15px;font-family:Georgia,serif}
@media(max-width:700px){main{padding:12px 12px 18px}header{gap:8px;padding-bottom:12px}h1{font-size:17px}.logo{font-size:29px}.brand{gap:7px}.utility{gap:4px}.utility button{padding:6px 8px;min-width:34px}.utility select{padding:6px 3px;max-width:85px;font-size:13px}.dashboard{gap:8px;min-height:114px;flex-wrap:wrap}.hero{width:68px;height:84px}.hero-area{gap:8px}.hero-area progress{width:90px}.hero-area strong{font-size:14px}.stats{gap:15px}.stats strong{font-size:18px}.stats small{font-size:12px}.dashboard #records{font-size:12px;padding:4px 7px;min-height:30px}.toolbar{gap:5px;padding-bottom:12px}.toolbar button,.toolbar select{font-size:13px;padding:7px 8px;min-height:36px}.toolbar #theme{margin-left:0;flex-grow:1;max-width:none}.toolbar #help{flex-grow:1}#board{padding:12px 7px;min-height:460px;--gap:5px;--card-h:clamp(72px,19vw,128px);--step:20px}.top{margin-bottom:24px}.card{border-radius:5px}.corner{left:7%;top:5%;font-size:clamp(14px,3.5vw,20px)}.corner b{font-size:.8em;margin-top:2px}.inverse{left:auto;top:auto;bottom:5%;right:7%}.pip{font-size:clamp(22px,6vw,36px)}.back{border-width:2px}.slotmark{font-size:24px}.waste>div{width:100%}.stock small{font-size:12px;bottom:5px;right:4px}dialog{padding:22px 18px}h2{font-size:21px}.shop{grid-template-columns:repeat(2,1fr)}.achievementList{grid-template-columns:1fr}.recordGrid{gap:8px}.recordGrid article{padding:10px}body[data-theme=retro] main{margin:8px;padding:12px 8px}body[data-theme=retro] header{margin:-4px -1px 4px;padding:8px 5px}footer{font-size:12px;gap:5px}footer button{font-size:12px}#notice{font-size:13px}}
@media(max-width:390px){.dashboard{gap:5px}.stats{gap:9px}.dashboard #records{margin-left:auto;margin-top:-15px}.toolbar #new{padding:7px 8px}#board{padding:10px 5px;--gap:4px;--step:19px}.utility select{max-width:74px}h1{font-size:15px}.corner{font-size:14px}.inverse{display:none}.pip{top:62%;font-size:23px}.brand small{font-size:12px}.hero-area #level{font-size:12px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}#effects{display:none}}
body[data-theme=retro] #wallet{color:#204a4b}body[data-theme=retro] .mascot img{image-rendering:pixelated}

/* Keep both rank and suit visible in the exposed strip of a stacked card. */
.stack-card:not(:last-child) .corner:not(.inverse){flex-direction:row;gap:3px;align-items:baseline}
.stack-card:not(:last-child) .corner:not(.inverse) b{margin-top:0}
.dragghost .card{animation:none}
@media(max-width:700px){.stack-card:not(:last-child) .corner:not(.inverse){gap:2px;font-size:14px}}
/* A stable play area: 6 hidden cards at 8px and 13 open cards at 20px fit every legal column. */
html{overflow-y:scroll;overflow-x:clip;scrollbar-gutter:stable}
#board{overflow-anchor:none;min-height:0}
.tableau{height:calc(var(--card-h) + 288px);min-height:0}
.column{height:100%;min-height:0;border:0;isolation:isolate}
.column::before{content:"";position:absolute;inset:0 0 auto;height:var(--card-h);border:1px dashed var(--line);border-radius:9px;pointer-events:none}
.stack-card{isolation:isolate}
.card.face{animation:none}
.stack-card:not(:last-child) .corner:not(.inverse){top:2px;font-size:14px;line-height:1;gap:2px}
#drag-layer{position:fixed;inset:0;overflow:clip;pointer-events:none;contain:strict;z-index:1000}
#drag-layer .dragghost{position:absolute;transform:none;opacity:.96}
#notice{height:64px;min-height:64px;overflow:auto}
.painted-portrait{display:block;width:100%;height:auto;aspect-ratio:1;max-height:100%;margin:auto;position:relative;isolation:isolate;overflow:visible;border:0;border-radius:0;background:transparent}
.hero-figure,.hero-grip{display:block;position:absolute;inset:0;background-image:var(--portrait-image);background-size:100% 100%;background-repeat:no-repeat}
.hero-figure{z-index:1}
.hero-grip{z-index:3;pointer-events:none}
.portrait-item{display:block;position:absolute;left:var(--item-x);top:var(--item-y);width:var(--item-size);height:var(--item-size);transform:translate(-50%,-50%);pointer-events:none;z-index:2}
.portrait-pin{z-index:4}
.portrait-object{display:block;width:100%;height:100%;background-image:var(--gear-image);background-size:500% 200%;background-position:var(--item-col) 0;background-repeat:no-repeat}
.portrait-pin .portrait-object{background-position:var(--item-col) 100%}
[data-portrait-theme="4"]{image-rendering:pixelated}
.wardrobeDialog{max-width:860px}
.wardrobeWorkspace{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px;align-items:start}
.wardrobeStage{position:sticky;top:0;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:16px;text-align:center}
.wardrobeStage .painted-portrait{width:200px;height:200px;max-width:100%}
.wardrobeStage strong{display:block;margin-top:12px;font-size:15px}
.wardrobeStage p{font-size:13px;line-height:1.5;margin:8px 0;color:var(--muted)}
.wardrobeStage button{width:100%;margin-top:8px}
.wardrobeSlots{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:14px}
.wardrobeSlots button{font-size:14px;min-height:44px;padding:7px;overflow-wrap:anywhere}
.wardrobeSlots button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:var(--surface)}
.inventoryHeading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.inventoryHeading h3{margin:0}
.wardrobeInventory .shop{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wardrobeInventory .shopItem{padding:10px;min-width:0}
.shopItem.equipped{border-color:var(--accent)}
.shopItem.trying{box-shadow:inset 0 0 0 1px var(--accent)}
.shopItem .itemPreview{display:block;width:100%;aspect-ratio:1;padding:0;background:transparent;border:0;border-radius:0;min-height:0;margin:0;position:relative}
.itemPreview .painted-portrait{width:100%;height:100%;max-width:180px;max-height:180px}
.wardrobeInventory .shopItem strong{min-height:42px}
.wardrobeInventory .shopItem small{line-height:1.4;min-height:30px}
.wardrobeInventory .shopItem .itemAction{width:100%;min-height:42px;font-size:14px}
.wardrobeBalance{margin:-8px 0 20px;color:var(--muted);font-size:14px}
.wardrobeBalance b{color:var(--accent);font-size:18px}
#wardrobeMessage{min-height:40px;font-size:14px;line-height:1.5;color:var(--accent)}
@media(max-width:700px){
 .dashboard{display:grid;grid-template-columns:minmax(128px,1fr) auto;grid-template-rows:84px 30px;gap:0 8px;min-height:124px;height:124px}
 .hero-area{grid-column:1;grid-row:1/3;min-width:0}.hero-area .hero{flex-shrink:0}.hero-area>div{min-width:0}
 #wallet{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .stats{grid-column:2;grid-row:1;align-self:center;gap:11px}
 .dashboard #records{grid-column:2;grid-row:2;margin:0;justify-self:end;align-self:start}
 .wardrobeWorkspace{grid-template-columns:1fr;gap:16px}
 .wardrobeStage{position:relative;display:grid;grid-template-columns:120px minmax(0,1fr);gap:4px 12px;text-align:left;padding:10px;align-items:center}
 .wardrobeStage .painted-portrait{grid-column:1;grid-row:1/4;width:120px;height:120px}
 .wardrobeStage strong{margin:0}.wardrobeStage p{margin:0;line-height:1.4}.wardrobeStage button{font-size:13px;margin:0;padding:6px}
 .wardrobeSlots{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
 .wardrobeSlots button{font-size:12px;min-height:45px}
 .wardrobeInventory .shopItem{padding:8px}.wardrobeInventory .shopItem strong{font-size:13px}
}
@media(max-width:350px){.stats{gap:8px}.wardrobeStage{grid-template-columns:100px minmax(0,1fr)}.wardrobeStage .painted-portrait{width:100px;height:100px}}

@media(max-width:700px){#wardrobePortrait{grid-column:1;grid-row:1/4}}
.wardrobeDialog>.close{position:sticky;top:0;left:100%;right:auto;display:block;width:40px;height:40px;margin:0 0 -40px auto;z-index:20;background:var(--bg)}
@media(max-width:700px){.wardrobeSlots{grid-template-columns:repeat(2,minmax(0,1fr))}.wardrobeSlots button{font-size:14px;min-height:40px;overflow-wrap:normal}}

.portrait-rig{position:absolute;inset:10%;display:block}
.portrait-object,.portrait-pin .portrait-object{background-image:var(--item-image);background-size:100% 100%;background-position:center}

.finishArea{height:48px;display:flex;align-items:flex-start;justify-content:flex-end}.finishArea button[hidden]{display:none}

/* Keep the explanation beside the hint controls, above the playing field. */
.finishArea{height:auto;min-height:48px;align-items:center;gap:12px}.finishArea #notice{flex:1;height:auto;min-height:0;max-height:72px;padding:8px 0;line-height:1.45}.finishArea #notice:empty{padding:0}.finishArea>button{flex-shrink:0}