/* Beta arena and journey layers. The original market UI stays scoped to its scenes. */
#stage { container-type:inline-size; }
.boss-arena .quest-hud,.boss-arena .location,.boss-arena #decode-help,.ink-transition .quest-hud,.ink-transition .location { display:none !important; }
.boss-arena #game { transition:filter 1.5s; }
.boss-arena.arena-cleared #game { filter:saturate(1.06) brightness(1.08); }
.boss-arena.fragment-focus #game { filter:brightness(.79); }
.boss-arena #joystick { width:clamp(58px,13cqw,90px); left:10px; bottom:5px; }
.boss-arena #momo-bubble { left:50% !important; top:auto !important; bottom:3%; transform:translateX(-50%); width:max-content; max-width:54%; font-size:clamp(14px,1.7cqw,22px); line-height:1.5; text-align:center; padding:8px 13px; }
.boss-arena #momo-bubble::after { display:none; }
.boss-question { position:absolute; top:3.5%; left:50%; transform:translateX(-50%); width:max-content; max-width:88%; padding:1.1% 2.5%; border:1px solid #d9b977; border-radius:5px; background:#102f31ef; color:#fff0d4; box-shadow:0 4px 24px #071a2966; font:clamp(17px,2.25cqw,30px)/1.45 'Microsoft JhengHei','PingFang TC',sans-serif; text-align:center; letter-spacing:.04em; }
.arena-title { position:absolute; left:50%; top:35%; transform:translate(-50%,-50%); padding:2% 5%; color:#fff0cd; background:#102f32e8; border-block:1px solid #d9b977; font:clamp(30px,5cqw,64px)/1.4 'PMingLiU',serif; letter-spacing:.2em; white-space:nowrap; animation:arena-appear .5s both; }
.arena-title.boss-name { font-size:clamp(46px,7cqw,88px); }
.arena-title.break-title { top:15%; padding:.8% 2%; font-size:clamp(20px,2.8cqw,36px); }
.arena-zone { position:absolute; width:19%; height:13%; transform:translate(-50%,-50%); text-align:center; color:#fff1cd; }
.arena-zone i { position:absolute; inset:0; width:100%; height:100%; margin:0; border-radius:50%; }
.arena-zone b { position:absolute; left:50%; bottom:95%; transform:translateX(-50%); width:max-content; max-width:145%; padding:7px 12px; border:1px solid #c9ab70; border-radius:4px; background:#123639f5; font:clamp(16px,2cqw,26px)/1.4 'Microsoft JhengHei','PingFang TC',sans-serif; box-shadow:0 3px 12px #0a263b66; }
.arena-zone.rejected { animation:array-reject .6s forwards; }
.arena-zone.arena-heart { width:15%; }
.arena-heart b { font-size:clamp(20px,2.7cqw,34px); }
.fragment-title { top:6%; font-size:clamp(18px,2cqw,26px); }
.fragment-title strong { display:block; font:clamp(25px,3.5cqw,44px) serif; color:#f4d891; margin-top:4px; }
.ink-curtain { position:absolute; inset:0; background:radial-gradient(ellipse,transparent 30%,#081518b0 80%,#050c0e); animation:ink-close .65s ease-in both; }
.ink-warning { position:absolute; inset:43% 5% auto; margin:0; text-align:center; color:#fff0d4; font:clamp(18px,2.2cqw,30px)/1.5 serif; text-shadow:0 2px 8px #000; animation:ink-warning .65s both; }
@keyframes ink-warning { 0%,70% {opacity:1;} 100% {opacity:0;} }
.arena-arrival-cover { position:absolute; inset:0; background:#050c0e; animation:arena-unveil .45s forwards; }
@keyframes arena-unveil { to { opacity:0; } }
.ink-pull { position:absolute; inset:0; }
.ink-pull i { position:absolute; width:auto; height:auto; background:none; color:#e1d2af; font:clamp(22px,3cqw,40px) serif; animation:ink-pull 2s ease-in forwards; --x:-500px; --y:-240px; left:50%; top:45%; }
.ink-pull i:nth-child(2) { --x:550px; --y:200px; animation-delay:.1s; }
.ink-pull i:nth-child(3) { --x:-450px; --y:240px; animation-delay:.2s; }
.ink-pull i:nth-child(4) { --x:420px; --y:-220px; animation-delay:.3s; }
.burst-glyphs { position:absolute; left:50%; top:34%; }
.burst-glyphs i { position:absolute; width:auto; height:auto; color:#efda9c; background:none; font:32px serif; animation:glyph-burst 1.4s forwards; --x:-200px; --y:-80px; }
.burst-glyphs i:nth-child(2) { --x:210px; --y:-130px; }
.burst-glyphs i:nth-child(3) { --x:20px; --y:180px; }
@keyframes arena-appear { from { opacity:0; margin-top:10px; } to { opacity:1; margin-top:0; } }
@keyframes array-breathe { 50% { box-shadow:0 0 0 2px #07394be6,0 0 34px #35d9f2b3,inset 0 0 28px #6cefff99; } }
@keyframes array-reject { to { opacity:0; filter:blur(3px); } }
@keyframes ink-close { from {box-shadow:inset 0 0 20px 5px #050c0e;} 70% {box-shadow:inset 0 0 100px 18cqw #050c0e;} to {box-shadow:inset 0 0 0 100cqw #050c0e;} }
@keyframes ink-pull { from { transform:translate(var(--x),var(--y)) rotate(-30deg); opacity:.8; } to { transform:translate(0,0) scale(.2) rotate(90deg); opacity:0; } }
@keyframes glyph-burst { to { transform:translate(var(--x),var(--y)) rotate(70deg); opacity:0; } }
#journey,#reset-confirm { position:absolute; inset:0; z-index:50; display:grid; place-items:center; background:linear-gradient(#102f31d9,#102b30f2),url('./assets/maps/bg_wenjing_zhimi.png') center/cover; color:#f4e7c9; }
.journey-sheet { width:88%; max-height:96%; overflow:auto; padding:3% 4%; text-align:center; border-block:1px solid #bfa06a; }
.journey-sheet > small { font:clamp(12px,1.5cqw,19px) serif; color:#d7b879; letter-spacing:.5em; }
.journey-sheet h2 { font:clamp(25px,4cqw,50px) serif; letter-spacing:.1em; margin:2% 0; }
.journey-sheet h2 span { display:inline-block; }
.journey-sheet p { color:#e4d9bc; font:clamp(12px,1.6cqw,20px)/1.8 serif; letter-spacing:.08em; margin:2% 0; }
.journey-sheet p.save-detail { font-size:clamp(13px,1.5cqw,19px); color:#d9c395; }
#journey button,#reset-confirm button,.realm-actions button { border:1px solid #d2b376; border-radius:3px; background:linear-gradient(#27594e,#1a413e); color:#fff0cc; padding:9px 25px; font:clamp(15px,1.7cqw,22px)/1.4 serif; cursor:pointer; margin:6px; }
#journey button.quiet,.realm-actions button.quiet { background:#173a3a99; font-size:clamp(13px,1.4cqw,18px); border-color:#b29a6970; }
#journey button:focus-visible,#reset-confirm button:focus-visible,.realm-actions button:focus-visible { outline:2px solid #ffe2a4; outline-offset:3px; }
#journey button:disabled { opacity:.5; cursor:default; }
.chapter-list { display:grid; grid-template-columns:1fr 1fr; gap:4%; margin:2% 0; }
.chapter-list article { padding:3% 4%; border:1px solid #c7ac705e; background:#123536a6; }
.chapter-list h3 { margin:7px 0; font:clamp(16px,2cqw,27px)/1.5 serif; color:#f1dfb5; }
.chapter-list small { color:#dfc183; font-size:clamp(12px,1.4cqw,18px); }
#reset-confirm { z-index:60; background:#071e25dc; }
#reset-confirm > div { width:85%; max-width:640px; padding:3% 4%; border:1px solid #cbb076; background:#143638; text-align:center; }
#reset-confirm p { color:#faedcf; font:clamp(16px,1.8cqw,23px)/1.7 serif; letter-spacing:.05em; }
#reset-confirm #reset-error:empty { display:none; }
.menu-active #joystick,.menu-active .touch-action,.menu-active .quest-hud,.menu-active #momo-bubble { visibility:hidden; }
#save-toast { position:absolute; z-index:55; right:2%; top:2%; padding:6px 10px; background:#103933e8; border-bottom:1px solid #c8ac74; color:#e9d6aa; font:clamp(12px,1.3cqw,16px) serif; pointer-events:none; }
.fragment-award { display:flex; justify-content:center; align-items:center; gap:12px; margin:1% 0; }
.fragment-award img { width:clamp(65px,9cqw,115px); height:clamp(65px,9cqw,115px); object-fit:contain; }
.fragment-award p { text-align:left; font-size:clamp(13px,1.6cqw,20px); }
.fragment-award strong { display:block; font:clamp(24px,3cqw,38px) serif; color:#ebcf93; margin-top:5px; }
.realm-summary ul { font-size:clamp(14px,1.8cqw,23px); }
@media(max-width:600px) {
  .boss-question { padding:7px 10px; font-size:17px; max-width:94%; width:max-content; line-height:1.35; }
  .arena-zone { width:23%; }
  .arena-zone b { font-size:16px; padding:5px 7px; max-width:120%; }
  .boss-arena #momo-bubble { max-width:65%; font-size:14px; padding:5px 9px; bottom:1.5%; }
  .journey-sheet { padding:2% 3%; width:94%; }
  .journey-sheet h2 { font-size:24px; margin:1% 0; }
  #journey button,#reset-confirm button,.realm-actions button { padding:6px 12px; margin:3px; font-size:14px; }
  .chapter-list { gap:2%; }
  .chapter-list h3 { font-size:16px; }
  .fragment-award img { width:53px; height:53px; }
  .fragment-award strong { font-size:23px; }
  .realm-summary h2 { font-size:23px; }
}
/* One visual language for every world interaction ring; each scene retains its
   existing anchor, size and completed/rejected state. */
:root { --clue-ring-edge:#80f5ff; --clue-ring-inner:#b6fbffb3; --clue-ring-fill:radial-gradient(ellipse,#0c859e80,#08789399 58%,#073e67b3); --clue-ring-shadow:0 0 0 2px #07394be6,0 0 25px #35d9f29e,inset 0 0 22px #6cefff80; }
.arena-zone i,:is(#decode-world,#closing-world,#finale-world,#lushan-world) .contact-ring {
  border:3px solid var(--clue-ring-edge); border-radius:50%;
  background:var(--clue-ring-fill); box-shadow:var(--clue-ring-shadow);
  animation:array-breathe 2.6s ease-in-out infinite;
}
.arena-zone i::after,:is(#decode-world,#closing-world,#finale-world,#lushan-world) .contact-ring::after {
  content:''; position:absolute; inset:12%; border:1px solid var(--clue-ring-inner); border-radius:50%;
}
:is(.word-fragment,.semantic-dot,.story-direction,.event-zone,.return-stall,.heart-zone,.jade-label,.lushan-marker) > :is(b,small) { position:relative; z-index:1; }
#decode-world .attuned .contact-ring { border-color:#c5ffff; background:var(--clue-ring-fill); }
#decode-world .decoded .contact-ring,#finale-world .core-broken > .contact-ring { animation:none; }
@media(prefers-reduced-motion:reduce) { .arena-zone i,:is(#decode-world,#closing-world,#finale-world,#lushan-world) .contact-ring { animation:none; } }