.arcade-launchers { display:grid; gap:.5rem; margin:1rem 0; }
.arcade-launchers .input-label { display:flex; align-items:baseline; justify-content:space-between; margin:0; }
.arcade-launchers .input-label span { color:var(--text-secondary); font-weight:400; font-size:.8rem; }
.arcade-launchers .arcade-launch { display:flex; text-align:left; justify-content:flex-start; align-items:center; gap:.9rem; padding:.8rem; min-height:52px; background:var(--bg-primary); color:var(--text-primary); border:1px solid var(--border); }
.arcade-launch > span:first-child { font-size:1.6rem; color:var(--accent); width:1.6rem; }
.arcade-launch strong,.arcade-launch small,.arcade-standings small { display:block; }
.arcade-launch small { margin-top:.15rem; color:var(--text-secondary); font-size:.78rem; font-weight:400; line-height:1.4; }
.arcade-launch:disabled { opacity:.55; }
.container.arcade-shell { max-width:540px; }
.arcade-top,.arcade-titlebar,.arcade-footer,.arcade-standings li { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.arcade-top { margin:.5rem 0 1.2rem; }
.arcade-top>span,#arcade-round { font-weight:800; font-size:.72rem; letter-spacing:.15em; color:var(--text-secondary); }
.arcade-titlebar { margin-bottom:.95rem; }
.arcade-titlebar h1 { font-size:clamp(1.65rem,7vw,2.45rem); }
#arcade-clock { color:var(--accent); font-size:1.15rem; font-variant-numeric:tabular-nums; }
.arcade-shell h2 { font-size:1.14rem; overflow-wrap:anywhere; }
.arcade-play h2 { margin:.4rem 0; font-size:1.35rem; }
#arcade-help,#arcade-status { font-size:.9rem; color:var(--text-secondary); line-height:1.5; }
#arcade-status:not(:empty) { margin-top:.8rem; }
#arcade-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
#arcade-actions:not(:empty) { margin-top:.9rem; }
#arcade-actions .btn,#arcade-board button,.arcade-footer button { min-height:44px; }
#arcade-board .arcade-keypad { display:grid; gap:.45rem; margin-top:1rem; }
.arcade-code { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; margin-top:1rem; }
.arcade-token { display:grid; gap:.08rem; align-content:center; justify-items:center; width:clamp(1.8rem,8vw,2.65rem); min-height:2.65rem; border:1px solid var(--border); border-radius:7px; background:var(--bg-primary); }
.arcade-token b { font-size:1.13rem; }.arcade-token small { font-size:.64rem; color:var(--text-secondary); }.arcade-token.slot { border-style:dashed; }
#arcade-board .arcade-keypad { grid-template-columns:repeat(4,minmax(0,1fr)); }
#arcade-board .arcade-key { display:grid; align-content:center; justify-items:center; min-height:58px; gap:.18rem; padding:.4rem .1rem; background:var(--bg-primary); color:var(--text-primary); border:1px solid var(--border); font-size:.8rem; }
.arcade-key b { font-size:1.2rem; }.arcade-shell .key-0 b { color:#eead2e; }.arcade-shell .key-1 b { color:#8b9df0; }.arcade-shell .key-2 b { color:#cf7ba9; }.arcade-shell .key-3 b { color:#35b3a0; }
.arcade-standings ol { list-style:none; }.arcade-standings li { padding:.55rem 0; border-bottom:1px solid var(--border); }.arcade-standings li:last-child { border-bottom:0; }
.arcade-standings li div { min-width:0; overflow-wrap:anywhere; }.arcade-standings li strong { white-space:nowrap; font-variant-numeric:tabular-nums; }
.arcade-standings small { margin-top:.16rem; font-size:.76rem; color:var(--text-secondary); }
.arcade-footer { flex-wrap:wrap; }.arcade-shell button:focus-visible,.arcade-launch:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

/* Treasure Split. The illustrated 3:2 chart and its interactive coordinates
   scale together. Each real button covers the island as well as its plaque. */
#screen-arcade.treasure-voyage {
    --chart-deep:#102f32; --chart-gold:#e9c477; --chart-paper:#f6e6be;
    color:#f5ead3; background:radial-gradient(ellipse at 30% 0%,#244c4b 0,transparent 52%),#10282b;
}
.treasure-voyage .container.arcade-shell { max-width:760px; }
.treasure-voyage .arcade-top { margin-bottom:1.1rem; }
.treasure-voyage .arcade-top>span,.treasure-voyage #arcade-round { color:#d5b57d; letter-spacing:.18em; }
.treasure-voyage .arcade-titlebar h1 { font:700 clamp(2.2rem,7vw,3.5rem)/.98 Georgia,serif; letter-spacing:-.045em; }
.treasure-voyage .arcade-titlebar { margin-bottom:1.4rem; }
.treasure-voyage #arcade-clock { color:var(--chart-gold); }
.treasure-voyage .arcade-play { background:#102f32; border:1px solid #526156; box-shadow:0 8px 36px #091b2044; }
.treasure-voyage .arcade-play h2 { font:600 clamp(1.35rem,4vw,1.8rem)/1.12 Georgia,serif; letter-spacing:-.02em; }
.treasure-voyage #arcade-help,.treasure-voyage #arcade-status,.treasure-voyage .arcade-standings small { color:#c2d0c3; }
.treasure-voyage .arcade-standings { background:transparent; border:1px solid #405c58; }
.treasure-voyage .arcade-standings h2 { font:600 1.25rem/1.2 Georgia,serif; }
.treasure-voyage .arcade-standings li { border-color:#3e5450; }
.treasure-voyage .arcade-standings li>strong { color:#e8d6a4; }
.treasure-voyage .arcade-top button,.treasure-voyage .arcade-footer button { color:#dfe4cf; border-color:#67817b; }
.treasure-voyage #arcade-actions .btn-primary { background:#eac681; color:#2c261b; }
.treasure-voyage #arcade-actions .btn-primary:disabled { opacity:.72; }
.treasure-chart { position:relative; margin:1rem 0 0; border:1px solid #b29866; border-radius:4px; overflow:hidden; background:#336d71; }
.treasure-sea { position:relative; aspect-ratio:3/2; isolation:isolate; overflow:hidden; container-type:inline-size; }
.treasure-painting { display:block; width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; }
.treasure-sea:after { content:''; position:absolute; z-index:4; inset:4px; border:1px solid #edd7a368; pointer-events:none; }
.treasure-map-title { position:absolute; top:4.1%; left:3.8%; font:italic 700 clamp(.73rem,2.95cqw,1.55rem)/1 Georgia,serif; color:#fff0ce; text-shadow:0 1px 2px #1b3235,0 0 6px #152b2d; pointer-events:none; }
.treasure-compass { position:absolute; right:3%; top:2.3%; width:6.7%; max-width:46px; color:#573c24; filter:drop-shadow(0 0 2px #f9e1af); pointer-events:none; }
.treasure-compass text { fill:currentColor; font:bold 10px Georgia,serif; }
.treasure-routes { position:absolute; height:100%; width:100%; inset:0; pointer-events:none; }
.treasure-routes path { fill:none; stroke:#fff5ce; stroke-width:.4; stroke-dasharray:1.5 2.3; stroke-linecap:round; filter:drop-shadow(0 .2px .2px #244248); }
.treasure-routes .sailed { stroke-width:.35; opacity:.91; }
#arcade-board .treasure-port { position:absolute; z-index:2; display:flex; justify-content:center; align-items:flex-end; width:37%; height:31%; transform:translateX(-50%); padding:0; margin:0; border:none; border-radius:28%; background:transparent; color:#352514; font-family:inherit; text-align:center; min-height:44px; }
#arcade-board button.treasure-port { cursor:pointer; -webkit-tap-highlight-color:transparent; }
.treasure-nameplate { display:inline-flex; flex-direction:column; align-items:center; min-width:53%; padding:.19rem clamp(.55rem,2cqw,1rem) .21rem; border:1px solid #85613c; border-radius:3px 3px 7px 7px; background:linear-gradient(#fff0c8,#ecd3a2); color:#38291b; box-shadow:0 2px 3px #24383170,inset 0 0 0 2px #f9e7c2; pointer-events:none; }
.treasure-nameplate b { font:700 clamp(.75rem,3.15cqw,1.3rem)/1.05 Georgia,serif; letter-spacing:-.02em; white-space:nowrap; }
.treasure-bounty { display:inline-flex; align-items:center; justify-content:center; gap:.25rem; margin-top:2px; font:700 clamp(.65rem,2.1cqw,.86rem)/1.05 system-ui,sans-serif; white-space:nowrap; }
.treasure-coin { display:inline-block; width:.83em; height:.83em; border:1px solid #92591d; border-radius:50%; background:radial-gradient(ellipse at 34% 31%,#ffe383 0 36%,#eaac41 40% 68%,#a66c29 75%); }
.treasure-port.charted .treasure-nameplate,#arcade-board button.treasure-port:focus-visible .treasure-nameplate { background:linear-gradient(#205350,#103936); color:#ffecd0; border-color:#f5cf7e; box-shadow:0 0 0 2px #fff1c7,0 3px 8px #162e28a1; }
#arcade-board button.treasure-port:focus-visible { outline:2px dashed #fff3cd; outline-offset:1px; }
@media (hover:hover) { #arcade-board button.treasure-port:hover .treasure-nameplate { box-shadow:0 0 0 2px #ffe1a5,0 3px 8px #132a2a88; } }
.treasure-fleet { --boat:clamp(11px,3.5cqw,26px); position:absolute; pointer-events:none; z-index:1; transform:translate(-50%,-50%); display:grid; grid-template-columns:repeat(3,auto); place-items:center; gap:0; }
.treasure-boat,.treasure-boat svg { width:var(--boat); height:auto; display:block; }
.treasure-boat:nth-child(3n+2) { transform:translateY(-22%); }
.treasure-ledger { margin-top:.9rem; }
.treasure-ledger h3 { font:600 1.12rem/1.2 Georgia,serif; margin-bottom:.35rem; }
.treasure-landing { border-top:1px solid #4d6158; padding:.52rem 0; }
.treasure-landing:last-child { padding-bottom:0; }
.treasure-landing-title { display:flex; gap:.25rem 1rem; align-items:baseline; justify-content:space-between; flex-wrap:wrap; }
.treasure-landing-title b { font:600 1rem/1.15 Georgia,serif; }
.treasure-landing-title>span { color:var(--chart-gold); font-size:.8rem; font-weight:650; }
.treasure-sailors { display:flex; flex-wrap:wrap; gap:.2rem .85rem; list-style:none; padding:0; margin:.3rem 0 0; }
.treasure-sailors li { display:inline-flex; align-items:center; gap:.2rem; max-width:100%; color:#d9dfd0; font-size:.78rem; overflow-wrap:anywhere; }
.treasure-sailors svg { flex:0 0 20px; width:20px; height:auto; }
@media (max-width:530px) {
    .treasure-voyage .arcade-play { padding:.85rem; }
    .treasure-voyage .arcade-top { margin-bottom:.65rem; }
    .treasure-voyage .arcade-titlebar { margin-bottom:.8rem; }
    .treasure-chart { margin-left:-.5rem; margin-right:-.5rem; }
    .treasure-nameplate { padding:.15rem .43rem .18rem; }
    .treasure-voyage .treasure-confirm { width:100%; }
}
.treasure-boat svg { filter:drop-shadow(0 1px 1px #102a36); }
@media (max-width:860px) {
    /* Leave the global fixed menu and theme controls clear of the chart toolbar. */
    .treasure-voyage .container.arcade-shell { padding-top:2.35rem; }
}
/* Snowfields and pale lagoons need more contrast than the original open sea. */
.treasure-chart[data-region="frost"] .treasure-map-title,
.treasure-chart[data-region="atoll"] .treasure-map-title,
.treasure-chart[data-region="blossom"] .treasure-map-title {
    padding:.13em .38em .2em; border-radius:2px; background:#152d36bc; color:#fff3d8;
}