:root {
  --ink: #f3ead8;
  --ink-dim: rgba(243, 234, 216, .68);
  --glass: rgba(24, 16, 10, .58);
  --line: rgba(243, 234, 216, .22);
  --gold: #d9a441;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0806; color: var(--ink);
  font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", "Hiragino Sans", "Yu Gothic", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#stage { transition: filter .35s ease; }
body.fish-open #stage { filter: blur(7px) brightness(.62); }
#closeup { pointer-events: none; opacity: 0; transition: opacity .3s ease; }
body.fish-open #closeup { pointer-events: auto; opacity: 1; cursor: pointer; }
body.fish-open #hint { opacity: 0 !important; }

.pill { position: fixed; display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#top-left { top: 14px; left: 14px; font-size: 14px; }
#top-left .temple { font-weight: 600; letter-spacing: .12em; }
#top-left .hall { color: var(--ink-dim); font-size: 12px; }
#top-right { top: 14px; right: 14px; gap: 6px; padding: 5px 6px; }
button { font: inherit; color: var(--ink); background: transparent; border: 0; cursor: pointer; }
#top-right button { font-size: 12px; padding: 6px 10px; border-radius: 999px; }
#top-right button:hover { background: rgba(243, 234, 216, .12); }
#btn-sound[aria-pressed="true"] { color: var(--gold); }

#name-tag { position: fixed; left: 0; top: 0; transform: translate(-50%, -100%); pointer-events: none;
  display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; font-size: 12px; white-space: nowrap;
  background: rgba(243, 234, 216, .92); color: #3a2a18; border-radius: 999px; opacity: 0; transition: opacity .3s; }
#name-tag b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: #6b7f52; color: #fff; font-size: 10px; font-weight: 500; }

#hint { position: fixed; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 84px); left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--ink-dim);
  text-shadow: 0 1px 3px #000; pointer-events: none; transition: opacity .6s; text-align: center; width: max-content; max-width: 92vw; }

#actions { bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); gap: 2px; padding: 6px; }
#actions button { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 66px; padding: 7px 0 6px;
  font-size: 12px; border-radius: 999px; transition: background .2s; }
#actions .ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; color: #e6c98a; }
#actions button.on .ic { color: var(--gold); }
#actions button:hover { background: rgba(243, 234, 216, .1); }
#actions button.on { background: rgba(217, 164, 65, .22); box-shadow: inset 0 0 0 1px rgba(217, 164, 65, .55); }

#progress { position: fixed; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 76px); left: 50%; transform: translateX(-50%);
  width: min(300px, 70vw); font-size: 12px; color: var(--ink-dim); text-shadow: 0 1px 3px #000; }
.bar { height: 4px; margin-top: 5px; border-radius: 4px; background: rgba(243, 234, 216, .2); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .5s ease; }

#fish-panel { position: fixed; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 78px); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; }
#fish-panel[hidden], #progress[hidden] { display: none; }
#fish-count { display: flex; align-items: baseline; gap: 6px; text-shadow: 0 2px 8px #000; }
#fish-count b { font-size: 34px; font-weight: 300; font-variant-numeric: tabular-nums; }
#fish-count small { font-size: 12px; color: var(--ink-dim); }
#fish-panel .row { display: flex; gap: 2px; padding: 4px; background: var(--glass); border: 1px solid var(--line);
  border-radius: 999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#fish-panel .row button { padding: 7px 16px; font-size: 13px; border-radius: 999px; }
#fish-panel .row button.on { background: rgba(217, 164, 65, .25); color: var(--gold); }
#bead-lap { font-size: 13px; color: var(--gold); text-shadow: 0 1px 4px #000; min-height: 18px; }
#bead-lap[hidden] { display: none; }
#toast { position: fixed; top: 22%; left: 50%; transform: translateX(-50%); padding: 8px 18px; font-size: 14px; letter-spacing: .1em; color: var(--ink);
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .5s; pointer-events: none; }
#fish-panel .tip { font-size: 12px; color: var(--ink-dim); text-shadow: 0 1px 3px #000; }

#loading { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; background: radial-gradient(ellipse at 50% 40%, #2a1b10, #0b0806 70%); transition: opacity .8s ease; }
#loading.done { opacity: 0; pointer-events: none; }
.load-title { font-size: 34px; letter-spacing: .5em; text-indent: .5em; font-weight: 300; }
.load-sub { font-size: 13px; color: var(--ink-dim); }
#loading .bar { width: 180px; }
#loading .bar i { width: 38% !important; border-radius: 4px; animation: flow 1.6s ease-in-out infinite alternate; }
@keyframes flow { from { transform: translateX(-10%); } to { transform: translateX(175%); } }

@media (max-width: 520px) {
  #actions button { width: 60px; font-size: 11px; }
  #actions { padding: 5px; }
  #top-left .hall { display: none; }
}
#room { color: var(--gold); font-size: 12px; }
#room:empty { display: none; }
.peer-tag { position: fixed; left: 0; top: 0; transform: translate(-50%, -100%); pointer-events: none; padding: 2px 8px; font-size: 11px; white-space: nowrap;
  background: rgba(24, 16, 10, .55); color: var(--ink); border-radius: 999px; opacity: 0; transition: opacity .3s; }
#fps { position: fixed; top: 58px; left: 14px; font: 12px ui-monospace, monospace; color: #9f9; text-shadow: 0 1px 2px #000; pointer-events: none; }
#clock { color: var(--ink-dim); font-size: 12px; }
#clock:empty { display: none; }
@media (max-width: 520px) { #clock { display: none; } }
#btn-lang { min-width: 34px; font-weight: 600; }
#lang-menu { position: fixed; top: 54px; right: 14px; z-index: 6; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--glass); border: 1px solid var(--line); border-radius: 14px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#lang-menu[hidden] { display: none; }
#lang-menu button { padding: 7px 16px; font-size: 13px; text-align: left; border-radius: 9px; }
#lang-menu button:hover { background: rgba(243, 234, 216, .12); }
#lang-menu button.on { color: var(--gold); }
#actions button span { white-space: nowrap; }