/* css/style.css - all UI styling (owner: ui). Pixel look: chunky 2-4 px borders, no rounded corners. */
:root {
  --ink: #181425; --night: #262b44; --slate: #3a4466; --steel: #5a6988; --fog: #8b9bb4; --mist: #c0cbdc; --white: #ffffff;
  --abyss: #0f2c52; --sea: #124e89; --lagoon: #0099db; --spray: #2ce8f5;
  --darkwood: #3e2731; --wood: #733e39; --plank: #b86f50; --tan: #e4a672; --sand: #ead4aa;
  --red: #e43b44; --blood: #a22633; --orange: #f77622; --gold: #feae34; --yellow: #fee761; --lime: #63c74d; --leaf: #3e8948;
  --font-ui: 'Silkscreen', ui-monospace, 'Courier New', monospace;
  --font-title: 'Press Start 2P', 'Silkscreen', ui-monospace, monospace;
  --top-h: 56px;
  --drawer-w: 380px;
  --mm: 160px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--abyss); color: var(--sand); font-family: var(--font-ui); font-size: 12px; line-height: 1.35; }
body { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
#ui > .hud-layer { pointer-events: none; }
#ui > .hud-layer > * { pointer-events: auto; }
#boot { position: fixed; inset: 0; display: grid; place-items: center; font-family: var(--font-title); color: var(--yellow); background: var(--abyss); z-index: 50; text-align: center; line-height: 2; }
#boot small { display: block; font-family: var(--font-ui); color: var(--mist); }
#fps { position: fixed; left: 4px; bottom: 4px; font-size: 10px; color: var(--lime); z-index: 40; pointer-events: none; }
#busy { position: fixed; left: 50%; top: 40%; transform: translateX(-50%); z-index: 45; padding: 10px 16px; background: var(--darkwood); color: var(--yellow); border: 3px solid var(--plank); box-shadow: 0 0 0 3px var(--ink); font-size: 12px; pointer-events: none; }
img.ico { image-rendering: pixelated; image-rendering: crisp-edges; display: block; flex: none; }
img.ico.sm { width: 16px; height: 16px; }
img.ico.md { width: 32px; height: 32px; }
input, textarea { user-select: text; -webkit-user-select: text; }
.hidden, [hidden] { display: none !important; }

/* ---------- buttons ---------- */
button {
  font: inherit; font-size: 11px; letter-spacing: .5px; cursor: pointer; color: var(--sand);
  background: var(--wood); border: 2px solid var(--ink); border-radius: 0;
  box-shadow: inset 0 -3px 0 var(--darkwood), inset 0 2px 0 rgba(255, 255, 255, .16);
  padding: 4px 9px; min-height: 28px; touch-action: manipulation; white-space: nowrap;
}
button:hover:not(:disabled) { background: var(--plank); color: var(--white); }
button:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 2px 0 var(--darkwood); }
button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 1px; }
button:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.5); }
button.primary { background: var(--gold); color: var(--ink); box-shadow: inset 0 -3px 0 var(--orange), inset 0 2px 0 rgba(255, 255, 255, .35); }
button.primary:hover:not(:disabled) { background: var(--yellow); color: var(--ink); }
button.danger { background: var(--red); color: var(--white); box-shadow: inset 0 -3px 0 var(--blood), inset 0 2px 0 rgba(255, 255, 255, .25); }
button.danger:hover:not(:disabled) { background: var(--orange); }
button.mini { min-height: 22px; padding: 1px 6px; font-size: 11px; }
button.active { background: var(--lagoon); color: var(--white); box-shadow: inset 0 -3px 0 var(--sea), inset 0 2px 0 rgba(255, 255, 255, .3); }
button.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ---------- common frame ---------- */
.frame {
  background: var(--darkwood); border: 3px solid var(--plank); box-shadow: 0 0 0 3px var(--ink), 0 6px 0 3px rgba(24, 20, 37, .45);
}

/* ---------- progress bars ---------- */
.bar { height: 10px; background: var(--ink); border: 2px solid var(--ink); box-shadow: 0 0 0 1px var(--steel); position: relative; min-width: 24px; }
.bar > i { display: block; height: 100%; width: 0; background: var(--lime); background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 2px, transparent 2px 6px); }
.bar.hp.mid > i { background-color: var(--gold); }
.bar.hp.low > i { background-color: var(--red); }
.bar.prog > i { background-color: var(--lagoon); }
.bar.cap > i { background-color: var(--orange); }
.bar.thin { height: 6px; }

/* ---------- top HUD ---------- */
#hud-top { position: fixed; left: 0; right: 0; top: 0; z-index: 10; display: flex; flex-direction: column; gap: 6px; padding: calc(6px + var(--safe-t)) calc(6px + var(--safe-r)) 0 calc(6px + var(--safe-l)); }
.topbar { display: flex; align-items: stretch; gap: 8px; padding: 4px 6px; background: var(--darkwood); border: 3px solid var(--plank); box-shadow: 0 0 0 3px var(--ink), 0 5px 0 3px rgba(24, 20, 37, .4); }
.tb-res, .tb-right { display: flex; align-items: center; gap: 6px; }
.tb-res { flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tb-right { flex: 0 0 auto; }
.tb-btns { display: flex; gap: 4px; }
.chip { display: flex; align-items: center; gap: 6px; padding: 2px 8px 2px 6px; background: var(--ink); border: 2px solid var(--slate); min-width: 104px; flex: 0 0 auto; }
.chip .v { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.chip .amt { color: var(--sand); font-size: 12px; font-weight: 700; white-space: nowrap; }
.chip .cap { color: var(--fog); font-weight: 400; font-size: 10px; }
.chip .rate { font-size: 10px; color: var(--lime); white-space: nowrap; }
.chip .rate.neg { color: var(--red); }
.chip .rate.zero { color: var(--fog); }
.chip.full .amt { color: var(--orange); }
.tb-server { display: flex; align-items: center; gap: 6px; padding: 0 6px; color: var(--mist); font-size: 11px; white-space: nowrap; }
.tb-server b { color: var(--yellow); font-weight: 700; }
.grace { padding: 1px 5px; background: var(--sea); color: var(--spray); border: 2px solid var(--lagoon); font-size: 10px; cursor: help; }
.grace.comeback { background: var(--leaf); color: var(--yellow); border-color: var(--lime); }
.dot { display: inline-block; width: 8px; height: 8px; background: var(--steel); box-shadow: 0 0 0 1px var(--ink); flex: none; }
.dot.on { background: var(--lime); }
.dot.off { background: var(--steel); }
.tb-btns button { position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; }
.tb-btns .badge { position: absolute; top: -7px; right: -7px; min-width: 16px; padding: 0 3px; background: var(--red); color: var(--white); font-size: 10px; line-height: 14px; text-align: center; border: 2px solid var(--ink); }
.morale { align-self: center; background: var(--blood); color: var(--white); border: 3px solid var(--ink); box-shadow: 0 0 0 3px var(--red); padding: 4px 12px; font-size: 12px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { background: var(--red); } }
.ticker { align-self: flex-start; max-width: min(46vw, 560px); padding: 3px 8px; background: rgba(24, 20, 37, .78); border: 2px solid var(--slate); color: var(--mist); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: opacity .6s; }
.ticker.old { opacity: 0; pointer-events: none; }
.ticker .gtag { margin-right: 4px; }
.ticker .nm { font-weight: 700; }
.toasts { display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast { pointer-events: auto; max-width: min(92vw, 460px); padding: 8px 14px; background: var(--darkwood); color: var(--sand); border: 3px solid var(--plank); box-shadow: 0 0 0 3px var(--ink), 0 5px 0 3px rgba(24, 20, 37, .4); animation: toast-in .24s steps(4); font-size: 12px; text-align: center; transition: opacity .3s; }
.toast.out { opacity: 0; }
.toast.good { border-color: var(--lime); }
.toast.bad { border-color: var(--red); color: var(--white); }
.toast.warn { border-color: var(--orange); }
.toast.info { border-color: var(--lagoon); }
.toast.has-pos { cursor: pointer; }
@keyframes toast-in { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- selection panel (bottom left) ---------- */
#hud-bl { position: fixed; left: calc(8px + var(--safe-l)); bottom: calc(8px + var(--safe-b)); z-index: 10; width: 290px; max-width: calc(100vw - var(--mm) - 36px - var(--safe-l) - var(--safe-r)); }
.selpanel { padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.sel-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sel-title { color: var(--yellow); font-size: 12px; font-weight: 700; }
.sel-sum { color: var(--mist); font-size: 10px; }
.sel-list { display: flex; flex-direction: column; gap: 3px; max-height: 168px; overflow-y: auto; touch-action: pan-y; padding-right: 2px; }
.sel-row { display: grid; grid-template-columns: 16px 1fr 56px; align-items: center; gap: 6px; padding: 2px 4px; background: rgba(24, 20, 37, .6); border: 2px solid var(--wood); cursor: pointer; font-size: 11px; }
.sel-row:hover { border-color: var(--gold); }
.sel-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-row .ord { color: var(--fog); font-size: 9px; margin-left: 6px; }
.sel-more { color: var(--fog); font-size: 10px; text-align: center; }
.sel-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.sel-btns button { flex: 1 1 auto; }

/* ---------- bottom right: camera buttons + minimap ---------- */
#hud-br { position: fixed; right: calc(8px + var(--safe-r)); bottom: calc(8px + var(--safe-b)); z-index: 10; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; transition: right .1s; }
.cam-btns { display: flex; gap: 4px; }
.cam-btns button { min-width: 34px; min-height: 34px; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; padding: 2px 8px; }
.cam-btns .touch-only { display: none; }
.minimap-frame { padding: 3px; background: var(--darkwood); border: 3px solid var(--plank); box-shadow: 0 0 0 3px var(--ink), 0 5px 0 3px rgba(24, 20, 37, .4); }
.minimap { display: block; width: var(--mm); height: var(--mm); image-rendering: pixelated; image-rendering: crisp-edges; background: var(--abyss); cursor: crosshair; touch-action: none; }
#ui.has-panel #hud-br { right: calc(var(--drawer-w) + 22px); }

/* ---------- first-steps hint card ---------- */
.first-steps { position: fixed; left: calc(8px + var(--safe-l)); top: calc(var(--top-h) + 14px); z-index: 20; width: 330px; padding: 8px 10px; font-size: 11px; color: var(--sand); }
.first-steps .fs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.first-steps .fs-head b { font-family: var(--font-title); font-size: 10px; color: var(--yellow); }
.first-steps ol { margin: 6px 0 8px; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.first-steps .fs-btns { display: flex; gap: 6px; justify-content: flex-end; }

/* island panel: strength preview */
.odds { font-size: 11px; padding-left: 8px; border-left: 4px solid var(--steel); color: var(--mist); }
.odds.good { border-color: var(--lime); color: var(--lime); }
.odds.mid { border-color: var(--gold); color: var(--yellow); }
.odds.bad { border-color: var(--red); color: var(--red); }

/* ---------- drawer panel ---------- */
.panel { position: fixed; right: calc(8px + var(--safe-r)); top: calc(var(--top-h) + 14px); bottom: calc(8px + var(--safe-b)); width: var(--drawer-w); z-index: 30; display: flex; flex-direction: column; background: var(--darkwood); border: 4px solid var(--plank); box-shadow: 0 0 0 4px var(--ink), 0 6px 0 4px rgba(24, 20, 37, .4); animation: drawer-in .18s steps(4); }
@keyframes drawer-in { from { transform: translateX(40px); opacity: .2; } to { transform: none; opacity: 1; } }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--wood); border-bottom: 4px solid var(--ink); }
.panel-head h2 { margin: 0; font-family: var(--font-title); font-size: 11px; line-height: 1.5; color: var(--yellow); text-shadow: 2px 2px 0 var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-tabs { display: flex; gap: 4px; padding: 6px 8px 0; background: var(--darkwood); border-bottom: 3px solid var(--plank); }
.panel-tabs button { flex: 1 1 0; border-bottom: 0; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .15); background: var(--night); color: var(--fog); }
.panel-tabs button.active { background: var(--plank); color: var(--white); }
.panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px; display: flex; flex-direction: column; gap: 8px; touch-action: pan-y; overscroll-behavior: contain; }
.panel-body.chat { padding-bottom: 6px; }
.panel-body::-webkit-scrollbar, .sel-list::-webkit-scrollbar { width: 8px; }
.panel-body::-webkit-scrollbar-thumb, .sel-list::-webkit-scrollbar-thumb { background: var(--plank); border: 2px solid var(--ink); }
.panel-body::-webkit-scrollbar-track, .sel-list::-webkit-scrollbar-track { background: var(--ink); }
.panel .close-btn { min-width: 34px; }

.section-title { font-family: var(--font-title); font-size: 9px; color: var(--tan); margin: 4px 0 -2px; line-height: 1.6; }
.hint { color: var(--fog); font-size: 11px; }
.hint.warn { color: var(--orange); }
.hint.bad { color: var(--red); }
.muted { color: var(--fog); }
.hl { color: var(--yellow); }
.swatch { display: inline-block; width: 10px; height: 10px; border: 2px solid var(--ink); vertical-align: -1px; margin-right: 4px; }

.row { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 8px; background: rgba(24, 20, 37, .55); border: 2px solid var(--wood); }
.row.flat { grid-template-columns: 1fr; }
.row .info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.row .name { color: var(--white); font-size: 12px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.row .lvl { color: var(--yellow); font-size: 11px; font-weight: 400; }
.row .desc { color: var(--mist); font-size: 11px; }
.row .effect { color: var(--lime); font-size: 11px; }
.row .act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.row .act .time { color: var(--fog); font-size: 11px; }
.row .reason { color: var(--orange); font-size: 10px; flex: 1 1 100%; }
.row.maxed { opacity: .8; }
.costs { display: inline-flex; flex-wrap: wrap; gap: 2px 8px; }
.cost { display: inline-flex; align-items: center; gap: 3px; color: var(--sand); font-size: 11px; }
.cost.lack { color: var(--red); }
.cost b { font-weight: 700; }
.stats { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--mist); font-size: 10px; }
.stats span b { color: var(--yellow); font-weight: 700; }
.qrow { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center; padding: 5px 8px; background: rgba(24, 20, 37, .55); border: 2px solid var(--slate); font-size: 11px; }
.qrow .q-mid { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qrow .q-name { color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qrow .q-time { color: var(--fog); font-size: 10px; }
.kv { display: flex; justify-content: space-between; gap: 10px; padding: 3px 2px; border-bottom: 2px dotted var(--wood); font-size: 11px; }
.kv > :first-child { color: var(--tan); }
.kv > :last-child { color: var(--white); text-align: right; }
.btn-row { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-row button { flex: 1 1 auto; }
.box { padding: 8px; background: rgba(24, 20, 37, .55); border: 2px solid var(--wood); display: flex; flex-direction: column; gap: 6px; }
.res-line { display: grid; grid-template-columns: 16px 1fr auto auto; align-items: center; gap: 8px; padding: 3px 2px; border-bottom: 2px dotted var(--wood); font-size: 11px; }
.res-line .rt { color: var(--lime); text-align: right; min-width: 70px; }
.res-line .rt.neg { color: var(--red); }
.res-line .ra { color: var(--sand); text-align: right; }

/* chat */
.chat-log { flex: 1 1 auto; min-height: 120px; overflow-y: auto; padding: 6px; background: var(--ink); border: 2px solid var(--slate); display: flex; flex-direction: column; gap: 3px; touch-action: pan-y; user-select: text; -webkit-user-select: text; }
.chat-line { font-size: 11px; line-height: 1.4; word-break: break-word; color: var(--mist); }
.chat-line .t { color: var(--steel); margin-right: 6px; font-size: 9px; }
.chat-line .gtag { margin-right: 4px; font-weight: 700; }
.chat-line .nm { font-weight: 700; }
.chat-line.sys { color: var(--spray); }
.chat-line.me .txt { color: var(--white); }
.chat-form { display: flex; gap: 6px; }
.chat-form input { flex: 1 1 auto; min-width: 0; }
input[type=text], .modal input, .chat-form input { font: inherit; font-size: 16px; padding: 6px 8px; background: var(--ink); color: var(--sand); border: 2px solid var(--plank); border-radius: 0; min-height: 36px; outline: none; }
input[type=text]:focus, .modal input:focus, .chat-form input:focus { border-color: var(--yellow); }
input:disabled { opacity: .5; }

/* tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 11px; }
.tbl th { color: var(--tan); text-align: left; padding: 4px 4px; border-bottom: 3px solid var(--plank); font-weight: 400; font-size: 10px; }
.tbl td { padding: 5px 4px; border-bottom: 2px dotted var(--wood); color: var(--sand); }
.tbl tr.me td { background: rgba(254, 231, 97, .16); color: var(--yellow); font-weight: 700; }
.tbl .num { text-align: right; }
.tbl .rank { color: var(--fog); width: 26px; }
.tbl .gt { color: var(--fog); font-size: 10px; }

/* reports */
.report { background: rgba(24, 20, 37, .55); border: 2px solid var(--wood); cursor: pointer; }
.report.unread { border-color: var(--gold); }
.report-head { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; }
.report-head .rt { color: var(--white); font-size: 11px; }
.report-head .rtime { color: var(--fog); font-size: 10px; }
.report-body { padding: 0 8px 8px 32px; color: var(--mist); font-size: 11px; white-space: pre-wrap; display: none; user-select: text; -webkit-user-select: text; }
.report.open .report-body { display: block; }
.report .newdot { width: 8px; height: 8px; background: var(--gold); display: inline-block; margin-right: 4px; }

/* guilds */
.guild { padding: 8px; background: rgba(24, 20, 37, .55); border: 2px solid var(--wood); display: flex; flex-direction: column; gap: 6px; }
.guild.mine { border-color: var(--yellow); }
.guild-head { display: flex; align-items: center; gap: 8px; }
.guild-head .gn { color: var(--white); font-weight: 700; font-size: 12px; flex: 1 1 auto; }
.guild-head .gt { color: var(--yellow); font-family: var(--font-title); font-size: 10px; }
.members { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 11px; color: var(--mist); }
.members span { display: inline-flex; align-items: center; gap: 4px; }
.members .self { color: var(--yellow); }

/* ---------- modals ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(24, 20, 37, .75); display: grid; place-items: center; z-index: 100; padding: 16px; animation: fade-in .15s steps(3); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal { background: var(--darkwood); border: 4px solid var(--plank); box-shadow: 0 0 0 4px var(--ink), 0 8px 0 4px rgba(24, 20, 37, .5); padding: 16px; max-width: 520px; width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; color: var(--sand); touch-action: pan-y; }
.modal h2 { font-family: var(--font-title); font-size: 13px; color: var(--yellow); margin: 0 0 12px; line-height: 1.6; text-shadow: 2px 2px 0 var(--ink); }
.modal p { margin: 0 0 8px; font-size: 12px; }
.modal ul { margin: 4px 0 8px; padding-left: 18px; font-size: 11px; }
.modal li { margin-bottom: 2px; }
.modal .res-delta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0 10px; }
.modal .res-delta span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; background: var(--ink); border: 2px solid var(--slate); font-size: 12px; }
.modal .pos { color: var(--lime); }
.modal .neg { color: var(--red); }
.modal-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.modal-buttons button { min-height: 36px; padding: 6px 14px; }

/* title screen */
.title-screen { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; overflow: hidden;
  background: linear-gradient(var(--night) 0 30%, var(--slate) 30% 36%, var(--steel) 36% 40%, var(--sea) 40% 52%, var(--lagoon) 52% 55%, var(--sea) 55% 72%, var(--abyss) 72%); }
.title-screen::before, .title-screen::after { content: ''; position: absolute; left: -64px; right: -64px; height: 8px; background: repeating-linear-gradient(90deg, transparent 0 40px, rgba(44, 232, 245, .55) 40px 56px, transparent 56px 96px); animation: waves 3s steps(6) infinite; }
.title-screen::before { top: 62%; }
.title-screen::after { top: 78%; animation-duration: 4.5s; animation-direction: reverse; opacity: .6; }
@keyframes waves { to { transform: translateX(96px); } }
.title-ship { position: absolute; left: 50%; top: 42%; width: 128px; height: 128px; margin-left: -64px; image-rendering: pixelated; animation: bob 2.4s steps(4) infinite; opacity: .95; pointer-events: none; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.title-card { position: relative; z-index: 2; width: min(100%, 440px); padding: 22px 20px 18px; text-align: center; background: var(--darkwood); border: 4px solid var(--plank); box-shadow: 0 0 0 4px var(--ink), 0 10px 0 4px rgba(24, 20, 37, .5); }
.title-card h1 { font-family: var(--font-title); margin: 0; font-size: 26px; line-height: 1.35; color: var(--yellow); text-shadow: 3px 3px 0 var(--blood), 5px 5px 0 var(--ink); letter-spacing: 1px; }
.title-card .sub { margin: 10px 0 2px; color: var(--spray); font-size: 13px; }
.title-card .tag { margin: 0 0 16px; color: var(--mist); font-size: 11px; }
.title-card label { display: block; text-align: left; margin-bottom: 4px; color: var(--tan); font-size: 11px; }
.title-card input { width: 100%; text-align: center; font-size: 18px; }
.title-card button { width: 100%; margin-top: 14px; min-height: 44px; font-family: var(--font-title); font-size: 12px; }
.title-card .foot { margin-top: 12px; color: var(--steel); font-size: 10px; }
.title-sprite-row { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; }

/* ---------- touch / mobile ---------- */
@media (hover: none), (pointer: coarse) {
  .cam-btns .touch-only { display: inline-flex; }
  button { min-height: 40px; }
  button.mini { min-height: 32px; min-width: 32px; }
  .cam-btns button { min-width: 44px; min-height: 44px; }
  .sel-row { min-height: 36px; }
  .tb-btns button { min-height: 40px; }
}
@media (max-width: 1280px) {
  :root { --drawer-w: 340px; }
}
@media (max-width: 1560px) and (min-width: 701px) {
  .tb-btns button .lbl { display: none; }
  .tb-btns button { min-width: 36px; justify-content: center; padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 1100px) {
  .topbar { flex-direction: column; gap: 4px; }
  .tb-right { justify-content: space-between; overflow-x: auto; scrollbar-width: none; }
}
@media (max-width: 700px) {
  :root { --mm: 112px; }
  .cam-btns .touch-only { display: inline-flex; }
  .cam-btns { flex-direction: column; }
  .cam-btns button { width: 44px; min-width: 44px; padding: 2px; }
  .cam-btns { align-items: flex-end; }
  .cam-btns .touch-only { width: auto; min-width: 44px; padding: 2px 4px; font-size: 9px; letter-spacing: 0; }
  .sel-btns button { min-height: 34px; }
  #hud-top { padding-left: calc(4px + var(--safe-l)); padding-right: calc(4px + var(--safe-r)); padding-top: calc(4px + var(--safe-t)); gap: 4px; }
  .topbar { flex-direction: column; gap: 4px; padding: 3px 4px; }
  .tb-res, .tb-right { overflow-x: auto; scrollbar-width: none; touch-action: pan-x; -webkit-overflow-scrolling: touch; }
  .tb-res::-webkit-scrollbar, .tb-right::-webkit-scrollbar { display: none; }
  .tb-right { justify-content: space-between; padding: 6px 0 0; }
  .tb-res { padding-bottom: 1px; }
  .chip { flex: 1 1 0; min-width: 0; padding: 1px 3px; gap: 3px; }
  .chip .amt { font-size: 10px; }
  .chip .cap { display: none; }
  .chip .rate { font-size: 9px; letter-spacing: -.5px; }
  .chip img { width: 12px; height: 12px; }
  .tb-server { padding: 0 2px; font-size: 10px; }
  .tb-server .sname { display: none; }
  .tb-btns button .lbl { display: none; }
  .tb-btns button { min-width: 40px; justify-content: center; padding: 4px 6px; }
  .ticker { display: none; }
  .first-steps { left: calc(6px + var(--safe-l)); right: calc(6px + var(--safe-r)); width: auto; }
  .toast { font-size: 11px; padding: 6px 10px; }
  #hud-bl { width: auto; right: calc(var(--mm) + 28px + var(--safe-r)); max-width: none; }
  .sel-list { max-height: 112px; }
  .sel-btns button { padding: 4px 5px; font-size: 10px; }
  #ui.has-panel #hud-br { right: calc(8px + var(--safe-r)); }
  .panel { inset: 0; width: auto; border-width: 0; border-top: 4px solid var(--ink); box-shadow: none; z-index: 60; padding-top: var(--safe-t); padding-bottom: var(--safe-b); padding-left: var(--safe-l); padding-right: var(--safe-r); animation: sheet-in .2s steps(4); }
  @keyframes sheet-in { from { transform: translateY(40px); opacity: .2; } to { transform: none; opacity: 1; } }
  .panel-head h2 { font-size: 10px; }
  .panel .close-btn { min-width: 48px; min-height: 44px; font-size: 16px; }
  .panel-tabs button { min-height: 40px; font-size: 10px; padding: 4px 2px; }
  .row { grid-template-columns: 32px 1fr; padding: 8px 6px; gap: 8px; }
  .title-card h1 { font-size: 20px; }
  .title-ship { width: 96px; height: 96px; margin-left: -48px; top: 8%; }
  .modal { padding: 12px; }
}
@media (max-width: 380px) {
  .tb-btns { gap: 3px; }
  .tb-btns button { min-width: 36px; }
}
@media (max-height: 520px) and (min-width: 701px) {
  .sel-list { max-height: 90px; }
}