html,body{margin:0;height:100%;overflow:hidden;background:#1c3a44;font-family:"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;color:#f6ead0;user-select:none;-webkit-user-select:none}
canvas#game{position:fixed;left:0;top:0;image-rendering:pixelated;image-rendering:crisp-edges;display:block;touch-action:none}
img,canvas{image-rendering:pixelated}
#ui{position:fixed;inset:0;pointer-events:none}
#ui *{box-sizing:border-box}
button{font-family:inherit;cursor:pointer}
/* loading */
#loading{position:fixed;inset:0;background:#143842;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;gap:18px}
#loading h1{font-size:34px;margin:0;letter-spacing:1px;text-shadow:0 3px 0 #0a1a20;color:#ffe6a0;text-align:center}
#loading .bar{width:min(420px,80vw);height:22px;border:3px solid #2b1d2e;background:#0e2229;border-radius:4px;overflow:hidden}
#loading .bar i{display:block;height:100%;width:0;background:linear-gradient(#ffd45a,#e08a2a)}
#loading p{margin:0;opacity:.8}
/* overlays */
.overlay{position:absolute;inset:0;background:rgba(10,18,24,.55);display:none;align-items:center;justify-content:center;pointer-events:auto;z-index:20}
.overlay.show{display:flex}
.win{position:relative;width:min(940px,95vw);max-height:92vh;display:flex;flex-direction:column;color:#f6ead0;font-size:16px;line-height:1.35}
.win.wide{width:min(980px,97vw)}.win.narrow{width:min(520px,94vw)}.win.mid{width:min(720px,95vw)}
.win h2{margin:0 0 6px;font-size:26px;text-align:center;color:#ffe6a0;text-shadow:0 2px 0 #1a1020}
.win .body{overflow:auto;padding:2px 6px;max-height:calc(92vh - 130px)}
.win .body::-webkit-scrollbar{width:10px}.win .body::-webkit-scrollbar-thumb{background:#8a7a4a;border-radius:4px}
.xbtn{position:absolute;right:-6px;top:-6px;width:44px;height:44px;border:none;background:url(../assets/UI%20Elements/UI%20Elements/Buttons/SmallRedRoundButton_Regular.png) center/contain no-repeat;cursor:pointer;z-index:3;filter:drop-shadow(0 2px 0 #0008)}
.xbtn::after{content:"";position:absolute;inset:11px;background:url(../assets/UI%20Elements/UI%20Elements/Icons/Icon_09.png) center/contain no-repeat}
.xbtn:active{transform:translateY(2px)}
.row{display:flex;gap:12px}.col{display:flex;flex-direction:column;gap:8px}.grow{flex:1;min-width:0}.center{justify-content:center;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:#fff;font-weight:bold;font-size:17px;text-shadow:0 2px 0 #12303a;border-style:solid;background-color:transparent;padding:0 14px;min-height:0;line-height:1.1;image-rendering:pixelated}
.btn:hover{filter:brightness(1.12)}.btn[disabled]{filter:grayscale(.8) brightness(.8);cursor:not-allowed}
.btn.block{display:flex;width:100%}
.mini{border:2px solid #1a1020;border-radius:5px;background:linear-gradient(#52b4c0,#3a8e9c);color:#fff;font-weight:bold;font-size:14px;padding:5px 12px;text-shadow:0 1px 0 #12303a;box-shadow:inset 0 2px 0 #9ae8f0,0 2px 0 #0008}
.mini:hover{filter:brightness(1.12)}.mini:active{transform:translateY(1px)}
.mini.gold{background:linear-gradient(#f0c050,#c08a22);box-shadow:inset 0 2px 0 #ffe9a0,0 2px 0 #0008;color:#2b1a05;text-shadow:none}
.mini.red{background:linear-gradient(#ea6a5a,#b8403a);box-shadow:inset 0 2px 0 #ffb0a0,0 2px 0 #0008}
.mini[disabled]{filter:grayscale(.9) brightness(.7);cursor:default}
.tabs{display:flex;gap:6px;justify-content:center;margin:6px 0 10px;flex-wrap:wrap}
.tab{border:2px solid #1a1020;border-radius:6px 6px 0 0;background:#3a3350;color:#d8caa0;font-weight:bold;padding:6px 16px;font-size:15px}
.tab.on{background:#d8b45a;color:#2b1a05}
.panelbox{background:rgba(10,12,22,.45);border:2px solid #5a4a30;border-radius:6px;padding:10px}
.slot{width:64px;height:64px;border:3px solid #3a2f48;border-radius:6px;background:#241d33;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer}
.slot.sel{border-color:#ffd45a;box-shadow:0 0 0 2px #ffd45a55}
.slot img,.slot canvas{width:44px;height:44px;image-rendering:pixelated}
.slot .q{position:absolute;right:3px;bottom:1px;font-size:14px;font-weight:bold;text-shadow:0 0 3px #000,0 0 3px #000}
.grid{display:grid;grid-template-columns:repeat(6,64px);gap:8px;justify-content:center}
.muted{color:#b8aa88}.good{color:#8aff9a}.bad{color:#ff8a7a}.gold{color:#ffd45a}
.item-ico{width:32px;height:32px;vertical-align:middle;image-rendering:pixelated}
.listrow{display:flex;align-items:center;gap:10px;padding:7px 9px;border:2px solid #3a2f48;border-radius:6px;background:#201a2e;cursor:pointer;margin-bottom:6px}
.listrow:hover{border-color:#8a7a4a}.listrow.sel{border-color:#ffd45a;background:#2c2440}
.listrow .nm{font-weight:bold}.listrow .sub{font-size:13px;color:#b8aa88}
.pill{display:inline-block;padding:1px 8px;border-radius:10px;font-size:12px;font-weight:bold;background:#3a3350;color:#d8caa0;border:1px solid #1a1020}
.pill.own{background:#2a6a46;color:#d8ffe0}.pill.eq{background:#c89a2a;color:#2b1a05}.pill.lock{background:#6a2a2a;color:#ffd0c8}
input[type=range]{width:200px;accent-color:#e0b040}
select{background:#2a2438;color:#f6ead0;border:2px solid #5a4a30;border-radius:4px;padding:4px;font-family:inherit;font-size:15px}
table.keys{border-collapse:collapse;width:100%}table.keys td{padding:5px 10px;border-bottom:1px solid #3a3350}table.keys td:first-child{font-weight:bold;color:#ffd45a;white-space:nowrap;width:42%}
/* dialogue */
#dlg{position:absolute;left:0;right:0;bottom:3vh;display:none;justify-content:center;pointer-events:auto;z-index:25}
#dlg.show{display:flex}
#dlg .box{width:min(860px,95vw);min-height:170px;display:flex;gap:16px;color:#3a2410;font-size:18px;position:relative}
#dlg .av{width:112px;height:112px;flex:none;background:#0003;border-radius:8px;border:3px solid #6a4a2a;image-rendering:pixelated;align-self:flex-start}
#dlg .nm{font-weight:bold;font-size:20px;color:#7a2a10;margin-bottom:4px}
#dlg .tx{white-space:pre-wrap;min-height:70px}
#dlg .acts{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;align-items:center}
#dlg .rw{font-size:14px;color:#2a5a1a;margin-top:6px;font-weight:bold}
/* toasts / banner */
#toasts{position:absolute;right:12px;top:200px;width:min(340px,50vw);display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.toast{background:rgba(20,14,30,.88);border:2px solid #8a7a4a;border-radius:6px;padding:6px 12px;font-size:15px;animation:tin .25s ease-out;max-width:100%;box-shadow:0 2px 0 #0008}
.toast.quest{border-color:#ffd45a;color:#fff0b0}.toast.warn{border-color:#ff6a5a;color:#ffd0c8}.toast.item{border-color:#7ad08a}.toast.progress{border-color:#7ac0ff}.toast.tip{border-color:#c0a0ff;color:#efe0ff}
.toast.out{opacity:0;transition:opacity .5s}
@keyframes tin{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
#banner{position:absolute;left:50%;top:70px;transform:translateX(-50%);display:none;text-align:center;pointer-events:none}
#banner.show{display:block;animation:bn 4.2s ease-in-out forwards}
#banner .rib{display:inline-block;border-style:solid;color:#fff;font-size:30px;font-weight:bold;text-shadow:0 3px 0 #0008;padding:16px 10px}
#banner .sub{margin-top:6px;font-size:16px;color:#fff;text-shadow:0 2px 3px #000}
@keyframes bn{0%{opacity:0;transform:translate(-50%,-20px)}12%{opacity:1;transform:translate(-50%,0)}80%{opacity:1}100%{opacity:0}}
/* title */
#title{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;pointer-events:auto;z-index:15;background:radial-gradient(ellipse at center,rgba(0,0,0,0) 30%,rgba(5,20,30,.55) 100%)}
#title.show{display:flex}
#title .logo{text-align:center;margin-bottom:18px}
#title .logo .t1{font-size:min(60px,9vw);font-weight:bold;color:#ffe6a0;text-shadow:0 4px 0 #2b1a05,0 0 18px #000a;letter-spacing:2px;line-height:1}
#title .logo .t2{font-size:min(24px,4.4vw);color:#fff;text-shadow:0 2px 0 #12303a,0 0 8px #000;margin-top:6px;letter-spacing:3px}
#title .menu{display:flex;flex-direction:column;gap:2px;width:min(300px,80vw)}
#title .ver{position:absolute;bottom:8px;left:0;right:0;text-align:center;font-size:13px;opacity:.75;text-shadow:0 1px 2px #000}
/* credits roll */
.roll{height:260px;overflow:hidden;position:relative;text-align:center}
.roll .in{animation:roll 30s linear infinite;padding-top:240px}
@keyframes roll{to{transform:translateY(-120%)}}
/* touch */
#touch{position:absolute;inset:0;display:none;pointer-events:none;z-index:12}
#touch.show{display:block}
#touch .joy{position:absolute;left:22px;bottom:26px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.12);border:3px solid rgba(255,255,255,.35);pointer-events:auto;touch-action:none}
#touch .joy i{position:absolute;left:35px;top:35px;width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.4)}
#touch .tb{position:absolute;width:64px;height:64px;border-radius:50%;border:3px solid rgba(255,255,255,.5);background:rgba(40,60,90,.55);color:#fff;font-weight:bold;font-size:15px;pointer-events:auto;touch-action:none;display:flex;align-items:center;justify-content:center}
#touch .tb.sm{width:46px;height:46px;font-size:13px}
.bossname{text-shadow:0 2px 0 #000}
@media (max-width:700px){.win{font-size:14px}.grid{grid-template-columns:repeat(4,56px)}.slot{width:56px;height:56px}#dlg .box{font-size:15px}#dlg .av{width:72px;height:72px}}