:root{--ink:#172238;--paper:#f4efe4;--cream:#fffaf0;--orange:#ef6d3d;--mint:#57b7a1;--gold:#f5ba37;--line:rgba(23,34,56,.16)}
.contract #contract-live{display:none}.contract.unlocked #contract-live{display:inline}.contract.unlocked #contract-copy{display:none}
.tile.golden{cursor:pointer}.tile.golden:after{content:"COLLECT";position:absolute;bottom:7px;font:700 7px DM Mono,monospace;letter-spacing:.12em}.tile .mixed-view{display:flex;align-items:center;gap:6px}.tile .mixed-view>b{font-size:31px}.tile .mixed-view i{display:flex;flex-direction:column;align-items:center;font-style:normal}.tile .mixed-view .num,.tile .mixed-view .den{font-size:19px}.tile .mixed-view .bar{width:30px;margin:3px}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Segoe UI",system-ui,sans-serif;min-height:100vh;background-image:radial-gradient(rgba(23,34,56,.09) 1px,transparent 1px);background-size:22px 22px}
body:before{content:"";position:fixed;inset:0 0 auto;height:7px;background:linear-gradient(90deg,var(--orange) 0 34%,var(--mint) 34% 68%,var(--gold) 68%)}
.shell{width:min(1160px,94vw);margin:auto;padding:32px 0 24px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;position:relative}.eyebrow,.board-head span,.feed-title span{font:500 11px DM Mono,monospace;letter-spacing:.22em}.brand h1{font-size:clamp(34px,6vw,68px);line-height:.85;margin:8px 0;font-weight:800;letter-spacing:-.07em}.brand h1 span{color:var(--orange)}.back-shore{position:absolute;right:0;top:-20px;color:#596477;font:700 9px DM Mono,monospace;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}.back-shore:hover{color:var(--orange)}
.scorebox{display:flex;gap:13px;align-items:center;padding:10px 18px 10px 10px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);background:var(--cream)}.scorebox strong{display:block;font:800 29px Manrope}.scorebox small{display:block;font:500 9px DM Mono;letter-spacing:.12em}.mini-one{width:44px;height:52px;display:grid;place-items:center;border-radius:7px;background:var(--gold);font-size:27px;font-weight:800;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.instructions{position:relative;display:flex;gap:20px;align-items:center;background:var(--ink);color:#fff;padding:13px 48px 13px 19px;margin-bottom:18px}.instructions p{font-size:12px;margin:0}.instructions b{color:#ffd984}.instructions i{width:1px;height:22px;background:#ffffff36}.instructions button{position:absolute;right:12px;background:none;border:0;color:#fff;font-size:22px;cursor:pointer}
.contract{display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:white;margin-bottom:18px;padding:10px 14px 10px 18px;border-left:7px solid var(--gold)}.contract>div:first-child{display:flex;align-items:center;gap:22px}.contract strong{font-size:16px;letter-spacing:.05em}.contract strong b{font-size:25px;color:#ffd76c;margin-left:7px}.contract-seal{display:flex;align-items:center;gap:8px;border:1px solid #ffffff50;padding:5px 9px}.contract-seal span{font-size:20px;font-weight:800}.contract-seal small{font:500 8px DM Mono;letter-spacing:.12em}
.board-wrap{border:2px solid var(--ink);background:rgba(255,250,240,.88);box-shadow:7px 7px 0 var(--ink);position:relative}.board-head,.feed-title{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;border-bottom:1px solid var(--line)}.board-head small,.feed-title small{display:block;margin-top:3px;color:#687080;font-size:10px}.actions{display:flex;gap:7px}.actions button{border:1px solid var(--ink);background:transparent;padding:7px 11px;font:700 10px Manrope;text-transform:uppercase;cursor:pointer}.actions button:hover{background:var(--ink);color:white}
.actions .spell{background:#6653b8;color:white;border-color:#463888;min-width:140px}.actions .spell span{color:#ffe388}.actions .spell:disabled{background:#ddd7cc;border-color:#aaa39a;color:#736e68;cursor:not-allowed}.actions .spell:disabled:hover{background:#ddd7cc;color:#736e68}
.actions .split{background:var(--mint);color:var(--ink)}.actions .split b{display:inline-grid;place-items:center;background:var(--ink);color:white;border-radius:10px;min-width:17px;height:17px;margin-left:4px}.actions button.active{outline:3px solid var(--gold);outline-offset:2px}.actions button:disabled{opacity:.45;cursor:not-allowed}
.bench-area{height:clamp(330px,48vh,490px);position:relative;overflow:hidden}.board{position:absolute;inset:0;overflow:hidden;background:linear-gradient(90deg,transparent 49.8%,rgba(23,34,56,.035) 50%,transparent 50.2%),linear-gradient(transparent 49.8%,rgba(23,34,56,.035) 50%,transparent 50.2%)}
.reduction{position:absolute;z-index:12;right:0;top:0;bottom:0;width:50%;background:rgba(244,239,228,.96);border-left:2px solid var(--ink);transform:translateX(calc(100% - 38px));transition:transform .22s}.reduction.open{transform:none}.reduction>button:first-child{position:absolute;left:0;top:0;bottom:0;width:38px;border:0;border-right:1px solid var(--line);background:var(--ink);color:white;cursor:pointer}.reduction>button:first-child span{position:absolute;white-space:nowrap;left:10px;top:50%;font:700 9px DM Mono;letter-spacing:.15em;transform:rotate(-90deg) translateX(-50%);transform-origin:left top}.reduction>button:first-child b{position:absolute;bottom:10px;left:14px;font-size:20px;transform:rotate(180deg)}.reduction.open>button:first-child b{transform:none}.reduction-body{height:100%;padding:22px 18px 16px 56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}.reduction-body>small{font:500 9px DM Mono;letter-spacing:.08em;color:#687080}.reduction-equation{display:flex;align-items:center;justify-content:center;gap:9px;width:100%}.reduction-equation>strong{font-size:25px}.reduction-slot{width:92px;height:108px;border:2px dashed #8f948f;border-radius:9px;background:rgba(255,255,255,.55);display:grid;place-items:center;position:relative}.reduction-slot:empty:after{content:attr(data-empty);font:600 8px DM Mono;letter-spacing:.12em;color:#8a8f8a}.reduction-slot .tile{position:relative!important;left:auto!important;top:auto!important;width:84px;height:100px;box-shadow:2px 3px 0 rgba(23,34,56,.22)}.reduction-choices{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;max-width:340px}.reduction-choices button{width:29px;height:29px;border:1px solid var(--ink);background:white;font-weight:800;cursor:pointer}.reduction-choices button.on{background:#6653b8;color:white}.reduction-body>#reduce-tile{border:2px solid var(--ink);background:var(--mint);padding:8px 24px;font-weight:800;text-transform:uppercase;cursor:pointer}.reduction-body>#reduce-tile:disabled{opacity:.35;cursor:not-allowed}.reduction-body>p{min-height:16px;margin:0;font:600 10px DM Mono;color:#6653b8;text-align:center}
.tile{position:absolute;width:94px;height:110px;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#fffaf4;border:2px solid var(--ink);border-radius:9px;box-shadow:4px 5px 0 rgba(23,34,56,.22);user-select:none;touch-action:none;cursor:grab;transition:box-shadow .16s,transform .16s,background .2s}.tile:active,.tile.dragging{cursor:grabbing;z-index:20;transform:scale(1.06) rotate(2deg);box-shadow:8px 10px 0 rgba(23,34,56,.18)}.tile.target{outline:4px solid var(--mint);outline-offset:3px}.tile .num,.tile .den{font-size:27px;font-weight:800;line-height:1}.tile .bar{height:2px;width:45px;background:var(--ink);margin:6px}.tile.whole .num{font-size:43px}.tile .hint{font:500 7px DM Mono;letter-spacing:.08em;position:absolute;bottom:7px;color:#707684}.tile.ripe{animation:ripe 1.8s ease-in-out infinite}.tile.ripe:after{content:"READY";position:absolute;top:-9px;right:-12px;background:var(--orange);color:white;padding:3px 5px;font:500 7px DM Mono;letter-spacing:.1em;transform:rotate(5deg)}@keyframes ripe{50%{box-shadow:0 0 0 7px rgba(239,109,61,.18),4px 5px 0 rgba(23,34,56,.22)}}
.tile.golden{background:linear-gradient(145deg,#ffe98e,#f4ad22);border-color:#8c5c00;color:#654100;box-shadow:0 0 26px #f5ba3777,4px 5px 0 #8c5c00}.tile.golden:before{content:"✦";position:absolute;top:8px;left:10px}.tile.golden .hint{color:#765000}
.lab-tag{font:700 9px DM Mono,monospace;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border:2px solid var(--ink);white-space:nowrap;cursor:help}
.lab-tag.on{background:var(--mint);color:var(--ink)}
.lab-tag.off{background:var(--orange);color:white;box-shadow:3px 3px 0 var(--ink)}
@media(max-width:700px){.lab-tag{font-size:8px;letter-spacing:.08em;padding:5px 7px}}
.tile.selected{outline:5px solid var(--mint);outline-offset:4px}
.board.spell-armed .tile:not(.golden),.board.split-armed .tile:not(.golden){cursor:crosshair;animation:spell-pulse 1s ease-in-out infinite}.board.spell-armed .tile:not(.golden):hover,.board.split-armed .tile:not(.golden):hover{outline:5px solid #8e78eb;outline-offset:4px}.board.spell-armed:after,.board.split-armed:after{position:absolute;left:50%;top:13px;transform:translateX(-50%);color:white;padding:7px 12px;font:500 9px DM Mono;letter-spacing:.12em;pointer-events:none;z-index:40}.board.spell-armed:after{content:"CHOOSE A TILE TO MULTIPLY";background:#6653b8}.board.split-armed:after{content:"CHOOSE A TILE TO SPLIT";background:#238b78}@keyframes spell-pulse{50%{box-shadow:0 0 0 6px rgba(102,83,184,.2),4px 5px 0 rgba(23,34,56,.22)}}
#toast{position:absolute;left:50%;bottom:14px;transform:translate(-50%,15px);opacity:0;background:var(--ink);color:white;padding:9px 14px;font-size:12px;pointer-events:none;transition:.25s;z-index:30}#toast.show{opacity:1;transform:translate(-50%,0)}
.feed{margin-top:25px}.feed-title{padding-left:0;border-bottom:1px solid var(--ink)}.foundry{display:flex;gap:11px;padding:15px 2px;overflow-x:auto}.foundry .tile{position:relative;flex:0 0 74px;width:74px;height:86px;left:auto!important;top:auto!important;box-shadow:3px 3px 0 var(--ink)}.foundry .tile .num,.foundry .tile .den{font-size:20px}.foundry .tile .bar{width:33px;margin:4px}.foundry .tile:after{content:"+";position:absolute;right:5px;top:2px;color:var(--orange);font-weight:800}
.tile.multiplier{background:linear-gradient(145deg,#765bc4,#4d388d);border-color:#36266d;color:white}.tile.multiplier .bar{background:#f3eaff}.foundry .tile.multiplier:after{content:"×";color:#ff9a62;font-size:17px;line-height:1}
.reduction-slot .station-source{cursor:grab}.reduction-slot .factor-card{background:var(--mint);border-color:#276e62;color:var(--ink)}.reduction-slot .factor-card .bar{background:var(--ink)}
footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:15px;padding-top:13px;font:500 10px DM Mono;letter-spacing:.08em;color:#687080}
.touch-actions{display:none;align-items:center;gap:8px;background:var(--ink);color:white;padding:9px 12px;margin-top:14px;box-shadow:4px 4px 0 var(--mint)}.touch-actions.open{display:flex}.touch-actions span{font:500 9px DM Mono;letter-spacing:.12em;margin-right:auto}.touch-actions span b{color:#ffd76c;font-size:14px;margin-left:5px}.touch-actions button{border:1px solid white;background:var(--mint);color:var(--ink);padding:8px 13px;font-weight:800}.touch-actions button:disabled{opacity:.45}.touch-actions #deselect{background:transparent;color:white}.trail{margin-top:14px;border-top:1px solid var(--ink)}.trail summary{display:flex;justify-content:space-between;align-items:center;padding:10px 2px;cursor:pointer;font:500 10px DM Mono;letter-spacing:.15em}.trail summary b{display:grid;place-items:center;background:var(--ink);color:white;border-radius:50%;width:20px;height:20px}.trail ol{margin:0;padding:0;list-style:none;border:1px solid var(--line);background:#fffaf0}.trail li{padding:8px 12px;border-bottom:1px solid var(--line);font:500 12px DM Mono}.trail li:first-child{color:#6653b8;font-weight:700}
.modal{position:fixed;inset:0;background:#172238bb;display:none;place-items:center;z-index:100;padding:20px}.modal.open{display:grid}.modal-card{width:min(520px,100%);background:var(--cream);border:2px solid var(--ink);box-shadow:9px 9px 0 var(--orange);padding:28px;position:relative}.modal-card h2{font-size:30px;margin:10px 0 4px}.modal-card h2 span{color:var(--orange)}.modal-card p{font-size:12px;color:#626a78;margin:0 0 19px}.close{position:absolute;right:12px;top:9px;border:0;background:none;font-size:26px;cursor:pointer}.divisors{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.divisors button{aspect-ratio:1;border:1px solid var(--ink);background:white;font:800 17px Manrope;cursor:pointer}.divisors button:hover:not(:disabled){background:#f0ece4;transform:translateY(-2px);box-shadow:2px 3px 0 var(--ink)}.divisors button:disabled{opacity:.25;cursor:not-allowed}
.spell-card{box-shadow:9px 9px 0 #6653b8}.spell-card h2 span{color:#6653b8}.spell-entry{display:flex;gap:9px}.spell-entry input{width:110px;min-width:0;border:2px solid var(--ink);background:white;padding:11px;font:800 22px Manrope;text-align:center}.spell-entry button{flex:1;border:2px solid #463888;background:#6653b8;color:white;font:800 13px Manrope;text-transform:uppercase;cursor:pointer}.spell-entry button:hover{background:#463888}.spell-entry button span{color:#ffe388}.spell-error{height:18px;color:#b83e30;font-size:11px;margin-top:7px}
@media(max-width:700px){.shell{width:96vw;padding-top:22px}.instructions{align-items:flex-start;flex-direction:column;gap:5px}.instructions i{display:none}.scorebox{padding-right:8px}.scorebox small{display:none}.tile{width:78px;height:94px}.bench-area{height:55vh}.reduction{width:calc(100% - 20px)}.reduction-body{padding-left:48px}.reduction-slot{width:72px;height:90px}.reduction-slot .tile{width:68px;height:84px}.reduction-equation{gap:5px}.divisors{grid-template-columns:repeat(4,1fr)}footer{gap:10px}.brand h1{font-size:42px}.board-head{align-items:flex-start}.actions{flex-wrap:wrap;justify-content:flex-end}.actions .spell{order:3}.spell-entry{flex-direction:column}.spell-entry input{width:100%}.spell-entry button{min-height:48px}}