/* Shared styles for the 2D fishing games (hook-kit.js and friends). HUD lives in .fx-hud over the canvas stage. */
.fx-wrap { width: 100%; }
.fx-wrap .ak-stage { container-type: inline-size; background: #0b1a2b; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.fx-hud { position: absolute; inset: 0; pointer-events: none; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #fff; }
.fx-hud button { pointer-events: auto; font-family: inherit; }
.fx-top { position: absolute; left: 10px; top: 10px; right: 120px; display: flex; gap: 6px; flex-wrap: wrap; }
.fx-pill { background: rgba(8, 16, 28, .66); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 4px 12px; font: 800 15px system-ui, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.fx-money { color: #fde047; font-size: 17px; }
.fx-tb { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; }
.fx-tb button, .fx-tb .ak-mute { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(8, 16, 28, .66); color: #fff; font-size: 17px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.fx-tb button:hover { background: rgba(30, 60, 100, .85); }
.fx-tb button:focus-visible, .fx-upg:focus-visible, .fx-cast:focus-visible { outline: 3px solid #fde047; outline-offset: 2px; }
.fx-msg { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(.92); opacity: 0; transition: opacity .2s, transform .2s; background: rgba(8, 16, 28, .78); border: 1px solid rgba(255, 255, 255, .22); border-radius: 14px; padding: 8px 18px; font: 800 clamp(14px, 2.4cqw, 22px) system-ui, sans-serif; text-align: center; max-width: 86%; text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.fx-msg.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.fx-msg small { display: block; font-weight: 600; font-size: .7em; opacity: .9; }

/* shop: upgrades + cast button along the bottom */
.fx-shop { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 8px; align-items: stretch; transition: transform .3s, opacity .3s; }
.fx-shop.is-off { transform: translateY(130%); opacity: 0; pointer-events: none; }
.fx-shop.is-off * { pointer-events: none; }
.fx-upgs { display: flex; gap: 6px; flex: 1; min-width: 0; }
.fx-upg { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 6px; align-items: center; text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(226, 238, 250, .96)); color: #0f172a; border: 2px solid #fff; border-bottom-width: 4px; border-bottom-color: #94a3b8; border-radius: 12px; padding: 6px 8px; cursor: pointer; }
.fx-upg:hover:not(:disabled) { transform: translateY(-1px); border-bottom-color: #22c55e; }
.fx-upg:disabled { opacity: .62; cursor: default; filter: saturate(.6); }
.fx-upg__i { grid-row: 1 / 4; font-size: 24px; }
.fx-upg b { font-size: 13px; line-height: 1.1; }
.fx-upg small { font-size: 11px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-upg em { font-style: normal; font-weight: 900; font-size: 14px; color: #15803d; }
.fx-upg:disabled em { color: #b91c1c; }
.fx-cast { flex: 0 0 auto; min-width: 120px; border: 0; border-radius: 14px; cursor: pointer; color: #fff; font: 900 22px system-ui, sans-serif; letter-spacing: .03em;
  background: linear-gradient(180deg, #22c55e, #15803d); box-shadow: 0 5px 0 #14532d, 0 8px 18px rgba(0, 0, 0, .35); padding: 6px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fx-cast small { font: 700 10px system-ui, sans-serif; opacity: .85; letter-spacing: .06em; }
.fx-cast:hover { filter: brightness(1.08); }
.fx-cast:active { transform: translateY(3px); box-shadow: 0 2px 0 #14532d; }

/* modal: book / help / welcome back */
.fx-modal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(2, 8, 20, .62); pointer-events: auto; padding: 12px; }
.fx-modal[hidden] { display: none; }
.fx-modal__card { position: relative; width: min(760px, 100%); max-height: 100%; overflow: auto; background: #0f1d33; border: 1px solid rgba(255, 255, 255, .2); border-radius: 16px; padding: 14px 18px; color: #e2e8f0; text-align: left; }
.fx-modal__card--sm { width: min(380px, 100%); text-align: center; }
.fx-modal__card h3 { margin: 0 0 6px; font-size: 20px; color: #fff; }
.fx-modal__card h4 { margin: 12px 0 6px; font-size: 15px; color: #7dd3fc; }
.fx-modal__card h4 small { color: #94a3b8; font-weight: 600; }
.fx-modal__card p, .fx-modal__card li { font-size: 14px; line-height: 1.45; }
.fx-modal__card ol { padding-left: 20px; margin: 6px 0; }
.fx-big { font: 900 34px system-ui, sans-serif; color: #fde047; margin: 6px 0 12px; }
.fx-x { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; font-size: 16px; cursor: pointer; }
.fx-book__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.fx-book__f { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; padding: 6px 4px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.fx-book__f img { width: 56px; height: 56px; }
.fx-book__f span { font-size: 12px; font-weight: 800; color: #fff; line-height: 1.15; }
.fx-book__f small { font-size: 11px; color: #94a3b8; }
.fx-book__f.is-locked span { color: #64748b; }

/* result card bits + setup help (the 2D pages don't load sim3d.css) */
.fx-modal .sim-result__stars { font-size: 30px; letter-spacing: 4px; margin: 4px 0 8px; }
.fx-modal .sim-result__btns { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.sim-controls-help { font-size: 13px; opacity: .85; line-height: 1.5; margin-top: 14px; }
.sim-controls-help kbd { background: var(--color-bg-alt, #1c1f27); border: 1px solid var(--color-border, #333); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; font: 700 12px ui-monospace, monospace; }

@container (max-width: 620px) {
  .fx-pill { font-size: 13px; padding: 3px 9px; }
  .fx-money { font-size: 14px; }
  .fx-top { right: 92px; }
  .fx-tb button, .fx-tb .ak-mute { width: 34px; height: 34px; font-size: 15px; }
  .fx-shop { flex-direction: column; left: 8px; right: 8px; bottom: 8px; gap: 6px; }
  .fx-upgs { flex-wrap: wrap; }
  .fx-upg { flex: 1 1 calc(50% - 6px); padding: 5px 6px; }
  .fx-upg__i { font-size: 20px; }
  .fx-cast { min-height: 56px; flex-direction: row; gap: 10px; font-size: 20px; }
  .fx-cast small { display: none; }
}
@container (max-width: 480px) {
  .fx-top { right: 118px; gap: 4px; left: 8px; top: 8px; }
  .fx-pill { font-size: 12px; padding: 2px 8px; }
  .fx-money { font-size: 13px; }
  .fx-tb { right: 8px; top: 8px; gap: 4px; }
  .fx-upgs { flex-wrap: nowrap; gap: 4px; }
  .fx-upg { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; padding: 4px 3px; border-radius: 10px; }
  .fx-upg__i { font-size: 17px; line-height: 1.1; }
  .fx-upg b { font-size: 10.5px; white-space: nowrap; }
  .fx-upg small { font-size: 9.5px; max-width: 100%; }
  .fx-upg em { font-size: 12px; }
  .fx-cast { min-height: 46px; font-size: 18px; border-radius: 12px; }
  .fx-msg { top: 24%; }
}
@media (prefers-reduced-motion: reduce) { .fx-msg, .fx-shop { transition: none; } }