/* BAIT · house style (briefs/HOUSE_STYLE_3D_TOY.md): the 3D toy sea + cream toy UI on top. */
@font-face { font-family:'Fredoka'; font-weight:500 700; font-display:swap; src:url('../../vendor/fonts/fredoka-latin.woff2') format('woff2'); }
:root { --t-cream:#f7efe2; --t-ink:#2a2230; --t-wood:#c98b52; --t-mint:#7fd6b8; --t-terra:#e2653f; --t-shadow:0 6px 0 #2a223033, 0 14px 30px #0b2a3340;
  --t-round:"Fredoka",ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN","Arial Rounded MT Bold",system-ui,sans-serif; }
html, body { background:#2f9fb3; }
#sea, .hero { display:none !important; }
#world { position:fixed; left:0; right:0; top:0; width:100%; height:56dvh; display:block; z-index:0; }
body::after { content:""; position:fixed; left:0; right:0; top:52dvh; bottom:0; z-index:0; pointer-events:none; background:linear-gradient(#f1d9a800,#f1d9a8 6%,#e9cf9c); }
body.no3d #world { display:none; }
#app { position:relative; z-index:1; max-width:560px; margin:0 auto; }
.topbar { background:transparent; }
.topbar .brand, .topbar .depth { color:#fff; text-shadow:0 2px 6px #0006; }
.mute { background:var(--t-cream) !important; color:var(--t-ink) !important; border:3px solid var(--t-ink) !important; box-shadow:0 4px 0 var(--t-ink); }

/* intro: the cover IS the screen */
#intro { background:none !important; }
#intro .cover { display:block; width:calc(100% + 40px); margin:-12px -20px 0; max-height:62dvh; object-fit:cover; object-position:top;
  -webkit-mask-image:linear-gradient(#000 78%,transparent); mask-image:linear-gradient(#000 78%,transparent); }
#intro #kicker, #intro #title { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
#intro .intro-line, #intro .rule, #intro .friend-line, #intro .privacy { background:var(--t-cream); color:var(--t-ink); border:3px solid var(--t-ink); border-radius:18px; padding:12px 14px; margin:0 0 10px; box-shadow:var(--t-shadow); text-shadow:none; }
#intro .intro-line { font:900 20px/1.2 var(--t-round); letter-spacing:-.01em; }
#intro .rule, #intro .privacy { font:600 14px/1.35 system-ui,sans-serif; }
#intro .privacy { font-size:11.5px; opacity:.9; }
body:has(#world) #intro { position:relative; }
#intro::before { content:""; position:fixed; inset:0; z-index:-1; background:linear-gradient(#f7efe2 0,#f7efe2 100%); }

/* chunky pressable buttons */
.primary, .pass, .secondary, #start { font:900 18px var(--t-round) !important; letter-spacing:.02em; border:3px solid var(--t-ink) !important; border-radius:18px !important; box-shadow:0 6px 0 var(--t-ink) !important; }
.primary, #start { background:linear-gradient(#ffd26b,#f2a93c) !important; color:var(--t-ink) !important; }
.primary:active, #start:active, .pass:active, .secondary:active { transform:translateY(5px) !important; box-shadow:0 1px 0 var(--t-ink) !important; }
.pass { background:var(--t-cream) !important; color:var(--t-ink) !important; }
.secondary { background:#fff !important; color:var(--t-ink) !important; }

/* play: the sea on top, a cream tray of lures below */
#play { background:none !important; padding-top:calc(env(safe-area-inset-top) + 50dvh) !important; }
#play .play-heading { position:absolute; top:calc(env(safe-area-inset-top) + 56px); left:20px; right:20px; }
#play .eyebrow, #play .current { color:#fff !important; text-shadow:0 2px 8px #0008; }
#play .current { font-family:var(--t-round) !important; }
#play .preference { position:absolute; top:calc(env(safe-area-inset-top) + 44dvh); left:20px; right:20px; margin:0; text-align:center; }
#play .preference:not([hidden]) { display:block; }
#play .preference { font:900 12px var(--t-round); letter-spacing:.06em; color:var(--t-ink); background:#ffd26b; border:3px solid var(--t-ink); border-radius:999px; padding:6px 12px; box-shadow:0 4px 0 var(--t-ink); width:max-content; max-width:90%; margin:0 auto; }
.lures { background:var(--t-cream); border:3px solid var(--t-ink); border-radius:24px; padding:10px; box-shadow:var(--t-shadow); gap:8px !important; }
.lures:before, .lure:before { display:none !important; }
.lure { background:#fff !important; color:var(--t-ink) !important; border:3px solid var(--t-ink) !important; border-radius:16px !important; box-shadow:0 4px 0 var(--t-ink) !important; backdrop-filter:none !important; min-height:84px !important; }
.lure:active { transform:translateY(3px) !important; box-shadow:0 1px 0 var(--t-ink) !important; }
.lure.learned { background:#fff3c4 !important; }
.lure .type { color:var(--t-terra) !important; font-family:var(--t-round) !important; }
.lure .hook-copy { color:var(--t-ink) !important; font-family:var(--t-round) !important; font-weight:800 !important; }
.lure .arrow { color:var(--t-ink) !important; }
.lure-art { background:radial-gradient(circle at 40% 35%,#fffaf0,#f1e4cf) !important; border:2px solid #2a223022; }
.learned-tag { background:var(--t-terra) !important; color:#fff !important; border-radius:999px !important; font-family:var(--t-round) !important; }
.reaction { color:#fff !important; text-shadow:0 2px 6px #0008; font-family:var(--t-round) !important; }

/* result: cream card on the sea */
#result { background:none !important; padding-top:calc(env(safe-area-inset-top) + 64px) !important; }
#result > * { position:relative; }
#result .eyebrow, #result h2 { color:#fff !important; text-shadow:0 3px 10px #0009; font-family:var(--t-round) !important; }
#result .specimen { border:3px solid var(--t-ink); border-radius:24px; overflow:hidden; background:var(--t-cream); box-shadow:var(--t-shadow); }
#result .specimen-stamp { color:var(--t-ink) !important; }
#result .result-count, #result .finding, #result .escaped, #result .friend-result, #result .riku-line { background:var(--t-cream); color:var(--t-ink) !important; border:3px solid var(--t-ink); border-radius:18px; padding:12px 14px; box-shadow:var(--t-shadow); text-shadow:none; }
#result .result-count { font:900 24px/1.1 var(--t-round) !important; }
#result .riku-line { background:#1c2a3a; color:#ffe2b0 !important; }
.app-door { background:#f2a541 !important; color:#1c1424 !important; border:3px solid var(--t-ink) !important; border-radius:18px !important; box-shadow:0 6px 0 var(--t-ink) !important; font-family:var(--t-round) !important; }
[tabindex="-1"]:focus { outline:none; }

.lure-art.painted canvas { display:none; }
.lure .type { font-weight:700 !important; letter-spacing:.08em; }
.lure .hook-copy { font-weight:600 !important; font-size:17px !important; line-height:1.15 !important; }
#intro .intro-line { max-width:none !important; font-weight:700 !important; font-size:22px !important; }
.primary, .pass, .secondary, #start { font-weight:700 !important; }
#play .eyebrow { font-family:var(--t-round) !important; font-weight:700; }
#play .current { font-weight:700 !important; }
.lures { max-height:calc(46dvh - 110px); overflow:auto; }
@media (max-height:760px) { .lure { min-height:70px !important; } .lure-art { width:60px !important; height:60px !important; } }

/* three chunky lure tiles side by side */
.lures { display:grid !important; grid-template-columns:repeat(3,1fr); max-height:none; overflow:visible; padding:8px !important; }
.lure { display:flex !important; flex-direction:column; align-items:center; text-align:center !important; gap:6px !important; padding:10px 6px 12px !important; min-height:0 !important; }
.lure > span:not(.lure-art):not(.arrow) { display:flex; flex-direction:column; align-items:center; }
.lure-art { width:78px !important; height:78px !important; border-radius:14px !important; }
.lure .type { margin:0 !important; font-size:10.5px !important; }
.lure .hook-copy { font-size:13px !important; line-height:1.15 !important; }
.lure .arrow { display:none; }
.learned-tag { font-size:9.5px !important; padding:2px 7px !important; margin-bottom:3px; }
.pass { margin-top:10px; }
@media (max-height:760px) { .lure-art { width:60px !important; height:60px !important; } .lure .hook-copy { font-size:12px !important; } }

/* result: the 3D trophy shelf shows through; the flat specimen canvas feeds only the share card */
#result .specimen { background:transparent !important; border:none !important; box-shadow:none !important; height:min(36dvh,300px); }
#result .specimen canvas { visibility:hidden; }
#result .specimen-stamp { color:#fff !important; text-shadow:0 2px 6px #0008; }
#result h2 { font-size:clamp(34px,10vw,52px) !important; letter-spacing:-.02em !important; }
#result .specimen { height:min(30dvh,250px); }
#result .specimen-stamp { display:none; }

/* ── desktop stage: the sea fills the window, the game is a panel on the right ── */
@media (min-width:900px) and (min-aspect-ratio:5/4) {
  #world { height:100dvh; }
  body::after { display:none; }
  #app { width:520px !important; max-width:520px; margin:0 max(24px,4vw) 0 auto; }
  #app::before { display:none; }
  .topbar { left:0; right:0; }
  #intro::before { background:radial-gradient(ellipse at 30% 40%,#fff6e6,#f1dcc0 75%); }
  #intro { justify-content:center; padding-top:calc(env(safe-area-inset-top) + 90px) !important; }
  #intro .cover { position:fixed; left:max(24px,4vw); top:50%; transform:translateY(-50%) rotate(-1deg); width:calc(100vw - 520px - max(24px,4vw)*3); max-height:calc(100dvh - 80px);
    aspect-ratio:3/2; height:auto; margin:0; object-fit:cover; object-position:center; border:4px solid var(--t-ink); border-radius:32px; box-shadow:0 10px 0 var(--t-ink),0 30px 60px #5a3a2e55;
    -webkit-mask-image:none; mask-image:none; z-index:0; }
  #intro .intro-line { font-size:26px !important; }
  #play { padding-top:calc(env(safe-area-inset-top) + 150px) !important; }
  #play .play-heading { top:calc(env(safe-area-inset-top) + 70px); }
  #play .preference { position:static; margin:0 auto 14px; }
  .lure-art { width:110px !important; height:110px !important; }
  .lure .hook-copy { font-size:15px !important; }
  #result .specimen { height:0; margin:0; }
  #result { padding-top:calc(env(safe-area-inset-top) + 90px) !important; }
}
#app[data-phase="intro"] .topbar .brand { color:var(--t-ink); text-shadow:none; }
#intro .intro-line, #intro .rule, #intro .friend-line, #intro .privacy { align-self:stretch; }
.app-door { padding:12px 18px !important; display:inline-flex !important; align-items:center; gap:8px; font-size:14px !important; }

/* ── THE REVEAL: the sea takes the whole screen while the camera finds the fisherman ── */
/* no height transition: resizing a WebGL canvas every frame re-allocates its buffer */
body.bait-reveal #world { height:100dvh; }
body.bait-reveal::after { opacity:0; }
body::after { transition:opacity .5s; }
#result { transition:opacity .5s ease .1s; }
body.bait-reveal #result { opacity:0; pointer-events:none; }
body.bait-reveal .topbar { opacity:0; }
/* the old text link is replaced by Riku's transmission card (shared/leak.css) */
#app-door { display:none !important; }
.clip { width:100%; margin-top:10px; min-height:52px; }
.clip:disabled { opacity:.7; }

/* one result = one screen: your sea vs your friend's sea (challenge links only) */
.duel { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin:0 0 10px; }
.duel-side { background:var(--t-cream); border:3px solid var(--t-ink); border-radius:18px; padding:10px 8px; text-align:center; box-shadow:0 5px 0 var(--t-ink); display:grid; justify-items:center; gap:2px; }
.duel-side.me { background:#fff3c4; }
.duel-side img { width:64px; height:64px; object-fit:contain; }
.duel-side b { font:700 30px/1 var(--t-round); color:var(--t-ink); }
.duel-side small { font:700 11px/1.2 var(--t-round); letter-spacing:.04em; color:#5a3a2e; }
.duel > i { font:700 18px var(--t-round); color:#fff; font-style:normal; text-shadow:0 2px 6px #0008; }
#result .ml-notes { background:#f7efe2e6; border:3px solid var(--t-ink); }
#result .ml-notes > summary { color:var(--t-ink); font-family:var(--t-round); }
#result .ml-notes-body > * { margin:0 10px !important; }
#result .actions .primary { font-size:20px !important; min-height:64px; }
#result .actions { grid-template-columns:1.7fr 1fr !important; } #result .actions .primary { white-space:nowrap; }