:root {
  color-scheme: dark;
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ink: #071b28;
  --deep: #062f45;
  --cream: #fff5dc;
  --orange: #ff7c48;
  --yellow: #ffc959;
  --foam: #9debd5;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}

body { user-select: none; }
button { font: inherit; }

.game-shell {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

#game.dragging { cursor: grabbing; }

.topbar {
  position: absolute;
  z-index: 4;
  top: max(20px, env(safe-area-inset-top));
  left: max(24px, env(safe-area-inset-left));
  right: max(24px, env(safe-area-inset-right));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none;
}

.brand { display: flex; align-items: center; gap: 11px; color: var(--cream); text-shadow: 0 3px 16px rgba(0,0,0,.22); }
.brand-hook { width: 39px; height: 45px; color: var(--yellow); font-family: Georgia, serif; font-size: 47px; font-style: italic; font-weight: 900; line-height: 32px; transform: rotate(16deg); }
.brand strong, .brand small { display: block; }
.brand strong { font-family: "Songti SC", Georgia, serif; font-size: 20px; letter-spacing: .14em; }
.brand small { margin-top: 3px; color: var(--foam); font-size: 8px; font-weight: 800; letter-spacing: .31em; }

.stats { display: flex; gap: 8px; }
.stat {
  min-width: 94px;
  padding: 10px 14px 9px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 13px;
  background: rgba(4, 29, 41, .55);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 10px 30px rgba(0, 18, 28, .13);
  text-align: right;
  backdrop-filter: blur(13px);
}
.stat strong, .stat small { display: block; }
.stat strong { color: white; font-size: 17px; font-variant-numeric: tabular-nums; }
.stat small { margin-top: 2px; color: rgba(255,255,255,.5); font-size: 8px; letter-spacing: .1em; }
.coin-stat { position: relative; padding-left: 42px; }
.coin { position: absolute; left: 11px; top: 11px; display: grid; width: 25px; height: 25px; place-items: center; border: 2px solid #d89426; border-radius: 50%; background: var(--yellow); color: #8b5914; font-size: 12px; font-weight: 900; box-shadow: 0 0 15px rgba(255, 201, 89, .25); }

.depth-rail {
  position: absolute;
  z-index: 3;
  top: 125px;
  right: max(28px, env(safe-area-inset-right));
  bottom: 122px;
  width: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(255,255,255,.45);
  font-size: 8px;
  pointer-events: none;
}
.depth-rail i { width: 1px; flex: 1; margin: 8px 0; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.45) 0 3px, transparent 3px 9px); }
.depth-rail strong { color: var(--foam); font-size: 10px; font-variant-numeric: tabular-nums; }

.shop {
  position: absolute;
  z-index: 5;
  left: max(22px, env(safe-area-inset-left));
  bottom: max(22px, env(safe-area-inset-bottom));
  width: 255px;
  padding: 13px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 18px;
  background: rgba(4, 29, 41, .72);
  box-shadow: 0 16px 45px rgba(0, 18, 28, .22), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(15px);
}
.shop-title { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 9px; color: white; }
.shop-title span { font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.shop-title small { color: rgba(255,255,255,.42); font-size: 8px; }
.upgrade-card {
  width: 100%;
  display: grid;
  grid-template-columns: 35px 1fr auto;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px;
  background: rgba(255,255,255,.07);
  color: white;
  cursor: pointer;
  text-align: left;
  transition: transform .16s, background .16s, border-color .16s, opacity .16s;
}
.upgrade-card:hover:not(:disabled) { transform: translateX(3px); border-color: rgba(157,235,213,.55); background: rgba(157,235,213,.12); }
.upgrade-card:disabled { opacity: .42; cursor: not-allowed; }
.upgrade-card > span:nth-child(2) strong, .upgrade-card > span:nth-child(2) small { display: block; }
.upgrade-card > span:nth-child(2) strong { font-size: 10px; }
.upgrade-card > span:nth-child(2) small { margin-top: 2px; color: rgba(255,255,255,.46); font-size: 8px; }
.upgrade-card b { padding: 5px 7px; border-radius: 7px; background: rgba(255,201,89,.14); color: var(--yellow); font-size: 9px; white-space: nowrap; }
.upgrade-icon { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 9px; font-size: 19px; font-weight: 900; }
.line-icon { background: #c7ecdf; color: #1e7567; }
.basket-icon { background: #ffd9ad; color: #a65d31; transform: rotate(45deg); }

.fish-guide { position: absolute; z-index: 5; right: max(22px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); }
.fish-guide > button { padding: 10px 13px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(4,29,41,.68); color: white; font-size: 9px; font-weight: 800; cursor: pointer; backdrop-filter: blur(12px); }
.fish-guide > button span { margin-left: 7px; color: var(--foam); }
.guide-list {
  position: absolute;
  right: 0;
  bottom: 45px;
  width: 245px;
  max-height: min(68vh, 570px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  background: rgba(4,29,41,.86);
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  backdrop-filter: blur(16px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.guide-list::-webkit-scrollbar { width: 4px; }
.guide-list::-webkit-scrollbar-thumb { border-radius: 4px; background: rgba(157,235,213,.35); }
.fish-guide.open .guide-list { opacity: 1; visibility: visible; transform: translateY(0); }
.guide-row { display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 8px; padding: 6px 5px; border-bottom: 1px solid rgba(255,255,255,.06); }
.guide-row:last-child { border: 0; }
.fish-swatch { position: relative; width: 28px; height: 13px; border-radius: 55% 45% 45% 55%; box-shadow: inset -6px 0 rgba(0,0,0,.13); }
.fish-swatch::before { content: ""; position: absolute; left: -7px; top: 2px; border-top: 5px solid transparent; border-right: 8px solid currentColor; border-bottom: 5px solid transparent; filter: brightness(.82); }
.guide-row strong, .guide-row small { display: block; }
.guide-row strong { color: white; font-size: 9px; }
.guide-row small { margin-top: 1px; color: rgba(255,255,255,.4); font-size: 7px; }
.guide-row b { color: var(--yellow); font-size: 9px; }
.procedural-row { position: sticky; bottom: -10px; border-top: 1px solid rgba(157,235,213,.28); border-radius: 9px; background: rgba(9,53,65,.96); }
.procedural-row .fish-swatch { color: #86e3d0; background: linear-gradient(135deg, #7254a0, #45a99b, #e7bd58); }

.cast-panel { position: absolute; z-index: 4; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 13px; transform: translateX(-50%); pointer-events: none; }
.cast-panel p { min-width: 190px; margin: 0; padding: 9px 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; background: rgba(4,29,41,.55); text-align: right; backdrop-filter: blur(11px); }
.cast-panel p strong, .cast-panel p span { display: block; }
.cast-panel p strong { color: white; font-size: 10px; }
.cast-panel p span { margin-top: 2px; color: rgba(255,255,255,.48); font-size: 8px; }
.cast-button {
  width: 86px;
  height: 58px;
  border: 0;
  border-radius: 15px 15px 24px 15px;
  background: var(--orange);
  box-shadow: 0 7px 0 #bd4b2f, 0 13px 25px rgba(0,0,0,.23);
  color: white;
  cursor: pointer;
  pointer-events: auto;
  transition: transform .13s, box-shadow .13s, opacity .2s;
}
.cast-button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 9px 0 #bd4b2f, 0 16px 27px rgba(0,0,0,.22); }
.cast-button:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 2px 0 #bd4b2f; }
.cast-button:disabled { opacity: .45; cursor: not-allowed; }
.cast-button span, .cast-button small { display: block; }
.cast-button span { font-size: 14px; font-weight: 900; }
.cast-button small { margin-top: 2px; color: rgba(255,255,255,.62); font-size: 7px; letter-spacing: .12em; }

.intro { position: absolute; z-index: 10; inset: 0; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 35%, rgba(29,113,126,.28), rgba(3,19,29,.75)); opacity: 0; visibility: hidden; backdrop-filter: blur(5px); transition: opacity .4s, visibility .4s; }
.intro.visible { opacity: 1; visibility: visible; }
.intro-card { position: relative; width: min(560px, calc(100vw - 34px)); padding: 37px 44px 32px; overflow: hidden; border: 1px solid rgba(255,255,255,.45); border-radius: 30px 30px 78px 30px; background: linear-gradient(145deg, #fff8e9, #e8f2df); box-shadow: 0 35px 100px rgba(0,11,20,.45); color: var(--ink); text-align: center; transform: translateY(15px) scale(.98); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.intro.visible .intro-card { transform: translateY(0) scale(1); }
.intro-card::after { content: ""; position: absolute; right: -56px; bottom: -65px; width: 160px; height: 160px; border: 24px solid rgba(29,117,103,.09); border-radius: 50%; }
.eyebrow { margin: 0; color: #2f8879; font-size: 9px; font-weight: 900; letter-spacing: .25em; }
.title-mark { position: absolute; top: 29px; left: 45px; color: #ef7047; font-family: Georgia, serif; font-size: 55px; font-style: italic; font-weight: 900; transform: rotate(18deg); }
.intro h1 { margin: 10px 0 0; font-family: "Songti SC", Georgia, serif; font-size: clamp(42px, 7vw, 64px); line-height: 1; letter-spacing: .04em; }
.intro h1 span { color: #e76745; }
.intro-copy { max-width: 410px; margin: 17px auto 22px; color: #5d7378; font-size: 12px; line-height: 1.75; }
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 25px; }
.rules div { padding: 13px 7px; border: 1px solid rgba(7,27,40,.07); border-radius: 15px; background: rgba(255,255,255,.58); }
.rules b, .rules strong, .rules span { display: block; }
.rules b { color: #de704d; font: italic 900 18px Georgia, serif; }
.rules strong { margin-top: 5px; font-size: 11px; }
.rules span { margin-top: 3px; color: #7b9194; font-size: 8px; }
.intro-card > button { position: relative; z-index: 1; min-width: 205px; padding: 14px 20px; border: 0; border-radius: 13px 13px 24px 13px; background: #ed704b; box-shadow: 0 7px 0 #b84a32; color: white; font-size: 13px; font-weight: 900; cursor: pointer; }
.intro-card > button span { margin-left: 18px; }

.toast { position: absolute; z-index: 8; top: 98px; left: 50%; max-width: calc(100vw - 30px); padding: 11px 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; background: rgba(4,29,41,.82); color: white; box-shadow: 0 13px 35px rgba(0,0,0,.2); opacity: 0; transform: translate(-50%, -12px); pointer-events: none; font-size: 10px; font-weight: 800; backdrop-filter: blur(12px); transition: opacity .25s, transform .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast b { color: var(--yellow); }

@media (max-width: 760px) {
  .game-shell { min-height: 480px; }
  .topbar { top: max(11px, env(safe-area-inset-top)); left: 12px; right: 12px; }
  .brand div { display: none; }
  .brand-hook { width: 25px; font-size: 38px; }
  .stats { gap: 5px; }
  .stat { min-width: 72px; padding: 8px 9px 7px; border-radius: 10px; }
  .stat strong { font-size: 13px; }
  .stat small { font-size: 6px; }
  .coin-stat { padding-left: 32px; }
  .coin { left: 7px; top: 8px; width: 20px; height: 20px; font-size: 9px; }
  .depth-rail { top: 92px; right: 10px; bottom: 158px; }
  .shop { left: 9px; bottom: max(9px, env(safe-area-inset-bottom)); width: 196px; padding: 8px; }
  .shop-title { margin-bottom: 4px; }
  .shop-title small { display: none; }
  .upgrade-card { grid-template-columns: 29px 1fr auto; gap: 5px; padding: 5px; }
  .upgrade-icon { width: 28px; height: 28px; font-size: 15px; }
  .upgrade-card > span:nth-child(2) strong { font-size: 8px; }
  .upgrade-card > span:nth-child(2) small { font-size: 6px; }
  .upgrade-card b { padding: 4px; font-size: 7px; }
  .fish-guide { right: 9px; bottom: max(9px, env(safe-area-inset-bottom)); }
  .cast-panel { bottom: max(112px, calc(env(safe-area-inset-bottom) + 103px)); }
  .cast-panel p { display: none; }
  .cast-button { width: 80px; height: 52px; }
  .intro-card { padding: 33px 19px 27px; border-radius: 24px 24px 56px 24px; }
  .title-mark { display: none; }
  .intro-copy { margin-bottom: 17px; }
  .rules { gap: 5px; margin-bottom: 20px; }
  .rules div { padding: 10px 3px; }
  .rules span { display: none; }
}

@media (max-height: 620px) {
  .intro-card { padding-top: 24px; padding-bottom: 22px; }
  .intro h1 { font-size: 42px; }
  .intro-copy { margin: 10px auto 13px; line-height: 1.5; }
  .rules { margin-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}