/* Wooden frames, plum inventory slots and parchment pages: the game's visual UI. */
@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/pixelify.ttf') format('truetype')}
@font-face{font-family:'VT323';font-style:normal;font-weight:400;font-display:swap;src:url('assets/vt323.ttf') format('truetype')}
/* The recipe grid has fixed-height slots so both pages remain visible on laptops. */
.recipe-page .bag-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:5px!important}
.recipe-page .bag-cell{height:48px;aspect-ratio:auto}
.recipe-page .bag-cell canvas{width:40px;height:40px}
.recipe-page .recipe-preview{width:72px;height:72px}
:root{--gold:#ffd37a;--ink:#291c30;--muted:#cab393;--line:#613b37;--wood:#945731;--woodLight:#d29452;font-family:'VT323',monospace;color:#fff0cc}button,input{font-family:inherit}button{transition:filter .12s,transform .12s}button:hover{filter:brightness(1.15)}button:active{transform:translateY(2px)}#vignette{box-shadow:inset 0 0 120px #0a332515}.panel{border-radius:0;background:#392632;border:4px solid #281b29;box-shadow:inset 0 0 0 3px #9c653c,inset 0 0 0 6px #533329,0 4px 0 #1d172bb0;backdrop-filter:none}.panel:before{content:'';position:absolute;pointer-events:none;inset:4px;border:1px solid #efbc6352}.eyebrow,.section-label{font-family:'Pixelify Sans',monospace;font-size:11px;letter-spacing:1px;font-weight:600;color:#e8b968}#welcome{background:linear-gradient(90deg,#0a352455,#10352600 70%,#19302522)}.intro{left:8vw;top:18vh}.intro .eyebrow{background:#352334df;padding:8px 12px;border:2px solid #c89351;color:#ffd88f}.intro h1{font-family:'Pixelify Sans',monospace;font-weight:700;font-size:clamp(64px,7.7vw,115px);letter-spacing:-3px;line-height:.9;color:#fff0b1;text-shadow:0 5px #744c35,4px 0 #3f2931,-4px 0 #3f2931,0 -4px #3f2931,0 9px #271d2c;margin:35px 0}.intro h1 em{color:#f8c567}.intro h1 small{font-size:.26em}.intro p{font-size:23px;color:#fff9d5;text-shadow:2px 2px #264638;line-height:1.25}.intro-line{background:#e8ba68;box-shadow:0 2px #51312a;margin:22px 0}.edition{font-family:'Pixelify Sans';font-size:11px;letter-spacing:1px;color:#fff0b8;text-shadow:1px 2px #21382a}.start{padding:30px 28px;width:356px;background:linear-gradient(90deg,#332332,#432c38 60%,#332332)}.start h2{font-family:'Pixelify Sans';font-size:27px;color:#ffe6a7;font-weight:600;margin:15px 0}.start p{font-size:18px;line-height:1.2;color:#d6c5ad;margin-bottom:20px}.start label{font-size:18px;margin:16px 0 6px;color:#eedbbb}.start label span{font-size:12px;color:#b7a389;margin-top:4px}.start input{border-radius:0;border:3px solid #211b29;box-shadow:inset 0 2px 0 #170f24,0 1px #a57649;background:#251d2c;color:#fff1c8;padding:8px 10px;font-size:22px}.start input:focus{border-color:#d4a15d}#room{letter-spacing:2px}.swatch{width:29px;height:26px;border-radius:0;border:3px solid #201b2a;outline:1px solid #9c7550;box-shadow:inset 0 2px #ffffff45}.swatch.chosen{outline:2px solid #ffd777}.primary{font-family:'Pixelify Sans';border-radius:0;border:3px solid #33242c;box-shadow:inset 0 3px #ffe5a1,inset 0 -4px #9a612f,0 2px #b98246;background:#d99b4d;color:#352333;font-size:17px;padding:13px 16px;margin-top:22px}.primary:hover{background:#edb75e}.start-foot{font-size:12px;gap:8px;color:#ad977d}.start small{font-size:13px;color:#aa9483;margin-top:9px}.start #connectError{font-size:17px;color:#f1a28d}.start #connectError:empty{display:none}footer{font-family:'Pixelify Sans';font-size:11px;color:#eee6b9;letter-spacing:1px;text-shadow:1px 2px #213d2f}.top-left{width:236px;top:20px;left:22px}.identity{gap:10px;margin-bottom:10px}.avatar{width:48px;height:48px;border:3px solid #251a29;background:#422a36;box-shadow:inset 0 0 0 2px #b78146;transform:none;overflow:hidden}.avatar canvas{width:47px;height:53px;image-rendering:pixelated;object-fit:contain}.identity b{font-family:'Pixelify Sans';font-size:14px;color:#fff3ca;text-shadow:2px 2px #281d29}.identity small{font-size:13px;letter-spacing:1px;color:#ffe2a1;margin-top:2px}.meter{height:25px;margin-top:5px;position:relative;gap:7px;text-shadow:2px 2px #241b29}.meter span{font-size:24px;width:25px;text-align:center;filter:drop-shadow(2px 2px #2d2030)}.meter>div{height:22px;border:3px solid #281c2c;border-radius:0;background:#2c2332;box-shadow:0 2px #6a432f;overflow:hidden}.meter i{transition:width .16s linear;border-top:3px solid #ffffff40;border-bottom:4px solid #00000030}.meter b{position:absolute;left:34px;right:0;width:auto;top:3px;text-align:center;font-size:20px;line-height:19px;pointer-events:none}.health i{background:#ed3756}.health span{color:#ff7994}.mana i{background:#1ed3eb}.mana span{color:#8cedff}.stamina{height:5px;margin:9px 3px 0 33px;background:#2b2332;border:1px solid #251c28}.stamina i{background:#efc45c}.location{top:23px;filter:drop-shadow(2px 2px #22432f)}.location span{font-size:16px;letter-spacing:1px;color:#fff0b5}.location b{font-family:'Pixelify Sans';font-size:20px;font-weight:600;color:#fff2c1}.location small{font-size:14px;color:#d6ebbf}.top-right{width:187px;right:22px;top:20px}.minimap-wrap{width:187px;padding:8px 8px 0;border:4px solid #2c1c2a;border-radius:0;background:#713f30;box-shadow:inset 0 0 0 3px #c38d4c,3px 4px #2b202859}.minimap-wrap canvas{width:163px;height:129px;border:3px solid #322230;background:#172e37}.minimap-wrap span{font-size:15px;letter-spacing:1px;margin:3px}.top-right>button:not(.minimap-wrap){font-size:16px;color:#fff0bd;text-shadow:2px 2px #294332}#roomLabel{font-size:14px;margin-top:8px;letter-spacing:1px;text-shadow:2px 2px #28442d}.quest{width:232px;top:210px;left:22px;padding:18px 17px;background:#382832eF}.quest .section-label{font-size:9px;color:#cc9a63;letter-spacing:1px}.quest h3{font-family:'Pixelify Sans';font-size:17px;margin:12px 0 9px;color:#ffe2a3;line-height:1.2}.quest p{font-size:17px;color:#d9c7a8;line-height:1.2}.quest button{font-size:17px;color:#f6c770}.quest kbd{margin-left:4px}#questProgress i{height:4px;width:23px;background:#654635}#questProgress i.done{background:#f2c568}kbd{border-radius:0;border:1px solid #ad8157;background:#382a30;color:#f2d4a0;box-shadow:0 2px #201828;font-size:14px;min-width:20px;padding:0 4px}.bottom{bottom:15px}#hotbar{border-radius:0;border:4px solid #271a2a;gap:3px;background:#5f3837;padding:7px;box-shadow:inset 0 0 0 3px #c48e4e,0 4px #1d1928aa}.slot{border-radius:0;width:55px;height:56px;border:2px solid #201827;background:#34222f;box-shadow:inset 2px 2px #4f303c,inset -2px -2px #241928}.slot.active{border:3px solid #ffdc8c;background:#614435;box-shadow:inset 1px 1px #c08a4f,0 0 0 1px #241a29}.slot .key{top:-17px;left:2px;font-size:16px;color:#edd8a9;background:#2a2031;padding:0 4px;line-height:17px}.slot .count{font-size:19px;right:3px;bottom:0;text-shadow:2px 2px #1f1424,-1px -1px #1f1424;line-height:18px}.slot canvas{width:43px;height:43px}.shortcuts{gap:14px;margin-top:10px}.shortcuts button{font-size:16px;color:#f2e4bb;text-shadow:2px 2px #24422e}.shortcuts kbd{margin-right:3px}#targetLabel{font-size:18px;color:#ffeec1;background:#2e2434e6;border:2px solid #b38451;border-radius:0;bottom:157px;padding:5px 10px}#buildHint{font-size:17px;background:#302434f0;border:2px solid #b98b51;border-radius:0;margin-bottom:22px;max-width:620px}.toast{font-size:19px;border-radius:0;background:#302634ed;border:2px solid #c49558;box-shadow:0 3px #231b2d;max-width:510px;padding:7px 14px}#toasts{top:22%}#bossbar{top:89px;width:380px}#bossbar span{font-family:'Pixelify Sans';font-size:15px;color:#ffe6a6;text-shadow:2px 2px #221b2a}#bossbar>div{height:15px;border:3px solid #2e1e2c;border-radius:0;box-shadow:0 2px #ac7342}#bossbar i{background:#c24460;border-top:2px solid #ff8192;border-bottom:3px solid #792c4b}#modal{background:#19282460;backdrop-filter:none}.modal-panel{width:min(890px,94vw);max-height:86vh;position:relative;padding:24px 25px}.modal-panel header{border-bottom:2px solid #835335;padding-bottom:14px;align-items:center}.modal-panel h2{font-family:'Pixelify Sans';font-size:26px;font-weight:600;color:#ffe0a0}.modal-panel header button{border-radius:0;border:2px solid #271b2b;background:#925638;box-shadow:inset 0 2px #c28d56;width:33px;height:32px;font-size:22px}.modal-panel .section-label{font-size:10px}.note{font-size:18px;line-height:1.2;color:#d2bca0;margin-bottom:17px}.grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}.item-card{border-radius:0;border:2px solid #24192b;background:#342433;box-shadow:inset 1px 1px #644339;padding:9px;min-height:88px}.item-card:hover{background:#584037;border-color:#dfb572}.item-card b{font-size:18px;line-height:1}.item-card canvas{width:40px;height:40px;margin-right:6px}.item-card small{font-size:16px;line-height:1.1;color:#c1a886}.item-card .quantity{font-size:21px;right:6px;top:5px;color:#ffe8b1}.item-card .craft-cost{color:#d6b484}.tabs{gap:7px}.tabs button,.secondary{font-size:17px;border-radius:0;border:2px solid #241a2c;background:#503536;color:#dbbd93;box-shadow:inset 0 2px #79513d;padding:6px 12px}.tabs button.active,.secondary:hover{background:#a06a3e;color:#ffeec0;border-color:#e6be70}.controls p{font-size:19px;color:#e1c9a3}.controls kbd{min-width:54px;font-size:16px}.journal-entry{border-color:#684634}.journal-entry h3{font-family:'Pixelify Sans';font-size:15px;color:#f4ce88}.journal-entry p{font-size:18px;color:#cdb898;line-height:1.2}.journal-entry>span{font-size:25px}.housing span{border-radius:0;font-size:19px;background:#2e2332}.map-large{border-radius:0;border:4px solid #b88650}.victory h3{font-family:'Pixelify Sans';font-size:30px}.victory p{font-size:21px;color:#dfc59d}.backpack{display:grid;grid-template-columns:196px 1fr;gap:20px}.paper-doll{padding:16px;background:#271f30;border:3px solid #97663e;box-shadow:inset 0 0 0 2px #4e3330;text-align:center}.paper-doll .portrait{width:115px;height:133px;image-rendering:pixelated}.paper-doll h3{font-family:'Pixelify Sans';font-size:14px;color:#f4d29a;margin:4px 0 15px}.stats{font-size:18px;line-height:1.6;text-align:left;color:#caaf8f}.stats b{float:right;color:#ffdb8f}.bag-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;align-content:start}.bag-cell{aspect-ratio:1;border:2px solid #211726;background:#302131;box-shadow:inset 2px 2px #57373b;position:relative;display:grid;place-items:center;padding:0;min-width:0}.bag-cell canvas{width:85%;height:85%;image-rendering:pixelated}.bag-cell span{position:absolute;bottom:0;right:3px;font-size:20px;line-height:19px;color:#ffe5b2;text-shadow:2px 2px #211522}.bag-cell:hover{border-color:#f4c778;background:#5b4038}.bag-cell.empty{opacity:.6;pointer-events:none}.bag-cell[data-item]:focus{border-color:#f8d07b}.bag-tooltip{font-size:18px;min-height:26px;color:#f4d694;margin-top:10px}.gear-row{display:flex;gap:7px;justify-content:center;margin:10px 0}.gear-row .bag-cell{width:43px;height:43px}.recipe-book{display:grid;grid-template-columns:1.05fr 1fr;background:#e2bf80;border:4px solid #5b3430;box-shadow:inset 3px 0 #f9db9d,inset -4px 0 #b58b58,0 2px #211a28;color:#583d37;min-height:322px}.recipe-page{padding:18px;position:relative;background:linear-gradient(90deg,#d5b07a,#eed29a 10%,#edcf94 88%,#c19965)}.recipe-page+ .recipe-page{border-left:4px solid #9a704b;background:linear-gradient(90deg,#b98f5e,#eacf94 10%,#efd39b 93%,#c89f68)}.recipe-page .bag-grid{grid-template-columns:repeat(5,1fr);gap:6px}.recipe-page .bag-cell{background:#a9805744;border-color:#b48b60;box-shadow:inset 1px 1px #f4d99e}.recipe-page .bag-cell.active{border-color:#5c3c35;background:#c29a68;outline:2px solid #f9e5ad}.recipe-page .bag-cell.locked canvas{opacity:.4}.recipe-preview{display:block;width:86px;height:86px;image-rendering:pixelated;margin:4px auto 9px}.recipe-page h3{font-family:'Pixelify Sans';text-align:center;font-size:21px;color:#603f32;line-height:1.2;margin:6px 0 13px}.recipe-page .note{font-size:19px;color:#79583e;text-align:center}.ingredient{display:flex;align-items:center;gap:8px;font-size:20px;border-bottom:1px solid #b7906177;padding:5px 0}.ingredient canvas{width:28px;height:28px;image-rendering:pixelated}.ingredient b{margin-left:auto}.ingredient.missing b{color:#a34032}.recipe-page .primary{margin-top:18px;padding:10px;font-size:15px}.page-number{text-align:center;font-size:16px;color:#99754e;margin-top:12px}.recipe-page .station{font-size:17px;text-align:center;color:#845e40;margin:12px 0}.tooltip-hint{color:#94704d;font-size:16px;text-align:center}.screen-help{font-family:'Pixelify Sans';font-size:10px;color:#ead6ad}.build-grid .item-card{min-height:86px}#modalBody{scrollbar-color:#996b42 #352432}
@media(max-width:1100px){.quest{width:197px}.top-left{width:214px}.intro{left:5vw}.start{right:5vw}.slot{width:50px}.shortcuts{gap:9px}.shortcuts button{font-size:15px}.backpack{grid-template-columns:155px 1fr}.bag-grid{grid-template-columns:repeat(6,1fr)}}@media(max-height:740px){.quest{top:190px}.quest p{font-size:16px}.start{padding:22px 25px}.start label{margin-top:12px}.start h2{font-size:23px}.start p{margin-bottom:12px}.primary{margin-top:15px}.start-foot{font-size:11px}.intro h1{font-size:84px}.intro{top:18vh}.modal-panel{max-height:93vh;padding:20px}.location b{font-size:18px}}@media(max-width:760px){.quest{display:none}.top-left{width:180px}.location{top:145px}.top-right{transform:scale(.75)}.backpack{grid-template-columns:1fr}.paper-doll{display:none}.recipe-book{grid-template-columns:1fr}.recipe-page+ .recipe-page{border-left:0;border-top:3px solid #9a704b}.recipe-page .bag-grid{grid-template-columns:repeat(7,1fr)}.start{width:90vw}.intro h1{font-size:48px;margin-top:10px}.intro{top:3vh}.slot{width:39px;height:46px}.slot canvas{width:32px;height:32px}.shortcuts{gap:5px}.shortcuts button{font-size:14px}.bag-grid{grid-template-columns:repeat(6,1fr)}}