@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Inter:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--gold:#e4c280;--muted:#ad9c83;--line:#d5b77928;--ink:#eee4d1;font-family:Inter,system-ui,sans-serif;background:#110e0b;color:var(--ink)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 20%,#61401f22,transparent 60%),#110e0b}.ambient{position:fixed;inset:0;background:linear-gradient(#100d0ad9,#100d0af4 72%),url('/images/bookshelf.webp') center top/cover;z-index:-1;pointer-events:none}main{max-width:1160px;margin:auto;padding:26px 32px 30px}.topbar{display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:12px}.topbar a{color:var(--muted);text-decoration:none}.topbar a:hover{color:var(--gold)}.draft{font-size:9px;letter-spacing:1.5px;color:#998970;border:1px solid var(--line);border-radius:20px;padding:7px 11px}header{text-align:center;padding:28px 0 29px}.crest{color:var(--gold);font-size:30px;line-height:1}.eyebrow{color:#b59a67;letter-spacing:3.5px;font-size:10px;margin:16px 0 12px}h1{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(36px,4.8vw,60px);font-weight:500;line-height:1.05;margin:0}h1 em{font-weight:500;color:var(--gold)}.intro{font-size:13px;line-height:1.85;color:#bbaa91;margin:15px 0 0}.workbench{background:linear-gradient(130deg,#262016d9,#181510eb);border:1px solid var(--line);border-radius:16px;box-shadow:0 25px 80px #0005;overflow:hidden}.controls{display:flex;gap:26px;align-items:center;padding:21px 27px;border-bottom:1px solid var(--line)}fieldset{padding:0;border:0;margin:0}legend{font-size:10px;text-transform:uppercase;letter-spacing:1.4px;color:var(--muted);margin-bottom:9px}.segments{display:flex;background:#0e0c0980;border:1px solid var(--line);padding:3px;border-radius:8px;gap:2px}button{font:inherit;color:inherit;cursor:pointer;border:1px solid transparent;transition:background .15s,box-shadow .15s}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #fce1a1;outline-offset:4px}.segments button{background:transparent;color:#a8977d;border-radius:5px;padding:8px 14px;font-size:12px}.segments button[aria-pressed=true]{background:#4b3b25;color:#f8ddb0;box-shadow:0 2px 5px #0003}.metrics{margin-left:auto;display:flex;gap:28px;text-align:right}.metrics span{display:block;font-size:9px;letter-spacing:1.3px;color:var(--muted);margin-bottom:8px}.metrics strong{font-size:17px;font-weight:500;font-variant-numeric:tabular-nums}.shelf-heading{padding:25px 28px 0;display:flex;justify-content:space-between;color:#aa9470;font-size:10px;letter-spacing:2px}.shelf-heading i{font-style:normal;color:var(--gold);margin-right:8px}.shelf-heading>span:last-child{color:var(--gold);font-size:12px;letter-spacing:2px}.shelf-window{overflow-x:auto;padding:0 27px;scrollbar-color:#695135 #1b140d}.alcove{min-width:100%;width:max-content;position:relative;background:radial-gradient(ellipse at bottom,#8e582423,transparent 70%)}#shelf{list-style:none;display:flex;justify-content:center;align-items:end;gap:12px;margin:0;min-width:100%;padding:40px 18px 0;height:296px}#shelf li{position:relative;flex-shrink:0;display:flex;align-items:end}.book{--leather:#593a26;--height:214px;--width:100px;display:flex;position:relative;flex-direction:column;align-items:center;justify-content:center;width:var(--width);height:var(--height);border:1px solid #e0b77850;border-radius:9px 5px 4px 8px;box-shadow:inset 7px 0 9px #0007,inset -5px 0 7px #0008,inset 1px 0 #edcd9560,5px 2px 7px #0008;background:repeating-linear-gradient(12deg,transparent 0 5px,#f4dba408 6px,transparent 7px 11px),radial-gradient(ellipse at 15% 20%,#e5bd8730,transparent 65%),linear-gradient(90deg,#0004,transparent 18%,#ffffff07 40%,#0004),var(--leather);color:#f1d29a;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;transition:transform .16s,box-shadow .16s}.book:before,.book:after{content:'';position:absolute;left:5px;right:5px;height:9px;border-top:2px solid #d8ac627a;border-bottom:1px solid #e9c98566;box-shadow:0 3px 4px #0005}.book:before{top:23px}.book:after{bottom:23px}.book:hover{transform:translateY(-7px);box-shadow:inset 7px 0 9px #0007,inset -5px 0 7px #0008,0 0 17px #e5b95820}.book.selected{transform:translateY(-15px);outline:2px solid var(--gold);outline-offset:4px}.book .letter{font-family:Georgia,serif;font-size:clamp(38px,4vw,52px);font-weight:600;text-shadow:0 2px 3px #000c;line-height:1.3}.book .ornament{color:#d8af6a9c;font-size:22px;line-height:1.4}.book .rule{width:65%;height:1px;background:linear-gradient(90deg,transparent,#e9c48580,transparent);margin:12px 0}.book .edition{position:absolute;bottom:45px;font:9px Georgia,serif;letter-spacing:3px;color:#e5c78a88}.book.hinted{outline:2px solid #e9b96d;outline-offset:3px}.book.drag-source{opacity:.22;transform:none}.book-ghost{position:fixed!important;z-index:30;pointer-events:none;opacity:.95;transform:rotate(-3deg)!important;transition:none!important;box-shadow:12px 18px 28px #0009}.drop-target:before{content:'';position:absolute;left:-8px;bottom:0;height:95%;width:3px;border-radius:3px;background:#ffe2a0;box-shadow:0 0 12px #ffcc77;z-index:2}.wood{height:26px;border-radius:3px 3px 5px 5px;background:repeating-linear-gradient(2deg,transparent 0 4px,#160a0480 5px,#d7a46415 6px,transparent 7px 11px),linear-gradient(#9a6639,#49301c 25%,#674322 40%,#392316);border-top:3px solid #c592535c;border-bottom:5px solid #140d08;box-shadow:0 13px 13px #0006}.shelf-foot{display:flex;gap:12px;justify-content:space-between;padding:20px 28px 0;font-size:11px;color:#a9977b;line-height:1.6}.shelf-foot span:last-child{white-space:nowrap}.message{font-size:13px;text-align:center;line-height:1.7;color:#c6b69b;padding:20px 20px 8px;min-height:57px}.message.feedback{color:#f0ca85}.actions{display:flex;justify-content:center;align-items:center;gap:15px;padding:12px 20px 27px}.primary{background:linear-gradient(#e1c086,#cfa767);color:#24190c;border:1px solid #f6dfa560;border-radius:7px;padding:12px 21px;font-size:12px;font-weight:700;box-shadow:0 3px 10px #0003}.primary:hover{background:#f0d198}.primary span{margin-left:16px}.secondary{border:1px solid #b4986738;background:transparent;border-radius:7px;padding:11px 15px;color:#c0ab87;font-size:11px}.secondary:hover{background:#cfa76715}button:disabled{opacity:.45;cursor:default}.result{border-top:1px solid var(--line);padding:24px;text-align:center;background:#2c36231f}.result-star{color:#e8cb86;font-size:28px}.result h2{font:500 36px 'Cormorant Garamond',Georgia,serif;margin:4px 0;color:#f0d39d}.result p{font-size:13px;color:#cabb9e;line-height:1.6}.result .result-order{font-family:Georgia,serif;color:var(--gold);font-size:20px;letter-spacing:4px}footer{display:flex;justify-content:space-between;gap:24px;padding-top:20px;font-size:11px;color:#998971;line-height:1.7}footer details{max-width:460px}summary{cursor:pointer;text-align:right}footer p{margin:8px 0}body.dragging{cursor:grabbing}body.dragging *{cursor:grabbing!important}
@media(min-width:1000px){#shelf.ten{gap:9px;padding-left:12px;padding-right:12px}.ten .book{width:75px}}
@media(max-width:700px){main{padding:18px 12px}.topbar{font-size:11px}.draft{font-size:8px;letter-spacing:.5px;padding:5px 8px}header{padding:25px 0}.eyebrow{font-size:9px}.intro{font-size:12px}.controls{flex-wrap:wrap;padding:17px;gap:15px;justify-content:space-between}.metrics{width:100%;margin:0;justify-content:space-between;text-align:left;border-top:1px solid var(--line);padding-top:14px}.metrics div:last-child{text-align:right}.metrics strong{font-size:15px}.shelf-window{padding:0 13px}.shelf-heading{padding:20px 17px 0}#shelf{gap:8px;padding:30px 8px 0;height:260px}.book{width:54px;height:calc(var(--height) * .86)}.book .letter{font-size:34px}.book .ornament{font-size:16px}.book .edition{font-size:8px;letter-spacing:1px}.shelf-foot{padding:16px 17px 0;font-size:10px}.actions{gap:8px;flex-wrap:wrap}.primary{padding:12px 15px}.secondary{padding:11px 10px}.message{font-size:12px}footer{flex-direction:column;gap:9px}summary{text-align:left}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* Compact game shell; leather book artwork stays shared with the original game. */
main{max-width:1500px;height:100dvh;min-height:570px;padding:16px;display:grid;grid-template-rows:38px minmax(0,1fr);gap:10px}.topbar a{font:700 13px Inter,system-ui;padding:8px 12px;border:1px solid #a48c5c77;border-radius:7px;background:#211c15;color:#ecd6ad;white-space:nowrap}.draft{border:0;padding:0;font-size:9px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:14px;min-height:0}.workbench{position:relative;display:flex;flex-direction:column;min-height:0}.game-panel{background:#1a1712ed;border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:14px;min-height:0}header{text-align:left;padding:0;margin-bottom:auto}h1{font-size:32px}.eyebrow{margin:0 0 9px;font-size:9px;letter-spacing:3px}.intro{margin:10px 0 0;font-size:12px}.controls{display:grid;gap:17px;padding:0;border:0}.segments button{flex:1}.metrics{margin:0;text-align:left;display:flex;justify-content:space-between;gap:10px}.metrics strong{font-size:15px}.metrics div:last-child{text-align:right}.actions{display:grid;grid-template-columns:1fr 1fr;padding:0;gap:8px;margin-top:auto}#check{grid-column:1/-1;grid-row:1}#help{width:100%}.shelf-heading{padding:18px 22px 0}.shelf-window{flex:1;min-height:0;display:flex;align-items:center;padding:20px 18px;overflow:auto hidden}.alcove{width:100%;min-width:100%}#shelf,#shelf.ten{height:auto;padding:25px 10px 0;gap:10px;width:100%;min-width:0}#shelf li{flex:1;min-width:0;max-width:110px}.book,.ten .book{width:100%;height:clamp(160px,34dvh,var(--height))}.book .letter{font-size:clamp(28px,3.5vw,50px)}.book .edition{letter-spacing:1px}.ten .book .edition{font-size:7px}.ten .book .letter{font-size:clamp(24px,3vw,38px)}.shelf-foot{padding:10px 22px;font-size:11px}.message{padding:10px 20px 16px;min-height:65px;font-size:12px}.result:not([hidden]){position:absolute;inset:auto 18px 18px;background:#242519f5;border:1px solid #c2a46577;border-radius:12px;box-shadow:0 10px 35px #0009;padding:15px;max-height:80%;overflow:auto}.result h2{font-size:28px}.result-star{display:none}.result p{margin:8px 0}.result .result-order{font-size:16px}dialog{color:var(--ink);background:#211d16;border:1px solid #ac8753;border-radius:14px;max-width:530px;width:calc(100% - 32px);max-height:85dvh;padding:24px;font:14px/1.7 Inter,system-ui}dialog::backdrop{background:#000b}dialog h2{font:30px Georgia}.close{float:right}@media(min-width:701px) and (max-width:1100px){#shelf.ten{gap:6px;padding-inline:4px}.ten .book .edition{display:none}.ten .book .ornament{font-size:16px}}
@media(max-width:700px){main{padding:10px;min-height:700px}.game-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:8px}.game-panel{padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}header{grid-column:1/-1}header .eyebrow,header .intro{display:none}h1{font-size:25px}h1 br{display:none}h1 em{margin-left:5px}.controls{grid-column:1;gap:10px}.metrics{border:0;padding:0;gap:5px}.metrics span{font-size:7px;letter-spacing:0}.metrics strong{font-size:12px}.actions{grid-column:2;grid-row:2;align-self:center}.primary,.secondary{padding:10px 6px;font-size:10px}.primary span{display:none}#help{grid-column:1/-1}.segments button{padding:7px 5px;font-size:10px}legend{font-size:8px;margin-bottom:4px}.draft{font-size:8px;letter-spacing:0}.topbar a{font-size:11px;padding:8px}.shelf-heading{padding:12px 15px 0;font-size:8px}.shelf-window{padding:0 12px}#shelf{gap:8px;padding:20px 6px 0}.book{height:clamp(140px,23dvh,190px)}.book .rule{margin:7px 0}.book .edition{display:none}.book .ornament{font-size:15px}.book .letter{font-size:32px}#shelf.ten{min-width:540px;gap:8px}.ten .book{height:clamp(140px,23dvh,190px)}.alcove:has(.ten){min-width:540px}.shelf-foot{padding:8px 15px;font-size:9px}.message{font-size:10px;min-height:48px;padding:6px 12px}.result:not([hidden]){inset:auto 8px 8px;padding:10px}.result h2{font-size:23px}.result p{font-size:11px}}
@media(min-width:701px) and (max-height:650px){main{min-height:530px;padding:10px}.game-panel{padding:12px;gap:10px}header{margin-bottom:0}h1{font-size:28px}.intro{display:none}.controls{gap:12px}.book .rule{margin:7px 0}}