/* Brass, midnight enamel and linen. Pixel-sized rules stay crisp at game scale. */
body{background:#090f1b;background-image:radial-gradient(ellipse at 50% 30%,#223048 0,#101725 48%,#080d16 80%)}
#app{box-shadow:0 0 0 1px #76613d,0 0 0 4px #151d2a,0 18px 90px #000}
.btn{background:#24333e;border-color:#8b795b;color:#ede1c7;box-shadow:inset 0 1px #57636a,inset 0 -2px #101d29}
.btn.gold{background:#a67b43;border-color:#ecd092;color:#fff3d8;box-shadow:inset 0 1px #e5bb71,inset 0 -2px #66472e}
.btn:hover{filter:brightness(1.16)}
.btn:focus-visible,.place-tag:focus-visible{outline:2px solid #f2d493;outline-offset:2px}
#hud{background:linear-gradient(#101a29ed,#101a2999);border-bottom:1px solid #927044}
#goldBox{color:#ebcd83;background:#17232ce8;border:1px solid #8a704b;padding:1px 3px}
#hbar{background:linear-gradient(90deg,#1a2934 calc(100% - 34px),transparent 0);border-top:2px solid #b39761;border-bottom:2px solid #0b1420}
.bar{border-color:#a58960;background:#17202a}.bar i{background:#a74451}
.box,.vnbox{background:#172632f5;border-color:#ac9063;color:#efdfc2;box-shadow:inset 0 0 0 1px #344951,0 4px 12px #0009}
.scene .shead{background:linear-gradient(#142230f5,#142230ca);border-bottom:1px solid #a58960}
.scene .sfoot{background:linear-gradient(transparent,#0d182ce8);padding-bottom:8px}
.place-tag{position:absolute;transform:translate(-50%,-50%);min-width:51px;padding:4px 5px 3px;border:1px solid #c3a56c;background:#132432e8;color:#f1dfb7;font:9px Tiny5,monospace;text-align:center;cursor:pointer;pointer-events:auto;box-shadow:0 2px #080e17,inset 0 0 0 1px #314450;z-index:4}
.place-tag small{display:block;font-size:5px;color:#91b9b9;letter-spacing:.45px;margin-bottom:2px}
.place-tag span{display:block;font-size:6px;color:#d6b46d;margin-top:3px}
.place-tag:hover{background:#254453;border-color:#ffe1a1}
.ipanel{background:#14222ff5;border-top:2px solid #b69460}
.shopline{border-bottom:1px solid #394751;padding:5px 2px}
.shopline .ic{background:#0c1924;border-color:#7f6a48}
.tabs .tab.on{color:#f0d28b;border-color:#cca465;background:#324551}
.npcline{color:#d0c1a8}.rtitle{color:#f1d799;text-shadow:1px 1px #0b111e;background:#10202ccc;padding:3px 8px;border:1px solid #8c7856}
.merchant-figure{position:absolute;top:11%;left:32%;width:36%;height:15%;overflow:hidden;pointer-events:none}
.merchant-figure img{position:absolute;top:0;left:0;width:100%;height:auto;image-rendering:pixelated;animation:merchant-pose 2.4s steps(1,end) infinite}
.merchant-figure .pose-1{animation-delay:-1.2s}
@keyframes merchant-pose{0%,49.99%{visibility:visible}50%,100%{visibility:hidden}}
.logo .l1,.logo .l2{color:#ead3a0;text-shadow:1px 1px #795d3e,2px 2px #080d17}
/* Start screen uses the full canvas instead of a modal panel. */
#ui.title-mode #hud,#ui.title-mode #ebar,#ui.title-mode #combo,#ui.title-mode #bStrike,#ui.title-mode #hbar,#ui.title-mode #screen,#ui.title-mode #diceLbl{display:none!important}
#titlePage{position:absolute;inset:0;overflow:hidden;background:#091321;pointer-events:auto}
.title-art{position:absolute;inset:0;background-color:#07101b;background-image:linear-gradient(180deg,#07101b33 0%,#07101b08 36%,#07101b8a 71%,#07101b 100%),url('../assets/redesign/v2/title-kings-clash.png');background-position:center,center top;background-size:cover,100% auto;background-repeat:no-repeat;image-rendering:pixelated}
.title-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:16px 13px 17px;background:linear-gradient(transparent 26%,#07111a25 44%,#07111ae9 66%,#07111af8)}
.title-logo{text-align:center;margin-bottom:14px;text-shadow:2px 3px #07101b,0 0 13px #07101b}
.title-ace{display:block;width:59px;height:71px;object-fit:contain;margin:0 auto 4px;image-rendering:pixelated}
.title-logo strong{display:block;font:23px/1.12 'Press Start 2P',monospace;color:#f6dc9f;letter-spacing:1px}
.title-logo span{display:block;color:#d5bfa0;font-size:8px;margin-top:8px}
.title-actions{display:grid;gap:5px;width:100%}
.title-actions .btn{min-height:22px;font-size:9px;background:#1d3643e8;border:1px solid #a78e66}
.title-actions .btn.gold{background:#9c7040;border-color:#f0ca7c}
.title-note{text-align:center;color:#d2bda0;font-size:7px;min-height:16px;margin-top:9px}
.kingdom-art{position:relative;width:100%;aspect-ratio:2/3;overflow:hidden}
.kingdom-art>img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.map-region-pin{position:absolute;transform:translate(-50%,-50%);z-index:2;min-width:44px;min-height:16px;padding:2px 4px;background:#0e2030e8;border:1px solid #c4a36e;color:#f2e0bc;font:6px Tiny5,monospace;text-shadow:1px 1px #061019;box-shadow:0 1px 4px #000}
.map-region-pin:hover{background:#294250}
.town-map-pin{position:absolute;left:38%;top:79%;width:45px;height:34px;background:none;border:0;transform:translate(-50%,-50%);padding:0}
.town-map-pin img{width:28px;height:27px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(1px 2px 2px #000)}
.town-map-pin span{position:absolute;left:50%;top:23px;transform:translateX(-50%);white-space:nowrap;background:#0d1b27d9;color:#ffdd87;font-size:6px;padding:1px 2px}
.region-list{padding:4px 5px 12px;background:#10202a}
.region-list h3{color:#f1d18a;text-align:center;font-size:9px;margin:5px 0}
.region-node{display:flex;align-items:center;width:100%;min-height:18px;gap:5px;text-align:left;padding:2px 5px;margin:2px 0;border:1px solid #786747;background:#1b2b37;color:#e5d4b4;font-size:7px}
.region-node.open{border-color:#e5bb5c;background:#35515b;color:#fff1c9}
.region-node.locked{opacity:.6}
.region-node img{width:14px;height:14px;object-fit:contain;image-rendering:pixelated}
.rules-visual{display:grid;gap:5px;margin:8px 0;padding:7px;background:#0d1c29;border:1px solid #a48b60}
.rules-visual>div{display:flex;align-items:center;justify-content:space-between;min-height:24px;gap:6px;color:#f2d99a}
.rules-visual span{font-size:7px}.rules-visual b{font-size:7px}.rules-deck{font-size:12px;color:#f5e4bd}
.rules-cards{display:flex;gap:2px}.rules-cards img{width:16px;height:auto;image-rendering:pixelated}
.unknown-silhouette{width:36px;height:48px;display:grid;place-items:center;color:#6c8190;font-size:24px;background:#0b1722;border:1px solid #40505a;margin:auto}
#screen.chargen .cgopts{width:100%;box-sizing:border-box;overflow-x:hidden}
#screen.chargen .cgrow{width:100%;box-sizing:border-box}
#screen.chargen .cgl{flex:0 0 44px}
#screen.chargen .cga{flex:0 0 16px}
#screen.chargen .cgv,#screen.chargen #cgName{min-width:0;overflow:hidden;text-overflow:ellipsis}
#screen.chargen .cgrace{overflow-wrap:anywhere}

/* deck slot: canvas deck shows through the right end of the hero bar */
#deckLbl{position:absolute;z-index:3;font:5px Tiny5,monospace;color:#fff0ba;background:#102431;border-top:1px solid #e8bf67;padding:1px 2px;text-align:center;pointer-events:none;white-space:nowrap;transform:translateX(-50%)}
#deckLbl.hide{display:none}
#ui.town>#deckLbl,#ui.title-mode #deckLbl{display:none!important}
#combo{text-shadow:1px 1px 0 #0b1018}
#combo>span,#combo>b:first-child{background:#0d1822c8;padding:0 3px}
#combo .dim{color:#e8d6b0}
#screen .ibtn#tblExit{position:absolute;left:4px;top:40px;z-index:4;width:16px;height:16px;font-size:8px;line-height:14px}
/* illustrated combination lists in the rules */
.hand-gallery{display:grid;gap:4px;margin:4px 0 8px}
.hg-row{background:#0d1c29;border:1px solid #4d5a5e;padding:3px 4px 4px}
.hg-head{display:flex;justify-content:space-between;align-items:baseline;font-size:7px;color:#f2d99a;margin-bottom:2px}
.hg-head span{color:#e8c052}
.hg-cards{display:flex;gap:2px;margin:2px 0}
.hg-cards img{width:20px;height:auto;image-rendering:pixelated}
.hg-cards img.off{filter:brightness(.45) saturate(.4)}
.hg-row small{display:block;font-size:6px;color:#c9bca4;line-height:1.3}
#dlg .vnbox{background:#172632}
/* scene editor (index.html?edit) */
#sceneEditor{position:fixed;left:8px;top:8px;z-index:1000;width:230px;padding:8px;background:#0e1b26f2;border:1px solid #c4a36e;color:#f2e0bc;font:11px/1.35 Tiny5,monospace;box-shadow:0 4px 16px #000}
#sceneEditor b{display:block;color:#ffd887;margin-bottom:3px}
#sceneEditor small{display:block;color:#a9b8b8;margin-bottom:5px}
#sceneEditor #seInfo{padding:4px;background:#07111a;margin-bottom:6px;word-break:break-word}
#sceneEditor .se-row{display:flex;gap:4px}
#sceneEditor button{flex:1;padding:4px;font:11px Tiny5,monospace;color:#fff3d8;background:#a67b43;border:1px solid #ecd092;cursor:pointer}
#sceneEditor button+button{background:#24333e;border-color:#8b795b}
#sceneEditor #seMsg{margin-top:5px;color:#ffb48a;min-height:1em}
.place-tag.edit-sel{outline:2px solid #ffd040;outline-offset:1px}
#sceneEditor .se-go{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:6px}
#sceneEditor .se-go button{background:#24333e;border-color:#8b795b}
#screen.table .buffs{display:none}
.title-logo strong em{display:block;font:12px/1.2 'Press Start 2P',monospace;font-style:normal;letter-spacing:2px;color:#e8c47e;margin-bottom:4px}
body.scene-edit .merchant-figure{pointer-events:auto;cursor:move}
/* region states on the kingdom map */
.map-region-pin{display:flex;align-items:center;justify-content:center;gap:2px}
.map-region-pin.open{background:#0f3a2ae8;border-color:#e8c870;color:#fff0c8;box-shadow:0 0 0 1px #0a1f16,0 0 6px #e8c87088}
.map-region-pin.done{background:#1d2f45e8;border-color:#8fb7d8;color:#d8e8f4}
.map-region-pin.locked{background:#1a1418e8;border-color:#5a4c44;color:#8a7e76;filter:saturate(.4)}
.map-region-pin .rp-lock,.map-region-pin .rp-done{font-style:normal;font-size:6px;line-height:1}
.map-region-pin .rp-done{color:#8fe08a}

/* Bathhouse memory cards: art stays full-bleed; the frame is UI, not baked into the image. */
#modal.memory-gallery .panel,#modal.memory-view .panel,#modal.memory-reveal .panel{background:linear-gradient(135deg,#182b32,#101924 60%,#241821);border-color:#b99655;box-shadow:inset 0 0 0 2px #3b291d,0 8px 24px #000b}
.memory-count,.memory-position,.memory-note{text-align:center;color:#e6c985;font-size:7px;margin:3px 0 6px!important}
.memory-top{display:flex;align-items:center;justify-content:center;position:relative;min-height:18px}
.memory-top h2{margin:2px 16px 6px!important}
.memory-top .btn{position:absolute;right:0;top:0;flex:none;width:15px;min-height:15px;padding:0;font-size:11px}
.memory-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin:6px 0}
.memory-slot{position:relative;display:block;width:100%;aspect-ratio:2/3;padding:2px;overflow:hidden;background:#10212a;border:2px solid #ad8550;box-shadow:inset 0 0 0 1px #f0cc78,1px 2px 0 #080d12;color:#f7deb0}
.memory-slot img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;image-rendering:pixelated}
.memory-slot span{position:absolute;left:2px;right:2px;bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#0d1723d9;padding:2px 1px;color:#fff0c4;font-size:5px;text-shadow:1px 1px #000}
.memory-slot.locked{display:grid;place-items:center;border-color:#564b42;background:radial-gradient(circle at 50% 37%,#34484c 0 15%,transparent 16%),linear-gradient(145deg,#172c35,#11151f 70%,#271e24)}
.memory-slot.locked i{font:24px Georgia,serif;color:#746853;font-style:normal;text-shadow:1px 1px #090e15}
.memory-hint{text-align:center;font-size:6px;color:#b6aaa0;margin:6px 1px!important}
.memory-exit{width:100%}
.memory-card{position:relative;width:min(100%,156px);aspect-ratio:2/3;margin:4px auto 6px;padding:4px;background:#382618;border:2px solid #bd9859;box-shadow:inset 0 0 0 2px #edca7b,inset 0 0 0 4px #2a1a15,0 4px 10px #0009}
.memory-card img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;border:1px solid #271e19}
.memory-name{position:absolute;left:8px;right:8px;bottom:8px;padding:3px 1px;text-align:center;color:#ffe3a2;font-size:8px;text-shadow:1px 1px #000;background:linear-gradient(transparent,#07151eee 35%)}
#modal.memory-view .row,#modal.memory-reveal .row{gap:3px}

/* Windows (bestiary, journal, codex, rules, gear…): one pixel frame in the brass-and-midnight
   palette of the dialogue box — hard 1px rings, notched corners, a hard drop shadow, no blur.
   No scrollbars anywhere: wheel on desktop, swipe on phones. */
#ui *{scrollbar-width:none}
#ui *::-webkit-scrollbar{display:none}
#modal{background:#050a12d8}
#modal .panel{background:#14222f;border:1px solid #070d15;box-shadow:inset 0 0 0 1px #b39761,inset 0 0 0 2px #070d15,inset 0 0 0 3px #2c3f4a,0 3px 0 #03060b;
  clip-path:polygon(0 2px,2px 2px,2px 0,calc(100% - 2px) 0,calc(100% - 2px) 2px,100% 2px,100% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,2px calc(100% - 2px),0 calc(100% - 2px));
  padding:8px 8px 7px;color:#efdfc2;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#modal .panel h2{color:#f0d28b;text-shadow:1px 1px 0 #070d15;padding-bottom:4px;border-bottom:1px solid #3b4d57;box-shadow:0 1px 0 #070d15}
#modal .panel h3{color:#e7cf96;border-bottom:1px dotted #5a6a70}
#modal .panel img{image-rendering:pixelated}
#modal .panel .dim{color:#98a8ac}
#modal .beast,#modal .quest,#modal .codex-entry,#modal .panel>.setbox,#modal .aset{background:#0d1c29;border:1px solid #070d15;box-shadow:inset 0 0 0 1px #3f525a}
#modal .beast{padding:4px}
#modal .bname,#modal .quest h3,#modal .codex-entry h3{color:#f0d28b;text-shadow:1px 1px 0 #070d15}
#modal .bimgs figure{background:#0a1520;border:1px solid #2c3f4a;padding:2px 1px}
#modal .quest.ready{box-shadow:inset 0 0 0 1px #6fbf6a}
#modal .codex-cat{color:#8fc4cc}
#modal .slot{background:#0d1c29;border-color:#070d15}
#modal .stats.two li,#modal .panel>.stats li{border-color:#2c3f4a}