:root{--bg: #0d1420;--panel: rgba(16, 24, 38, .92);--panel-bd: rgba(120, 150, 180, .25);--text: #d8e4f0;--muted: #8ea3b8;--accent: #5fb0d8}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;overflow:hidden}#game-root{display:flex;height:100vh;width:100vw}#hud{width:320px;min-width:320px;background:var(--panel);border-right:1px solid var(--panel-bd);padding:10px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}#topbar{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--panel-bd);padding-bottom:6px}#dayinfo{font-weight:700;color:var(--accent)}#islandname{color:var(--muted);font-size:12px;text-align:right}#zoominfo{color:var(--muted);font-size:11px;margin-left:10px}#bars{display:flex;flex-direction:column;gap:4px}.bar{display:flex;align-items:center;gap:8px}.bar-label{width:52px;color:var(--muted);font-size:11px}.bar-track{flex:1;height:10px;background:#0006;border:1px solid rgba(255,255,255,.08);border-radius:3px;overflow:hidden}.bar-fill{height:100%;transition:width .2s linear}.bar-value{width:28px;text-align:right;font-variant-numeric:tabular-nums}#inventory,#boatpanel{font-size:12px;line-height:1.5;padding:6px 0;border-bottom:1px solid var(--panel-bd)}#inventory b,#boatpanel b{color:var(--text)}#quickslots{display:flex;gap:4px;flex-wrap:wrap}.quickslot{flex:1 1 44%;border:1px solid var(--panel-bd);border-radius:4px;padding:4px 6px;font-size:11px;display:flex;justify-content:space-between;color:var(--muted)}.quickslot b{color:var(--text)}#minimap{width:296px;height:160px;image-rendering:pixelated;border:1px solid var(--panel-bd);border-radius:4px;background:#081018;margin-top:auto}#canvas-wrap{flex:1;position:relative;background:#000;overflow:hidden}#game{position:absolute;top:0;left:0;image-rendering:pixelated}#tilepanel{background:#0000008c;border:1px solid var(--panel-bd);border-radius:3px;padding:3px 6px;margin-top:4px;font-size:11px;color:var(--text)}#tilepanel .tile-2{color:var(--muted)}#tilepanel .tile-3{color:var(--muted);font-size:10px}#tilepanel .tile-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#msglog{flex:1;min-height:100px;max-height:200px;overflow-y:auto;font-size:11px;color:var(--muted);margin-top:4px;padding:0 4px;overscroll-behavior:contain}#msglog div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#msglog>div{background:#0000008c;padding:2px 6px;border-radius:3px;font-size:11px}#craftmenu,#help,#over{position:absolute;top:12px;right:12px;max-width:380px;background:var(--panel);border:1px solid var(--panel-bd);border-radius:6px;padding:12px 14px;z-index:10}#craftmenu h3{margin:0 0 8px;color:var(--accent)}.craft-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:12px}.craft-row[data-craft]{cursor:pointer}.craft-row[data-craft]:hover{background:#ffffff14;border-radius:3px}.craft-row.have{cursor:default}.craft-row.no{color:var(--muted);opacity:.7}.craft-row.ready{color:#d7f0a8}.craft-row.have{color:#8ed08e}#help{max-height:70vh;overflow-y:auto;inset:auto 12px 12px auto;width:290px;max-width:290px;font-size:11px;padding:10px 12px}#help h3{margin:0 0 6px;color:var(--accent);font-size:13px}.help-grid{display:grid;grid-template-columns:max-content 1fr;gap:3px 10px;align-items:baseline}.help-grid span{color:var(--muted)}#help-close{float:right;margin-left:8px;background:#ffffff14;border:1px solid var(--panel-bd);border-radius:3px;color:var(--muted);font:inherit;font-size:10px;padding:1px 6px;cursor:pointer}#help-close:hover{color:var(--text);background:#ffffff29}#craftmenu{right:12px}#help h3{margin:0 0 8px;color:var(--accent)}#help kbd{background:#ffffff1a;border:1px solid var(--panel-bd);border-radius:3px;padding:0 4px;font-family:inherit}#over{top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;min-width:280px;z-index:20}#pause{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--panel);border:1px solid var(--panel-bd);border-radius:6px;padding:14px 22px;font-size:15px;text-align:center;pointer-events:none;z-index:15}#pause kbd{background:#ffffff1a;border:1px solid var(--panel-bd);border-radius:3px;padding:0 4px}#over h2{margin:0 0 10px;color:#e88}#over>div{margin:4px 0}#over.win h2{color:#88d4f8}.hidden{display:none!important}#btn-boat{margin-left:8px;padding:2px 10px;font:600 12px monospace;color:#fff;background:#2c6e9e;border:1px solid #1f4d6e;border-radius:4px;cursor:pointer}#btn-boat:hover{background:#35809f}