/* v5 polish: press states, tap targets, in-flow detail, compact hand grid, juice, settings. Loads after chart.css. */
:root{--seal:none}
/* ---- press feedback ---- */
#app button,#modal button,.pile,.node,.med,.ofc,.menubtn,.card,.intent,.wx,.log{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#app button,#modal button{transition:transform .09s ease,filter .09s ease,box-shadow .12s ease,background-color .15s}
#app button:not(:disabled):active,#modal button:not(:disabled):active{transform:scale(.965) translateY(1px);filter:brightness(.9)}
.card{transition:scale .09s ease,translate .12s ease,filter .15s,opacity .15s,box-shadow .15s}
.card:active{scale:.955}
.node{transition:transform .12s,filter .12s}.node.avail:active,.node:not(.done):active{transform:translate(-50%,-50%) scale(.9)}
.pile:active,.menubtn:active,.med:active{scale:.94}
.menubtn{transition:scale .1s}
button:focus-visible,.card:focus-visible,.node:focus-visible{outline:2px solid #f6d56a;outline-offset:2px}
/* ---- tap target growth (visuals unchanged) ---- */
.hud .ofc{position:relative}.hud .ofc::before{content:'';position:absolute;inset:-12px -3px}
.dx{position:relative;width:32px!important;height:32px;min-height:32px!important;line-height:1}.dx::before{content:'';position:absolute;inset:-9px}.dx span{pointer-events:none}
.topline .side{min-height:32px;height:32px;padding:0 13px;font-size:15px;margin:0;position:relative}.topline .side::before{content:'';position:absolute;inset:-8px -4px}
.boardrow #board{min-height:46px;padding:0 20px;font-size:20px}
.capscr .notp .choices button{min-height:44px;font-size:15px}
.hud{cursor:pointer}
/* ---- HUD type ---- */
.hud .gb span{font-size:12.5px}.hud .gb small,.eplate .gb small{font-size:11px;opacity:.85}
.hud .strip{font-size:13px}
/* ---- docked / combat detail ---- */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 104px;column-gap:8px;height:100px;padding:7px 10px 7px 12px;overflow:visible;align-items:stretch}
.detail.empty{display:block;overflow:hidden;font-style:normal;padding:8px 14px}
.detail.empty .tl{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
.detail.empty .tn{font:22px 'Pirata One',serif;color:#7a1f14;letter-spacing:.5px}
.detail.empty .tp{font:13px 'IM Fell English SC',serif;color:#6b4a1f;letter-spacing:.5px}
.detail.empty p{margin:0;font-size:14px;line-height:1.25;color:#3a2814}
.detail .dmain{min-width:0;display:flex;flex-direction:column;gap:2px;justify-content:center}
.detail .dhead{gap:7px}.detail .dn{font:19px 'IM Fell English SC',serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}
.detail .dtype{font-size:12px;white-space:nowrap}
.detail .dtxt{font-size:15px;line-height:1.18;margin:0;max-height:2.4em;overflow:hidden;color:#24150a}
.detail .dgl{font-size:12px;line-height:1.2;max-height:2.4em;overflow:hidden;color:#4a3318}
.detail .dnote{font-size:13px;line-height:1.2;color:#7a1f14;font-style:italic}
.detail .dside{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:4px}
.detail .dside .dx{align-self:flex-end;margin:0}
.detail .dgo{min-height:44px;margin:0;padding:0 6px;font-size:17px;border-radius:8px;width:100%}
.detail .dgo.off{color:#6a4a38;background:rgba(60,35,10,.12);border:1px dashed #7a5a3a;box-shadow:none;text-shadow:none;filter:none;opacity:1;font-size:13px}
.detail.docked{flex:none;height:auto;min-height:100px;margin:4px 0 0;z-index:3}
#app.docked>.actions{display:none}
.detail::after{display:none}
.detail .dx{background:var(--seal0) center/contain no-repeat!important;border:0!important;box-shadow:none!important;color:#3a0904;font:700 15px Georgia,serif;text-shadow:0 1px 0 rgba(255,150,120,.55);filter:drop-shadow(0 2px 2px rgba(0,0,0,.5));width:32px!important;height:32px!important;min-height:32px!important;border-radius:0}
.detail .dx::before{inset:-6px}
.detail .dx:active{scale:.9}
/* ---- turn indicator + end-turn ready pulse ---- */
#endturn.ready{animation:ready 1.4s ease-in-out infinite}
@keyframes ready{50%{box-shadow:inset 0 0 0 2px rgba(255,240,190,.55),inset 0 0 0 3px #6e4f1c,0 0 0 3px rgba(255,214,110,.55),0 0 22px 4px rgba(255,200,70,.7),0 3px 6px rgba(0,0,0,.6);filter:brightness(1.1)}}
.turnbn{position:fixed;left:0;right:0;top:30%;z-index:60;pointer-events:none;text-align:center;animation:bn .95s cubic-bezier(.2,.8,.2,1) forwards}

.turnbn b{display:inline-block;font:36px 'Pirata One',serif;letter-spacing:1px;color:#f4d98a;padding:4px 26px;background:linear-gradient(90deg,transparent,rgba(20,8,2,.82) 18%,rgba(20,8,2,.82) 82%,transparent);text-shadow:0 2px 0 #000,0 0 14px rgba(255,190,70,.6)}
.turnbn small{display:block;margin-top:-2px;font:14px 'IM Fell English SC',serif;color:#e8d6a8;letter-spacing:2px;text-shadow:0 1px 3px #000}
@keyframes bn{0%{opacity:0;transform:translateX(-40px) scale(.96)}18%{opacity:1;transform:none}72%{opacity:1}100%{opacity:0;transform:translateX(30px)}}
/* ---- affordability ---- */
.card.dim .cost{background:radial-gradient(circle at 35% 30%,#ffb3a6,#c43b25 60%,#7a1d10);color:#fff;border-color:#3a0d06;text-shadow:0 1px 0 #3a0d06}
.hand .card.dim{filter:saturate(.75) brightness(.93)}
.cardwrap .price.poor{color:#ff9a8a}
.cardwrap .price{font-size:16px}
/* ---- hand: single fan up to 5, tidy grid from 6 ---- */
#app .hand.grid{display:grid;grid-template-columns:repeat(calc(var(--cols,5)*2),minmax(0,1fr));gap:15px 7px;padding:17px 9px 8px;align-content:center;justify-items:stretch}
#app .hand.grid .card{margin:0!important;width:auto;max-width:none;min-height:0;height:86px;flex:none;grid-column:span 2;transform:none!important;transform-origin:50% 100%;padding:0;justify-content:flex-start;align-items:center}
#app .hand.grid .card .ds,#app .hand.grid .card .cfoot,#app .hand.grid .card .ctype,#app .hand.grid .card .ctag,#app .hand.grid .card .tg,#app .hand.grid .card .xh,#app .hand.grid .card .pw{display:none!important}
#app .hand.grid .card .chead{display:block;height:0;min-height:0;padding:0;margin:0;border:0;background:none;overflow:visible}
#app .hand.grid .card .vig{display:flex;width:34px;height:26px;margin:9px auto 0;font-size:15px}
#app .hand.grid .card .nm{font-size:12.5px;min-height:2.05em;margin:3px 2px 0;line-height:1.02;width:100%;padding:0 2px;text-align:center}
#app .hand.grid .card .cost{width:23px;height:23px;font-size:14px;top:-8px;left:-6px}
#app .hand.grid .card.sel{transform:translateY(-7px) scale(1.08)!important;z-index:4}
#app .hand.grid .card.off{opacity:.7}
#app .hand.grid .card.off::before{content:'swap';position:absolute;bottom:3px;left:0;right:0;text-align:center;font:10.5px 'IM Fell English SC',serif;letter-spacing:1px;color:#4a3318}
#app .hand.grid[data-n="6"]{--cols:3}
#app .hand.grid[data-n="6"] .card,#app .hand.grid[data-n="7"] .card,#app .hand.grid[data-n="8"] .card{height:86px}
@keyframes deal{from{transform:translate(var(--fx,-60vw),var(--fy,30px)) scale(.35) rotate(-18deg);opacity:0}}
.card.deal{animation-duration:.34s}
.ghost.dis{transition:transform .32s cubic-bezier(.5,0,.8,.4),opacity .32s ease-in}
/* ---- hit flashes, bursts, damage numbers ---- */
.burst{position:fixed;z-index:34;width:96px;height:96px;margin:-48px 0 0 -48px;pointer-events:none;animation:burst .38s ease-out forwards}
.burst svg{width:100%;height:100%;overflow:visible}.burst polygon{fill:#fff3b8;stroke:#e8a020;stroke-width:3;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,170,40,.9))}
.burst.big{width:140px;height:140px;margin:-70px 0 0 -70px}
@keyframes burst{0%{transform:scale(.3) rotate(-12deg);opacity:1}60%{opacity:1}100%{transform:scale(1.15) rotate(10deg);opacity:0}}
.hurtfx{position:fixed;inset:0;z-index:44;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 45%,rgba(190,25,10,.55) 100%);animation:hurt .6s ease-out forwards}
.hurtfx.big{background:radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(210,20,8,.75) 100%)}
@keyframes hurt{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
.floater{font:bold 27px Georgia,serif;-webkit-text-stroke:1.2px #1a0a02;paint-order:stroke fill;animation-duration:1.15s}
.floater.big{font-size:38px}.floater .ic{width:.9em;height:.9em;vertical-align:-.1em}
.floater.hit{color:#ffe08a}.floater.ouch{color:#ff7a68}.floater.gain{color:#a8e8ff}
.hud .gauge.hit{animation:gh .5s}@keyframes gh{20%{translate:-3px 0;filter:brightness(1.6) saturate(1.5)}40%{translate:3px 0}60%{translate:-2px 0}}
.struck .eart{animation:struck2 .34s}@keyframes struck2{20%{filter:brightness(2.2) sepia(1) saturate(3) hue-rotate(-35deg);transform:translateX(7px) scale(1.02)}55%{transform:translateX(-4px)}}
.mine .tag.big.pop{animation:pop .36s}@keyframes pop{40%{transform:scale(1.35);filter:brightness(1.4)}}
.enemy.struck .eplate{animation:plateshake .3s}@keyframes plateshake{30%{translate:3px 0}60%{translate:-3px 0}}
/* ---- settings switches ---- */
.setl .sw{display:flex;align-items:center;gap:10px;text-align:left}
.setl .sw span{flex:1}.setl .sw em{font-style:normal;min-width:30px;text-align:right;font-size:14px;opacity:.85}
.setl .sw i{width:44px;height:24px;border-radius:12px;background:#2a1608;border:1px solid #0b0502;box-shadow:inset 0 2px 4px rgba(0,0,0,.7);position:relative;flex:none;transition:background .15s}
.setl .sw i::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d8c8a0,#8a7448);transition:transform .16s,background .15s;box-shadow:0 1px 2px rgba(0,0,0,.6)}
.setl .sw.on i{background:#7a5a1a}.setl .sw.on i::after{transform:translateX(20px);background:radial-gradient(circle at 35% 30%,#fff0b0,#d3a948 55%,#8a6420)}
/* ---- reduce motion ---- */
html.rm *,html.rm *::before,html.rm *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}
html.rm .flame,html.rm #light,html.rm .bob{animation:none!important}
/* ===== screens ===== */
#app:not([data-screen=combat]):not([data-screen=map]):not([data-screen=capselect]):not([data-screen=title])>.scr{justify-content:flex-start!important;gap:10px;padding:8px 2px 8px;overflow-y:auto;min-height:0;flex:1 1 auto;overscroll-behavior:contain;scrollbar-width:none}
#app>.scr::-webkit-scrollbar{display:none}
#app:not([data-screen=combat]):not([data-screen=map])>.scr>h2{margin:2px 0 0;font-size:clamp(25px,8vw,31px);line-height:1.05}
#app[data-screen=event] .banner,#app[data-screen=cove] .banner,#app[data-screen=end] .banner,#app[data-screen=extract] .banner,#app[data-screen=abandon] .banner{height:clamp(150px,27vh,240px);max-height:none;object-fit:cover}
#app[data-screen=end]>h1,#app[data-screen=end] h1{font-size:clamp(28px,8.6vw,34px);line-height:1.05;margin:10px 0 2px;text-align:center}
#app[data-screen=end]{justify-content:flex-start;padding-top:36px}
.scr>p:not(.msg){font-size:15.5px;line-height:1.3}
#app .actions>button.lead{border:1px solid #c9a24a;color:#f2d479;background:linear-gradient(#2c1a0d,#150b05);box-shadow:inset 0 0 0 2px #150b05,inset 0 0 0 3px rgba(201,162,74,.65),0 3px 6px rgba(0,0,0,.6)}
#app .actions>button{min-height:52px;font-size:18px}
/* event options */
.choices.opts{display:flex;flex-direction:column;gap:8px}
.choices.opts .evopt{display:flex;align-items:center;gap:12px;text-align:left;min-height:58px;padding:8px 12px;width:100%}
.evopt .eb{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 15px Georgia,serif;color:#2a1608;background:radial-gradient(circle at 35% 30%,#fff0b0,#d3a948 55%,#8a6420);border:2px solid #3a2208;box-shadow:0 1px 3px rgba(0,0,0,.6)}
.evopt .et{min-width:0}.evopt .et b{display:block;font:500 17px/1.15 'IM Fell English',serif;color:var(--cream)}
.evopt .et small{display:block;font:italic 14px/1.2 'IM Fell English',serif;color:#d8c498;margin-top:2px;letter-spacing:0}
/* cove */
#app[data-screen=cove] .choices{display:flex;flex-direction:column;gap:8px}
#app[data-screen=cove] .choices button{display:grid;grid-template-columns:46px 1fr;column-gap:12px;align-items:center;text-align:left;padding:8px 12px;min-height:66px;width:100%}
#app[data-screen=cove] .choices button b{font:20px 'IM Fell English SC',serif;color:var(--cream);grid-column:2}
#app[data-screen=cove] .choices button small{grid-column:2;font:italic 14px/1.2 'IM Fell English',serif;color:#d8c498;letter-spacing:0}
.choices .rico,.choices .mini-face{grid-column:1;grid-row:1/3;width:46px;height:46px;border-radius:50%;margin:0;display:grid;place-items:center;object-fit:cover;background:radial-gradient(circle at 38% 30%,#4a3020,#1a0e06 70%);border:2px solid #a4802f;color:#e9d49c;box-shadow:0 0 0 1px #1a0e06,0 2px 4px rgba(0,0,0,.6)}
.rico .ic{width:26px;height:26px}
/* reward */
.choices.rwc{display:flex;flex-direction:column;gap:7px;margin:0}
.choices.rwc button{display:flex;align-items:center;justify-content:flex-start;gap:10px;text-align:left;min-height:50px;padding:6px 14px;font-size:17px;width:100%}
.scr>h3{margin-top:4px}
#app[data-screen=reward] .scr{gap:9px}
/* shipwright */
.swinfo{display:grid;grid-template-columns:1fr auto;gap:2px 8px;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),inset 0 0 14px rgba(110,70,20,.3)}
.swinfo b{font:21px 'IM Fell English SC',serif;color:#7a1f14}.swinfo span{grid-column:1/3;font-size:15px;line-height:1.25}.swinfo em{grid-column:1/3;font-size:14px;color:#6b4a1f}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;padding:9px 9px 7px;min-height:132px;margin:0}
.tile .tn{font:17px/1.05 'IM Fell English SC',serif;color:var(--cream)}
.tile .pp{display:flex;gap:5px}.tile .pp i{width:12px;height:12px;border-radius:50%;border:2px solid #a4802f;background:#150b05}.tile .pp i.on{background:radial-gradient(circle at 35% 30%,#fff0b0,#d3a948 55%,#8a6420);border-color:#3a2208}
.tile .td{font:14px/1.2 'IM Fell English',serif;color:#e0cfa4;flex:1;letter-spacing:0}
.tile .tc{align-self:stretch;display:flex;align-items:center;justify-content:flex-end;gap:4px;font:bold 16px Georgia,serif;color:#f2d479}
.tile.poor .tc{color:#ff9a8a}.tile.max .tc{color:#9ad08a}.tile:disabled{opacity:.6}
button.repair{display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;padding:6px 14px;font-size:18px}button.repair small{font:15px Georgia,serif;color:#d8c498}
.ships{display:flex;flex-direction:column;gap:8px}
.shiprow{display:grid;gap:3px;text-align:left;padding:10px 13px;margin:0;width:100%}
.shiprow .sr1{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.shiprow .sr1 b{font:21px 'IM Fell English SC',serif;color:var(--cream);margin-right:auto}
.shiprow .stat{font:bold 15px Georgia,serif;color:#f2d479;display:inline-flex;align-items:center;gap:4px}
.shiprow .sr2{font:15px/1.25 'IM Fell English',serif;color:#e0cfa4;letter-spacing:0}.shiprow .sr3{font:14.5px Georgia,serif;color:#cdbb8e}.shiprow .sr3 b{color:#f2d479;font-size:16px}
.shiprow.poor .sr3 b{color:#ff9a8a}.shiprow:disabled{opacity:.62}
/* port + services */
#app[data-screen=port] .choices.svc button{min-height:60px}
/* map labels vs the ship */
.mapship{z-index:2}.node{z-index:3}.node em{z-index:6;font-size:12.5px}
.mapscr .maphead,.mapscr>h2{font-size:23px}
/* captain select fills the screen better */
.capscr{gap:11px!important;padding-top:4px}
.med .mr{width:clamp(66px,9.6vh,84px);height:clamp(66px,9.6vh,84px)}
.med b{font-size:14px;padding:1px 8px}
.dp{font-size:15.5px}.dstats{font-size:16px}.chip{font-size:13.5px}
.dossier{padding:12px 15px}
.capscr .notp .small{font-size:12.5px}
#app[data-screen=capselect] .actions{padding-top:2px}
/* title */
#app[data-screen=title] .choices button{min-height:58px}
/* logbook drawer sizes */
.bk-close{min-height:46px}.dl{min-height:44px}
.hud .gb{min-width:0}

.card .ctype,.hand .ctype{font-size:11px!important}.pile small,.pile b+small{font-size:11px}.card .xh,.xh{font-size:11px}
.eplate .tag,.estats .tag{font-size:12px}.eplate .tag .ic{width:14px;height:14px}

#app[data-screen=reward] .cards .card{min-height:170px}
#app[data-screen=reward] .scr{gap:7px}
.choices.rwc{gap:6px}.choices.rwc button{min-height:46px}
#app[data-screen=reward]>.scr>p.msg{padding:5px 10px;font-size:14.5px}
.choices.rwc,.choices.opts,#app[data-screen=cove] .choices{flex-wrap:nowrap}
.choices.rwc button,.choices.opts button,#app[data-screen=cove] .choices button{flex:none}
#app[data-screen=cove] .choices button{min-height:68px}
.swinfo i{font:bold 15px Georgia,serif;font-style:normal;color:#3a2410;align-self:center}
/* map */
.node em{top:calc(100% - 10px);margin-top:0;font-size:12px;padding:0 7px;line-height:17px;border:1px solid rgba(60,35,10,.5)}
.mapship{width:66px;z-index:4;transform:translate(-100%,-55%)}.mapship.start{transform:translate(-50%,-80%)}
.plate .pl-t small{font-size:11.5px;line-height:1.15}
.capscr .caps{flex:1 1 auto;max-height:360px;align-content:space-evenly;row-gap:6px}
.capscr .dossier{flex:none}.capscr .notp{margin-top:auto}
/* ===== short phones (<=780px tall) ===== */
@media (max-height:780px){
 .detail{height:80px;padding:5px 10px 5px 12px}.detail .dgl{display:none}.detail .dtxt{font-size:14.5px}
 .detail.empty{padding:6px 12px}.detail.empty .tn{font-size:19px}.detail.empty p{font-size:13.5px}
 .detail .dgo{min-height:42px}.detail .dx{width:30px!important;height:30px!important;min-height:30px!important}
 .detail.docked{min-height:80px}
 #app .hand.grid{gap:13px 6px;padding:15px 8px 6px}#app .hand.grid .card{height:72px}#app .hand.grid .card .vig{margin-top:6px;height:22px}
 #app .hand.grid .card .nm{font-size:12px}
 .hand .card{min-height:clamp(118px,21vh,150px)!important}
 .log{min-height:28px;font-size:12px}
 #app:not([data-screen=combat]):not([data-screen=map])>.scr>h2{font-size:25px}
 #app:not([data-screen=combat]):not([data-screen=map]):not([data-screen=capselect]):not([data-screen=title])>.scr{gap:8px}
 #app[data-screen=event] .banner,#app[data-screen=cove] .banner,#app[data-screen=end] .banner{height:clamp(120px,22vh,200px)}
 .tprops{display:none}
 .tile{min-height:116px}
 #app[data-screen=reward] .cards .card{min-height:150px}
 .choices.rwc button{min-height:44px}
}
#app[data-screen=end] .banner{height:clamp(200px,36vh,340px)}
#app[data-screen=nassau] .panel button{width:100%;min-height:46px;margin:2px 0 0}
.detail .dhead.long .dn{font-size:16.5px}.detail .dhead.long .dtype{display:none}
#app[data-screen=extract] .actions{flex-direction:column;align-items:stretch;gap:8px}
#app[data-screen=extract] .actions>button{width:100%;margin:0}
#app .actions>button.gold{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)}
#app .hand .card.off,#app .hand.grid .card.off{opacity:1!important;filter:grayscale(.85) brightness(.9)!important}
#app .tag,#app .eplate .tag{font-size:12px}
.card .xh,.card .cfoot,.card .cfoot *{font-size:11px}
#app[data-screen=remove] .cards .card .ds{font-size:11px}#app[data-screen=remove] .cards .card .nm{font-size:12px}
#app .hand.grid .card .nm{margin-top:12px;min-height:2em}
#app .hand.grid .card .vig{margin-top:3px}
@media (max-height:780px){#app .hand.grid .card .nm{margin-top:10px}#app .hand.grid .card .vig{margin-top:2px}}