/* ===== Free Nassau v4: chart table look. Loaded after the legacy styles in index.html, overrides them. ===== */
:root{--ink:#2a1a0c;--cream:#f1e2bd;--cream2:#d9c493;--brass:#c9a24a;--brass2:#7a5a1e;--oxb:#8e2418;--wal:#2b1809;--teal:#4a7a80;
 --paper:url(img/chart/paper.webp);--leather:url(img/chart/leather.webp);--brassgrad:linear-gradient(#e8cc7c,#b08a36 55%,#7a5a1e)}
body{background:#0e0703 url(img/chart/table.webp) center/cover fixed}
#light{position:fixed;inset:0;z-index:45;pointer-events:none;
 background:radial-gradient(ellipse 70% 38% at 6% 2%,rgba(255,170,70,.20),rgba(255,140,40,.05) 60%,transparent 80%),
 radial-gradient(ellipse 85% 70% at 50% 46%,transparent 52%,rgba(0,0,0,.62) 100%);animation:flick 3.4s ease-in-out infinite}
@keyframes flick{0%,100%{opacity:1}30%{opacity:.93}55%{opacity:1}75%{opacity:.96}}
#app{background:transparent;max-width:480px;gap:5px;padding:max(6px,env(safe-area-inset-top)) 8px max(6px,env(safe-area-inset-bottom));box-shadow:none}
#app::before{display:none}
#app>.scr{background:transparent;box-shadow:none;border:0;padding:0}
#app>.scr.mapscr{background:url(img/chart/chart.webp) center/cover,#d6b97c;box-shadow:0 10px 22px rgba(0,0,0,.75),inset 0 0 40px rgba(70,35,8,.65)}
h1,h2,h3{color:var(--cream);text-shadow:0 2px 0 #000}
h1{color:#e8c76a;text-shadow:0 2px 0 #3a1608,0 0 18px rgba(255,160,50,.4)}
h2{font-size:25px;text-align:center;border:0;border-image:none;margin:2px 0;letter-spacing:1px;color:var(--cream);text-shadow:0 2px 0 #000,0 0 16px rgba(255,170,60,.35)}
h2::after{content:'';display:block;height:7px;margin:1px auto 0;width:70%;background:linear-gradient(90deg,transparent,var(--brass) 20%,var(--brass) 80%,transparent) center/100% 1px no-repeat,radial-gradient(circle,var(--brass) 0 2px,transparent 3px) center/7px 7px no-repeat}
h3{font-size:18px;color:#e8c76a}
.ic{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em;flex:none}
/* ---- buttons: brass-ringed leather ---- */
button{font-family:'IM Fell English SC',Georgia,serif;letter-spacing:.4px;color:var(--cream);min-height:44px;padding:6px 14px;margin:2px;border-radius:7px;
 background:var(--leather),linear-gradient(#4a2a16,#2a170b);background-blend-mode:multiply;border:1px solid #0e0703;
 box-shadow:inset 0 0 0 2px #1a0d05,inset 0 0 0 3px rgba(201,162,74,.75),0 3px 6px rgba(0,0,0,.55);text-shadow:0 1px 0 #000}
button:active{transform:translateY(1px);box-shadow:inset 0 0 0 2px #1a0d05,inset 0 0 0 3px #e8cc7c,0 1px 2px rgba(0,0,0,.6)}
button:disabled{opacity:.4;filter:grayscale(.7)}
button.gold,button.endturn{color:#2a1608;text-shadow:0 1px 0 #f6e2a2;background:linear-gradient(#f0d68a,#c39a45 55%,#8e6a26);border:1px solid #3a2208;
 box-shadow:inset 0 0 0 2px rgba(255,240,190,.55),inset 0 0 0 3px #6e4f1c,0 3px 6px rgba(0,0,0,.6)}
button.mini{min-height:30px;font-size:13px;padding:1px 9px}
.msg{background:var(--paper);background-size:180px;border:1px solid #3a2410;border-left:4px solid var(--oxb);color:var(--ink);box-shadow:0 2px 6px rgba(0,0,0,.5)}
.small{opacity:1}
/* ---- HUD plate ---- */
.menubtn{top:max(7px,env(safe-area-inset-top));right:10px;width:44px;min-height:60px;height:60px;padding:0;margin:0;border-radius:9px;background:none;border:0;box-shadow:none;filter:drop-shadow(0 3px 4px #000)}
.menubtn:active{transform:scale(.96)}
.book-ic{width:44px;height:44px;display:block;margin:auto}
.hud{display:grid;grid-template-columns:50px 1fr;grid-template-rows:auto auto;gap:3px 8px;align-items:center;margin-right:50px;padding:5px 8px 5px 5px;border-radius:12px 8px 8px 12px;border:1px solid #0b0502;
 background:var(--leather),linear-gradient(#3a2112,#22120a);background-blend-mode:multiply;outline:1px dashed rgba(224,190,120,.45);outline-offset:-5px;
 box-shadow:0 5px 12px rgba(0,0,0,.7),inset 0 0 14px rgba(0,0,0,.65);color:var(--cream)}
.hud::after{display:none}
.hud .medal{grid-row:span 2;width:50px;height:50px;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,#f0d68a,#8e6a26,#e8cc7c,#6e4f1c,#f0d68a);box-shadow:0 2px 5px #000,inset 0 0 3px #000}
.medal img,.hud .portrait{width:100%;height:100%;border-radius:50%;object-fit:cover;border:1px solid #1a0d05;display:block;box-shadow:none}
.gauges{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.gauge .gi{width:15px;font-size:0;color:var(--cream2)}.gauge .gi .ic{width:15px;height:15px;stroke-width:1.9}
.gb{height:16px;border-radius:8px;background:#0b0502;border:1px solid #8a6a24;box-shadow:inset 0 2px 3px #000}
.gb i{background:linear-gradient(#d4503c,#82180f)}
.g-hull .gb i{background:linear-gradient(#c89a56,#7a4f1f)}.g-crew .gb i{background:linear-gradient(#6aa3a8,#2f5f66)}
.gb span{font-size:11px;line-height:14px;color:#fff6dc;text-shadow:0 1px 2px #000}
.g-hp .gi{color:#d9503c}.g-hull .gi{color:#d2a966}.g-crew .gi{color:#7fb6ba}
.strip{display:flex;flex-wrap:nowrap;align-items:center;gap:3px 7px;font-size:13px;grid-column:2}
.strip .ic{width:15px;height:15px;margin-right:1px}
.coin{display:inline-flex;align-items:center;color:#f2d479;font-weight:bold;background:rgba(0,0,0,.4);padding:1px 7px 1px 4px;border-radius:10px;border:1px solid rgba(201,162,74,.5)}
.cg{display:inline-flex;align-items:center;color:var(--cream2)}.strip .cg.low{color:#ff9d8a}
.offs{margin-left:auto;display:flex;gap:3px}
.ofc{width:24px;height:24px;border-radius:50%;padding:1.5px;background:var(--brassgrad);border:0;box-shadow:0 1px 3px #000;display:inline-flex;align-items:center;justify-content:center;position:relative;color:#3a2410;cursor:pointer}
.ofc.empty{opacity:.45;filter:grayscale(1)}.ofc.empty .ic{width:13px;height:13px}.ofc.inj{background:linear-gradient(#a33,#5a1410)}.ofc.on{box-shadow:0 0 6px rgba(240,200,100,.6),0 1px 3px #000}
.ofc img{width:100%;height:100%;border-radius:50%;object-fit:cover}
/* ---- chart surface ---- */
.chartbg,.sea,.mapscr{background:linear-gradient(rgba(60,30,8,.0),rgba(60,30,8,.0)),url(img/chart/chart.webp) center/cover,#d6b97c}
.sea{position:relative;flex:1 1 auto;min-height:0;padding:0;border-radius:6px;border:0;overflow:hidden;
 box-shadow:0 8px 20px rgba(0,0,0,.75),inset 0 0 0 1px rgba(60,35,10,.7),inset 0 0 34px rgba(70,35,8,.6);color:var(--ink);display:block}
#app[data-screen=combat]>.scr{gap:5px;padding:0}#app[data-screen=combat] .sea{flex:1 1 auto;display:block}
.topline{position:absolute;left:6px;right:6px;top:6px;z-index:5;display:flex;align-items:center;gap:6px;flex-wrap:nowrap;font-size:13px}
.phases{display:flex;gap:3px;padding:2px;border-radius:12px;background:rgba(30,16,6,.55)}
.phases span{width:30px;height:26px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--cream2);opacity:.45}
.phases span .ic{width:17px;height:17px}.phases span.on{opacity:1;background:var(--brassgrad);color:#2a1608;box-shadow:0 0 8px rgba(240,200,100,.7)}
.wx,.tag{background:rgba(30,16,6,.6);color:var(--cream);border:1px solid rgba(201,162,74,.5);border-radius:12px;padding:2px 9px 2px 7px;font-size:13px;white-space:nowrap;display:inline-flex;align-items:center;gap:3px}
.wx .ic,.tag .ic{width:15px;height:15px}
.topline .side{margin-left:auto;min-height:30px;padding:0 12px;font-size:14px;margin-top:0;margin-bottom:0}
.ink{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.ink path{fill:#17100a;opacity:.86;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));animation:swoosh .7s ease-out backwards;transform-origin:50% 40%}
.ink path.red,.ink.red path{fill:#8a1a10}
@keyframes swoosh{from{opacity:0;transform:scale(.85)}}
.ink.brace path{fill:none;stroke:#2a4f58;stroke-width:3;stroke-dasharray:3 4;opacity:.8}
.enemy{position:absolute;right:8px;top:42px;width:63%;z-index:3;margin:0}
.eart,#app[data-screen=combat] .eart{width:100%!important}
.painted{border-radius:3px;overflow:hidden;transform:rotate(1.2deg);box-shadow:0 0 0 3px #f1e1b8,0 0 0 4px #3a2410,0 0 0 6px var(--brass2),0 8px 14px rgba(0,0,0,.65)}
.painted img{filter:sepia(.28) saturate(.85) contrast(1.05)}
.painted::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 22px rgba(60,30,6,.55);pointer-events:none}
.duelport{width:min(34vw,128px)}
.shipsvg{filter:sepia(.55) saturate(.8) brightness(.82) contrast(1.15) drop-shadow(3px 6px 4px rgba(30,15,4,.55))}
.eplate{position:relative;margin:-14px 6px 0;padding:3px 8px 5px;z-index:5;border-radius:4px;background:var(--paper) center/160px,#e8d3a0;border:1px solid #3a2410;box-shadow:0 0 0 2px rgba(201,162,74,.65),0 5px 9px rgba(0,0,0,.55);color:var(--ink)}
.ename{font-size:19px;line-height:1.05;text-shadow:none;color:var(--ink)}.ename small{font-size:12px}
.estats{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin:1px 0 0}.estats .gauge{flex:1 1 120px;width:auto}
.estats .tag{background:rgba(42,26,12,.8)}
.eplate .gauge .gi{color:#5a3a18}.eplate .g-hp .gi{color:#a02a1a}
.intent{position:absolute;left:8px;top:48px;z-index:6;width:62px;padding:5px 2px 4px;flex-direction:column;gap:0;border-radius:50% 50% 46% 46%/42% 42% 58% 58%;text-align:center;
 background:radial-gradient(circle at 35% 25%,#f1d98e,#c39a45 60%,#8a6420);border:2px solid #3a2208;box-shadow:inset 0 0 0 2px rgba(255,240,190,.5),0 5px 10px rgba(0,0,0,.65);animation:none;color:#2a1608;display:flex;align-items:center}
.intent .ii .ic{width:26px;height:26px;stroke-width:1.9}.intent b{font:bold 26px/1 Georgia,serif;color:#7a1710;text-shadow:0 1px 0 #f6e2a2}
.intent .tg2{display:flex;gap:2px;font-size:0;color:#4a2a10}.intent .tg2 .ic{width:14px;height:14px}
.intent.t0{background:radial-gradient(circle at 35% 25%,#bcd8d6,#6c9ea2 60%,#3a6468)}.intent.t0 b{color:#173c42;text-shadow:none}
.intent.t3,.intent.t4{animation:throb 1.1s ease-in-out infinite;border-color:#4a0f08}.intent.t4{background:radial-gradient(circle at 35% 25%,#e8a58a,#b8472e 60%,#7a1d10)}
.myship{position:absolute;left:4px;bottom:14px;width:40%;z-index:3;text-align:center}
.myship .shipsvg{width:100%;transform:scaleX(1);filter:drop-shadow(2px 4px 3px rgba(30,15,4,.55))}.shipsvg.mini{filter:drop-shadow(2px 4px 3px rgba(30,15,4,.55))}.myship .shipsvg.flip{transform:scaleX(1)}
.mycap{display:none}
.boardrow{position:absolute;left:0;right:0;bottom:6px;z-index:7;display:flex;justify-content:center;align-items:center;gap:6px}
.boardrow .small{background:rgba(30,16,6,.7);color:var(--cream);border-radius:8px;padding:1px 6px;max-width:140px;font-size:11.5px}
.boardrow button{margin:0;min-height:36px}
.bob{animation:none}.bob .painted{animation:bob 3.4s ease-in-out infinite}
/* ---- energy / block row ---- */
.mine{display:flex;align-items:center;gap:8px;margin:2px 4px 0;padding:0}
.pips{display:flex;gap:5px;padding:4px 8px;border-radius:14px;background:rgba(0,0,0,.5);border:1px solid rgba(201,162,74,.4)}
.pips i{width:17px;height:17px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#3a2a14,#120a05);border:2px solid #6e4f1c;box-shadow:inset 0 1px 2px #000}
.pips i.on{background:radial-gradient(circle at 38% 30%,#fff3b0,#f0b93c 55%,#a8701a);border-color:#f0d68a;box-shadow:0 0 9px rgba(255,200,70,.9)}
.mine .tag.big{font-size:15px;padding:3px 11px 3px 8px}.mflex{flex:1}
/* ---- card tray ---- */
.tray{flex:none;border-radius:14px;padding:6px 2px 8px;background:var(--leather),#1f1008;background-blend-mode:multiply;border:1px solid #0b0502;
 box-shadow:inset 0 4px 12px rgba(0,0,0,.85),inset 0 0 0 2px rgba(120,80,40,.45),0 0 0 1px rgba(201,162,74,.28),0 6px 12px rgba(0,0,0,.6)}
.hand{padding-top:14px;margin:0;margin-bottom:0}
.log{background:rgba(0,0,0,.38);color:#dccaa0;border-radius:6px;font-size:12.5px;min-height:34px;border:1px solid rgba(201,162,74,.2)}
.log.open{position:fixed;left:10px;right:10px;bottom:70px;z-index:40;background:#1a0e06;max-height:50vh}
/* ---- cards ---- */
.card{background:var(--paper) center/150px,#e8d3a0;background-blend-mode:normal;border:1px solid #2a180a;border-radius:6px;color:var(--ink);
 box-shadow:0 0 0 1px rgba(201,162,74,.8),0 4px 7px rgba(0,0,0,.65),inset 0 0 14px rgba(110,70,20,.35)}
.card::after{inset:3px;border:1px solid rgba(90,60,25,.4);outline:0}
.card.tagS,.card.tagC,.card.tagK{background:var(--paper) center/150px,#e8d3a0;border-color:#2a180a}
.chead{background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 30%,transparent),transparent);border-bottom:1px solid rgba(60,35,10,.35);padding-left:16px}
.card .cost{position:absolute;top:-6px;left:-6px;z-index:3;width:23px;height:23px;font:bold 14px Georgia,serif;color:#2a1608;border:2px solid #3a2208;background:radial-gradient(circle at 35% 30%,#fff0b0,#d3a948 55%,#8a6420);box-shadow:0 2px 3px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,245,200,.7)}
.hand .card .cost{width:21px;height:21px;font-size:13px;top:-7px;left:-5px}
.card.big .cost{width:32px;height:32px;font-size:19px;top:-8px;left:-8px}
.hand .chead{padding-left:14px}
.card .nm{color:#1f1208;font-weight:bold}
.card .rule{background:linear-gradient(90deg,transparent,#5a3a18,transparent)}
.card.sel{box-shadow:0 0 0 2px #f6d56a,0 0 20px 5px rgba(255,200,70,.85),0 10px 16px rgba(0,0,0,.6)}
.card.off{filter:grayscale(.8) brightness(.8)}
.card .vig{background:radial-gradient(circle,#f3e3b8,#cfae74);filter:sepia(.7) saturate(.7)}
/* ---- detail note ---- */
.detail{position:relative;height:96px;margin:2px 0 0;padding:5px 10px 5px;border-radius:5px;background:var(--paper) center/170px,#e8d3a0;border:1px solid #2a180a;color:var(--ink);
 box-shadow:0 0 0 2px rgba(201,162,74,.6),0 5px 10px rgba(0,0,0,.6),inset 0 0 16px rgba(110,70,20,.35)}
.detail.empty{opacity:1;color:#4a3318;font-size:13.5px}
.detail::after{content:'';position:absolute;right:-5px;bottom:-7px;width:26px;height:26px;border-radius:44% 56% 50% 50%;background:radial-gradient(circle at 35% 30%,#c8402c,#8e2418 60%,#4f0f0a);box-shadow:0 2px 3px rgba(0,0,0,.6);pointer-events:none}
.detail.over{height:auto}
.dn{font-size:17px}.dx{background:linear-gradient(#e8cc7c,#a37c2c);color:#2a1608;text-shadow:none;border:1px solid #3a2208;box-shadow:none}
/* ---- bottom bar ---- */
.actions{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:6px;padding:4px 0 0;border:0;background:none;border-radius:0}
.actions>button{flex:1 1 auto}
#app[data-screen=combat] .actions{display:grid;grid-template-columns:62px 1fr 62px;gap:8px;align-items:center;padding:2px 2px 0}
button.endturn{min-width:0;width:100%;font-size:22px;min-height:52px;margin:0;letter-spacing:2px;border-radius:9px}
.pile{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;color:var(--cream);padding:5px 0 3px;border-radius:8px;background:var(--leather),#1f1008;background-blend-mode:multiply;border:1px solid #0b0502;box-shadow:inset 0 0 0 2px rgba(201,162,74,.5),0 3px 5px rgba(0,0,0,.6);min-height:50px}
.pile .ic{width:20px;height:20px;color:var(--cream2)}.pile b{font:bold 17px Georgia,serif;margin:1px 0}.pile small{font-size:10.5px;letter-spacing:.5px;color:var(--cream2)}
.actions .side{flex:none;margin:2px}
.actions.maprow{padding:0}
.plate{flex:1;display:flex;align-items:center;gap:9px;min-height:50px;padding:4px 12px;border-radius:9px;background:var(--leather),#1f1008;background-blend-mode:multiply;border:1px solid #0b0502;box-shadow:inset 0 0 0 2px rgba(201,162,74,.5),0 3px 6px rgba(0,0,0,.6);color:var(--cream)}
.pl-ic .ic{width:28px;height:28px;color:var(--brass)}.pl-t{font:18px 'IM Fell English SC',serif;line-height:1.05}.pl-t small{display:block;font:12px 'IM Fell English',serif;color:var(--cream2);letter-spacing:0;margin-top:2px}
/* ---- map ---- */
.mapscr{position:relative;border-radius:5px;padding:6px 10px 8px!important;box-shadow:0 10px 22px rgba(0,0,0,.75),inset 0 0 40px rgba(70,35,8,.65)!important;color:var(--ink)}
.maphead{background:none;padding:0;display:flex;align-items:center;justify-content:space-between;box-shadow:none}
.maphead h2{color:var(--ink);text-shadow:0 1px 0 rgba(255,240,200,.6);font-size:22px;text-align:left;flex:1}.maphead h2::after{display:none}
.leg{font-size:14px;display:inline-flex;align-items:center;gap:3px;color:#4a3318}
.mapscr .msg{margin:0}
.chart{flex:1 1 auto;min-height:0;transform:none;background:none;border:0;box-shadow:none;border-radius:0;position:relative}
.chart::before,.chart::after{display:none}
.routes{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.routes path{fill:none;stroke:#3a2410;stroke-width:2;stroke-dasharray:2 6;stroke-linecap:round;opacity:.75;vector-effect:non-scaling-stroke}
.routes path.walked{stroke:#7a1d10;stroke-width:3;stroke-dasharray:1 7;opacity:.95}
.routes path.hot{stroke:#c58a1a;stroke-width:3.2;stroke-dasharray:3 5;opacity:1;filter:drop-shadow(0 0 3px rgba(255,200,70,.8))}
.node{width:46px;height:46px;border-radius:50%;opacity:1;font-size:0;color:#e9d49c;background:radial-gradient(circle at 38% 30%,#4a3020,#1a0e06 70%);border:3px solid #a4802f;
 box-shadow:0 0 0 2px #1a0e06,0 5px 8px rgba(0,0,0,.65),inset 0 0 9px rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;transition:transform .15s}
.node .nb .ic{width:25px;height:25px;stroke-width:1.8}.node .nb{display:flex}
.node em{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:2px;white-space:nowrap;font:12px 'IM Fell English',serif;font-style:italic;color:#2a1608;background:rgba(238,220,170,.88);padding:0 6px;border-radius:7px;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.node.avail{border-color:#f0cf6a;color:#fff0b8;box-shadow:0 0 0 2px #1a0e06,0 0 0 5px rgba(240,200,90,.35),0 0 18px 3px rgba(255,190,60,.8),0 5px 8px rgba(0,0,0,.6);animation:beacon 1.5s ease-in-out infinite}
@keyframes beacon{50%{box-shadow:0 0 0 2px #1a0e06,0 0 0 8px rgba(240,200,90,.12),0 0 24px 6px rgba(255,190,60,.9),0 5px 8px rgba(0,0,0,.6)}}
.node.done{filter:none;opacity:.8;color:#8c7a58;border-color:#6c5a36;background:radial-gradient(circle at 38% 30%,#3a2a1e,#150c06 70%)}
.node.cur{opacity:1;color:#e9d49c;border-color:#c43b25}.node.n-boss{width:58px;height:58px;border-color:#e0b64a}.node.n-boss .nb .ic{width:32px;height:32px}
.node.n-elite,.node.n-boss{background:radial-gradient(circle at 38% 30%,#4a3020,#1a0e06 70%)}.node.n-boss:not(.done){color:#ffe29a}.node.n-elite{border-color:#a8442c}.node.n-elite:not(.done){color:#ffb5a0}
.mapship{position:absolute;width:54px;transform:translate(-112%,-62%);z-index:5;pointer-events:none}.mapship .shipsvg{filter:drop-shadow(3px 5px 3px rgba(30,15,4,.6))}
.you{display:none}
/* ---- shared panels on the wood ---- */
.panel{background:var(--paper) center/170px,#e8d3a0;border:1px solid #2a180a;border-radius:6px;color:var(--ink);box-shadow:0 0 0 2px rgba(201,162,74,.55),0 5px 10px rgba(0,0,0,.6),inset 0 0 14px rgba(110,70,20,.3)}
.panel h3{color:var(--oxb);text-shadow:none}
.panel .small,.panel p{color:#3a2814}
.dimmed{opacity:.5}
.choices button{font-family:'IM Fell English',serif;text-shadow:0 1px 0 #000}
.banner{border:0;border-radius:3px;max-height:15vh;box-shadow:0 0 0 3px #f1e1b8,0 0 0 4px #3a2410,0 0 0 6px var(--brass2),0 8px 14px rgba(0,0,0,.65)}
.price{color:var(--cream);text-shadow:0 1px 2px #000}
#app[data-screen=reward] .scr,#app[data-screen=port] .scr{color:var(--cream)}
.scr>p{color:var(--cream)}
.cards:not(.hand) .card.sel{transform:translateY(-4px) scale(1.04)}
/* ---- logbook drawer ---- */
.modal.bookm{background:rgba(6,3,1,.78);padding:10px;z-index:60}
.book{position:relative;width:min(100%,400px);height:auto;min-height:min(100%,600px);max-height:100%;display:flex;flex-direction:column;padding:8px 10px 44px 16px;border-radius:10px;
 background:var(--leather),#6a3a1c;background-blend-mode:soft-light;box-shadow:0 14px 40px #000,inset 0 0 0 2px #0b0502,inset 0 0 0 4px rgba(201,162,74,.55),inset 14px 0 18px rgba(0,0,0,.55)}
.book::before{content:'';position:absolute;left:0;top:14px;bottom:14px;width:9px;background:repeating-linear-gradient(#0b0502 0 14px,#6e4f1c 14px 18px);opacity:.8;border-radius:3px}
.bk-tabs{display:flex;gap:4px;margin:0 0 6px;flex:none}
.bk-tabs button{flex:1;min-height:46px;padding:3px 2px;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-size:11.5px;border-radius:7px 7px 2px 2px;letter-spacing:.2px;
 color:var(--ink);text-shadow:none;background:var(--paper) center/140px,#d9c493;filter:brightness(.72);border:1px solid #2a180a;box-shadow:0 2px 3px rgba(0,0,0,.6)}
.bk-tabs button .ic{width:19px;height:19px}.bk-tabs button.on{filter:none;transform:translateY(2px);box-shadow:0 0 0 1px #c9a24a,0 -2px 5px rgba(255,200,80,.35);position:relative;z-index:2}
.bk-page{flex:1;min-height:0;overflow:auto;padding:10px 12px;border-radius:3px 3px 5px 5px;background:var(--paper) center/200px,#e8d3a0;color:var(--ink);border:1px solid #2a180a;
 box-shadow:inset 0 0 22px rgba(110,70,20,.45),0 0 0 1px rgba(201,162,74,.7);font-size:14.5px;line-height:1.22;position:relative;z-index:1}
.bkh{margin:6px 0 5px;text-align:center;font-size:21px;color:var(--oxb);text-shadow:none;display:flex;align-items:center;gap:8px}
.bkh::before,.bkh::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,#7a5a2e)}.bkh::after{transform:scaleX(-1)}
.bk-page h4{margin:4px 0 2px;font:15px 'IM Fell English SC',serif;color:var(--oxb)}.bk-page .sm{font-size:12.5px;margin:2px 0;color:#4a3318}
.bk-page .gb span{color:#fff6dc}
.bk-close{position:absolute;left:12px;bottom:4px;display:flex;align-items:center;gap:8px;min-height:40px;margin:0;padding:0 6px;background:none;border:0;box-shadow:none;color:var(--cream2);font-size:15px}
.bk-close .seal{width:38px;height:38px;filter:drop-shadow(0 2px 3px #000)}
.seal{display:block}
.offgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.off,.capline{display:flex;gap:7px;align-items:flex-start;padding:5px;border-radius:5px;background:rgba(255,248,225,.35);border:1px solid rgba(90,60,25,.45)}
.off.empty{opacity:.55}.off.inj .medal{filter:grayscale(1)}
.medal.sm{flex:none;width:46px;height:46px;border-radius:50%;padding:2.5px;background:conic-gradient(from 210deg,#f0d68a,#8e6a26,#e8cc7c,#6e4f1c,#f0d68a);box-shadow:0 2px 4px rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;color:#3a2410}
.medal.sm .ic{width:22px;height:22px}
.ot{display:flex;flex-direction:column;min-width:0;line-height:1.12}.ot b{font:15px 'IM Fell English SC',serif}.ot i{font-size:12px;color:#7a1f14}.ot span{font-size:12px;color:#3a2814;margin-top:1px}
.capline{margin:6px 0}.capline .ot span{font-size:12.5px}
.bk2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.supgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sp{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto auto;column-gap:7px;padding:6px;border-radius:5px;background:rgba(255,248,225,.35);border:1px solid rgba(90,60,25,.45)}
.sp .si{grid-row:span 2;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a3020,#1a0e06);color:#e9d49c;display:flex;align-items:center;justify-content:center;border:2px solid #a4802f}
.sp .si .ic{width:20px;height:20px}.sp b{font:bold 19px Georgia,serif;line-height:1}.sp b small{font-size:12px;font-weight:normal;opacity:.6}
.sp i{font:13px 'IM Fell English SC',serif;color:var(--oxb);font-style:normal}.sp>span:last-child{grid-column:1/3;font-size:12px;color:#3a2814;margin-top:3px;line-height:1.15}.sp.low b{color:#a02a1a}
.vy{margin:0;padding-left:18px;font-size:13.5px}.vy li{margin:3px 0}.vy .dim{opacity:.6}
.declist{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.dl{display:flex;align-items:center;gap:5px;margin:0;min-height:32px;padding:2px 7px 2px 3px;text-align:left;font:14px 'IM Fell English',serif;color:var(--ink);text-shadow:none;border-radius:5px;background:rgba(255,248,225,.45);border:1px solid rgba(90,60,25,.5);box-shadow:none}
.dl .cost,.dhead .cost{position:static;flex:none;width:22px;height:22px;font:bold 13px Georgia,serif;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#2a1608;border:2px solid #3a2208;background:radial-gradient(circle at 35% 30%,#fff0b0,#d3a948 55%,#8a6420);box-shadow:0 1px 2px rgba(0,0,0,.5)}.dl .dn2{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dl b{color:var(--oxb)}.dl .dtg{font-size:12px}
.dl.tagS{border-left:4px solid #2f6377}.dl.tagC{border-left:4px solid #8e2d20}.dl.tagK{border-left:4px solid #b08a2c}
.ibk{display:flex;flex-direction:column;align-items:center;gap:10px;margin:8px 0}.ibk .gloss{width:100%;background:rgba(255,248,225,.5);font-size:13.5px}
.lg{display:flex;gap:8px;align-items:flex-start;margin:5px 0;font-size:13.5px}.lg .li{flex:none;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#4a3020,#1a0e06);color:#e9d49c;border:2px solid #a4802f;display:flex;align-items:center;justify-content:center}
.lg .li .ic{width:17px;height:17px}.lg b{color:var(--oxb)}
.setl{display:flex;flex-direction:column;gap:8px;margin:12px 0}.setl button{margin:0;min-height:50px;font-size:17px}.setl .danger{background:linear-gradient(#7a2318,#4a120c)}
.modal .box{background:var(--paper) center/200px,#e8d3a0;border:1px solid #2a180a;box-shadow:0 0 0 3px var(--brass2),0 10px 30px #000;color:var(--ink)}
#tip{background:#1a0e06;color:var(--cream);border:1px solid var(--brass);z-index:70}
@media (prefers-reduced-motion: reduce){#light{animation:none}}
.card{overflow:visible}
.hand,.hand.fan{padding-left:6px;padding-right:6px}
.hand .card{max-width:118px}
.hand .card .nm,.hand.fan .card .nm{font-size:12.5px}
.chead{border-radius:5px 5px 0 0}

.book::after{content:'';position:absolute;inset:3px;border-radius:8px;pointer-events:none;
 background:radial-gradient(circle at 0 0,#e8cc7c 0 9px,transparent 10px) 0 0/100% 100% no-repeat}
.bk-corner{display:none}
.boardrow{left:auto;right:8px;bottom:8px;flex-direction:column;align-items:flex-end;gap:2px}
.boardrow .small{max-width:160px}

#candle{position:fixed;left:max(0px,calc(50vw - 240px));top:max(2px,env(safe-area-inset-top));z-index:46;width:36px;height:63px;pointer-events:none;filter:drop-shadow(0 0 14px rgba(255,170,60,.55)) drop-shadow(2px 3px 3px #000)}
#candle .candle{width:100%;height:100%;display:block}
.flame{transform-origin:20px 20px;animation:lick 1.3s ease-in-out infinite alternate}
@keyframes lick{0%{transform:scale(1,1) skewX(0)}40%{transform:scale(.94,1.06) skewX(2deg)}100%{transform:scale(1.04,.96) skewX(-2deg)}}
.hud{margin-left:34px}
.compass{width:34px;height:34px;display:block;filter:drop-shadow(0 2px 2px #000)}
.pl-ic{display:flex}
@media (prefers-reduced-motion: reduce){.flame{animation:none}}
#candle{width:30px;height:53px;left:max(0px,calc(50vw - 242px))}
.hud{margin-left:26px;margin-right:48px;gap:3px 6px;grid-template-columns:46px 1fr}
.hud .medal{width:46px;height:46px}
.strip{gap:3px 5px}.coin{padding:1px 6px 1px 3px}.cg{font-size:12.5px}.strip .ic{width:14px;height:14px}
.ofc{width:20px;height:20px;padding:1px}.offs{gap:2px}.ofc.empty .ic{width:11px;height:11px}
.gauges{gap:3px}.gauge .gi{width:14px}.gauge .gi .ic{width:14px;height:14px}.gb span{font-size:10.5px}
.mapship.start{transform:translate(-50%,-80%)}
.chart{overflow:visible}

/* ---- generic table screens ---- */
.emo{display:inline}.emo .ic{width:1.1em;height:1.1em;vertical-align:-.18em}
.cards:not(.hand) .card .ctag .ic,.card .ctag .ic{width:13px;height:13px}
.card .ds .ic{width:1.05em;height:1.05em;vertical-align:-.15em;color:#4a2a10}
.kw .ic{color:#4a2a10}
.card .vig span{filter:sepia(1) saturate(.55) contrast(1.15) brightness(.85)}
.msg,.scr>p.msg{color:var(--ink)}
.scr>p:not(.msg){background:var(--paper) center/170px,#e8d3a0;color:var(--ink);padding:8px 12px;border-radius:5px;border:1px solid #2a180a;box-shadow:0 0 0 2px rgba(201,162,74,.55),0 5px 10px rgba(0,0,0,.55),inset 0 0 14px rgba(110,70,20,.3);margin:0}
.scr>p b{color:#7a1f14}
.scr>h3{margin:2px 0 0;text-align:left;font-size:18px;color:#e8c76a;letter-spacing:.5px;display:flex;align-items:center;gap:8px}
.scr>h3::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(201,162,74,.7),transparent)}
#app:not([data-screen=combat]):not([data-screen=map]):not([data-screen=capselect]):not([data-screen=title])>.scr{justify-content:center;gap:11px}
.tprops{position:absolute;inset:0;pointer-events:none;z-index:0}.tprops>span{position:absolute;display:block;filter:drop-shadow(3px 5px 4px rgba(0,0,0,.7))}
.tp-compass{left:6px;bottom:78px;width:62px;transform:rotate(-12deg)}.tp-compass svg{width:100%;display:block}
.tp-div{right:8px;bottom:82px;width:34px;transform:rotate(18deg)}.tp-div svg{width:100%;display:block}
.tp-coin{right:52px;bottom:76px;width:44px}.tp-coin svg{width:100%;display:block}
#app>.scr,#app>.actions{position:relative;z-index:1}
.choices.two,.choices.three{gap:6px}
.choices button{margin:0;min-height:50px}
.scr .banner{width:100%;max-height:19vh;object-fit:cover}
/* reward */
#app[data-screen=reward] .cards{gap:8px;justify-content:center;flex-wrap:nowrap}
#app[data-screen=reward] .cards .card{width:31%;max-width:120px;min-height:208px}
#app[data-screen=reward] .cards .card .ds{font-size:13.5px}
#app[data-screen=reward] .cards .card .nm{font-size:16px}
.detail.over{background:var(--paper) center/170px,#e8d3a0}
/* port */
#app[data-screen=port] .cards,#app[data-screen=remove] .cards{padding:14px 6px 6px;border-radius:12px;background:var(--leather),#1f1008;background-blend-mode:multiply;border:1px solid #0b0502;box-shadow:inset 0 4px 12px rgba(0,0,0,.85),inset 0 0 0 2px rgba(120,80,40,.4),0 0 0 1px rgba(201,162,74,.28)}
#app[data-screen=port] .cardwrap .price{display:flex;justify-content:center;gap:4px;align-items:center;margin-top:3px;font:bold 15px Georgia,serif;color:#f2d479}
.price{font-family:Georgia,serif}
#app[data-screen=port] .cards .card{min-height:178px}
/* title */
#app[data-screen=title]>.scr,#app[data-screen=title]{justify-content:center}
#app[data-screen=title] h1{font-size:54px;margin:4px 0 0;letter-spacing:2px}
#app[data-screen=title] h3.center{margin:0 0 6px;color:var(--cream2)}
#app[data-screen=title] p{background:var(--paper) center/170px,#e8d3a0;color:var(--ink);padding:9px 12px;border-radius:5px;border:1px solid #2a180a;box-shadow:0 0 0 2px rgba(201,162,74,.55),0 5px 10px rgba(0,0,0,.55)}
#app[data-screen=title] .choices{flex-direction:column;gap:8px;margin-top:6px}#app[data-screen=title] .choices button{flex:none;width:100%;min-height:58px;font-size:21px;text-align:center}
#app[data-screen=title] #new{color:#2a1608;text-shadow:0 1px 0 #f6e2a2;background:linear-gradient(#f0d68a,#c39a45 55%,#8e6a26);border-color:#3a2208;box-shadow:inset 0 0 0 2px rgba(255,240,190,.55),inset 0 0 0 3px #6e4f1c,0 3px 6px rgba(0,0,0,.6)}
#app[data-screen=title] .banner{max-height:25vh;margin:4px 0}
/* captain select */
.capscr{gap:7px!important;justify-content:flex-start!important}
.capscr h2{margin:0}
.caps{display:grid;grid-template-columns:repeat(6,1fr);gap:4px 0;padding:10px 6px 8px;border-radius:5px;background:url(img/chart/chart.webp) center/cover,#d6b97c;box-shadow:0 8px 18px rgba(0,0,0,.7),inset 0 0 34px rgba(70,35,8,.6)}
.med{grid-column:span 2;display:flex;flex-direction:column;align-items:center;gap:3px;margin:0;padding:0;min-height:0;background:none;border:0;box-shadow:none;position:relative;color:var(--ink);text-shadow:none}
.med:nth-child(4){grid-column:2/4}.med:nth-child(5){grid-column:4/6}
.med .mr{position:relative;width:74px;height:74px;border-radius:50%;padding:5px;background:conic-gradient(from 200deg,#f0d68a,#8e6a26,#e8cc7c,#6e4f1c,#f0d68a);box-shadow:0 4px 8px rgba(0,0,0,.65),inset 0 0 4px #000;display:block;transition:transform .15s}
.med .mr::before,.med .mr::after{content:'';position:absolute;left:50%;width:9px;height:9px;margin-left:-4.5px;background:linear-gradient(135deg,#f6dc8c,#7a5a1e);transform:rotate(45deg);box-shadow:0 1px 2px #000}
.med .mr::before{top:-4px}.med .mr::after{bottom:-4px}
.med .mr img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;box-shadow:inset 0 0 6px #000;border:1px solid #1a0d05}
.med b{font:13px 'IM Fell English SC',serif;letter-spacing:.3px;background:rgba(238,220,170,.85);padding:0 7px;border-radius:7px;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.4)}
.med.sel .mr{transform:scale(1.1);box-shadow:0 0 0 3px rgba(255,214,110,.5),0 0 22px 6px rgba(255,190,60,.85),0 4px 8px rgba(0,0,0,.65)}
.med.sel b{background:var(--brassgrad);color:#2a1608}
.med.locked .mr{filter:grayscale(1) brightness(.6)}.med:disabled{opacity:1}
.med .lk{position:absolute;top:24px;left:50%;transform:translateX(-50%);color:#f1e2bd}.med .lk .ic{width:26px;height:26px;filter:drop-shadow(0 1px 2px #000)}
.dossier{position:relative;padding:10px 14px 10px;border-radius:5px;background:var(--paper) center/190px,#e8d3a0;border:1px solid #2a180a;color:var(--ink);box-shadow:0 0 0 4px #3a2008,0 0 0 5px rgba(201,162,74,.8),0 8px 16px rgba(0,0,0,.7),inset 0 0 18px rgba(110,70,20,.35);margin:2px 5px 0}
.dh{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.dh h3{font-size:22px;margin:0;color:var(--oxb);text-shadow:none;line-height:1.05}.dh i{font-size:13.5px;color:#5a3a18}
.dseal{width:42px;height:42px;margin:-4px -4px 0 0;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5));flex:none}
.dp{margin:5px 0;font-size:14px;line-height:1.22;background:none!important;box-shadow:none!important;border:0!important;padding:0!important;color:var(--ink)}
.dstats{display:flex;gap:14px;font:bold 15px Georgia,serif;margin:4px 0;color:#3a2410}.dstats span{display:inline-flex;align-items:center;gap:4px}.dstats .ic{width:17px;height:17px;color:var(--oxb)}
.ddeck{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;line-height:1;padding:3px 7px 3px 3px;border-radius:11px;background:rgba(255,248,225,.5);border:1px solid rgba(90,60,25,.55)}
.chip i{font:bold 11px Georgia,serif;font-style:normal;width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:radial-gradient(circle at 35% 30%,#fff0b0,#d3a948 55%,#8a6420);border:1px solid #3a2208}
.chip.tagS{border-left:3px solid #2f6377}.chip.tagC{border-left:3px solid #8e2d20}.chip.tagK{border-left:3px solid #b08a2c}.chip b{color:var(--oxb)}
.capscr .notp{margin:0 5px;padding:5px 8px;border-radius:5px;background:rgba(20,10,4,.78);border:1px solid rgba(201,162,74,.5);box-shadow:none;color:var(--cream)}
.capscr .notp b{color:#e8c76a}.capscr .notp .small{color:var(--cream2);font-size:12px}.capscr .notp .choices button{min-height:32px;font-size:14px;flex:1 1 45%}
#app[data-screen=capselect] .actions{gap:8px}#app[data-screen=capselect] .actions button{min-height:52px;font-size:18px}#app[data-screen=capselect] #sail{flex:2}
.scr>p.msg{background:var(--paper) center/170px,#e8d3a0;border:1px solid #3a2410;border-left:4px solid var(--oxb);padding:6px 10px;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.scr>ul{margin:0;list-style:none;padding:10px 14px;background:var(--paper) center/170px,#e8d3a0;color:var(--ink);border-radius:5px;border:1px solid #2a180a;box-shadow:0 0 0 2px rgba(201,162,74,.55),0 5px 10px rgba(0,0,0,.55)}
.scr>ul li{margin:3px 0}
#app[data-screen=logbook]>.scr{justify-content:flex-start;padding-top:20px}
#app[data-screen=remove]>.scr{justify-content:flex-start}
#app[data-screen=remove] .cards{gap:6px 4px;padding:14px 5px 6px}
#app[data-screen=remove] .cards .card{width:23.5%;max-width:none;min-height:106px}
#app[data-screen=remove] .cards .card .vig,#app[data-screen=remove] .cards .card .ctype{display:none}
#app[data-screen=remove] .cards .card .ds{font-size:10.5px;padding:1px 3px;line-height:1.1}#app[data-screen=remove] .cards .card .nm{font-size:12px;min-height:0;margin:2px 1px}

.hand.crowd .card .ds,.hand.crowd .card .cfoot,.hand.crowd .card .ctype{display:none}
.hand.crowd .card .vig{display:flex;width:34px;height:26px;margin:4px auto 0;font-size:15px}
.hand.crowd .card .nm{font-size:11px;min-height:2.2em;margin:2px 1px 0;line-height:1}
.hand.crowd .card.sel .ds{display:block}