/* Glass Realm — ink, linen and aged brass. 600x600 logical app, scaled by
   controls.js. Static borders and gradients; no textures, filters or fonts to load. */
:root {
  --bg:#000; --surface:#171e1d; --surface-2:#26302c; --surface-line:#59604a;
  --text:#fff4da; --text-2:#ded8c3; --text-mut:#b6b8a6; --accent:#ead096;
  --accent-dim:#9e8554; --gold:#f0cd80; --green:#a6dda6; --red:#ff9984; --xp:#c7b6ee;
  --safe:12px; --display:Georgia,"Times New Roman",serif;
  --ease-focus-on:cubic-bezier(.6,0,.4,1); --ease-focus-off:cubic-bezier(.24,.24,.6,1); --ease-press:cubic-bezier(.68,0,.29,1);
}
* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:var(--bg); color:var(--text); font-family:"Segoe UI",system-ui,sans-serif; -webkit-font-smoothing:antialiased; user-select:none; -webkit-user-select:none; touch-action:none; }
body { display:flex; align-items:center; justify-content:center; }
#app { position:relative; width:600px; height:600px; flex:0 0 auto; overflow:hidden; transform-origin:center center; }
#game { position:absolute; inset:0; width:600px; height:600px; display:block; }
.hidden { display:none!important; }

/* Real button edges, without blur. */
#touchPad { position:absolute; inset:0; pointer-events:none; z-index:30; }
#touchPad .tcbtn { position:absolute; pointer-events:auto; display:flex; align-items:center; justify-content:center; background:rgba(21,31,27,.8); color:var(--text); border:1px solid #ad9566; border-radius:9px; box-shadow:inset 0 1px #ffefc429,0 2px 0 #111814; font:700 20px "Segoe UI",sans-serif; -webkit-tap-highlight-color:transparent; touch-action:none; user-select:none; }
#touchPad .tcbtn.on { background:#d6b675; color:#18211c; transform:translateY(2px); box-shadow:inset 0 1px 4px #79613c; }
#dpad { position:absolute; left:18px; bottom:52px; width:168px; height:168px; }
#dpad .tcbtn { width:54px; height:54px; }
#dpad .d-up { left:57px; top:0; }
#dpad .d-down { left:57px; bottom:0; }
#dpad .d-left { left:0; top:57px; }
#dpad .d-right { right:0; top:57px; }
#actpad { position:absolute; right:18px; bottom:56px; width:84px; height:150px; }
#actpad .act-tap { left:0; bottom:0; width:84px; height:84px; border-radius:50%; font-size:18px; letter-spacing:1px; color:var(--gold); border:2px solid #b69a61; background:rgba(34,34,24,.9); box-shadow:inset 0 0 0 4px #333a2c,0 3px 0 #151a15; }
#actpad .act-menu { left:15px; top:0; width:54px; height:54px; }
#tcToggle { position:absolute; top:12px; right:134px; z-index:31; pointer-events:auto; width:34px; height:32px; border-radius:7px; font-size:16px; background:#222e27; color:var(--text); border:1px solid #9a845b; -webkit-tap-highlight-color:transparent; touch-action:none; }
#tcToggle.dim { opacity:.65; }
#tcToggle:focus-visible,#touchPad .tcbtn:focus-visible { outline:2px solid var(--text); outline-offset:3px; }

/* Floating names stay subordinate to the world. */
#markers { position:absolute; inset:0; pointer-events:none; z-index:5; }
.marker { position:absolute; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:5px; padding:3px 6px; white-space:nowrap; font-size:11px; font-weight:600; color:#fff2cb; background:rgba(17,28,20,.92); border:1px solid #8b9068; border-radius:4px; text-shadow:0 1px 1px #142016; }
.marker .pip { flex:0 0 auto; font-size:10px; line-height:1; }
.marker.npc { color:#f1d496; }
.marker.questguide,.marker.quest { color:#ffe29e; }
.marker.enemy { color:var(--red); }
.marker.item { color:var(--gold); }
.marker .label { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:11px; line-height:14px; color:#fff7e2; }
.marker.far { opacity:.78; }
.marker.target { border-color:#f0d49c; background:#34402b; box-shadow:0 2px 3px #0007; font-weight:700; }
.marker.target .label { font-size:12px; color:#fff3ce; }
.marker .health { flex:0 0 auto; font-size:10px; line-height:14px; font-weight:700; color:#ffb29b; }
.marker.target .pip { padding:3px 4px; border-radius:2px; background:#dec18b; color:#24301e; font-size:9px; font-weight:800; letter-spacing:.3px; }
.marker.target::after { content:""; position:absolute; left:50%; top:100%; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:4px solid #e5c98e; }
#bubbles .bubble { transform:none; padding:5px 7px; overflow:hidden; font:600 12px/16px "Segoe UI",sans-serif; color:#f6ecd1; background:rgba(24,33,26,.96); border:1px solid #aaa17d; border-radius:6px; box-shadow:0 2px 4px #0005; }
#bubbles .bubble.chat { color:#ffe8b0; border-color:#c1a06a; }
#bubbles .bubble::after { border-top-color:#29382c; }
#reticle { position:absolute; left:50%; top:50%; width:20px; height:20px; transform:translate(-50%,-50%) rotate(45deg); border:1.5px solid #f7dfa9; border-radius:3px; box-shadow:0 0 0 1px #15201c; z-index:6; pointer-events:none; opacity:.9; }

/* HUD columns never overlap. Keep compass width220: ui.js uses centre110. */
#hud { position:absolute; inset:0; padding:var(--safe); pointer-events:none; z-index:10; }
#vitals { position:absolute; left:var(--safe); top:var(--safe); width:164px; }
.bar { position:relative; height:20px; border-radius:4px; background:#19221b; border:1px solid #a58e61; overflow:hidden; box-shadow:0 2px 2px #0006; }
.bar-fill { position:absolute; left:0; top:0; bottom:0; width:100%; transition:width 250ms var(--ease-focus-on); box-shadow:inset 0 1px #ffffff38,inset 0 -3px #00000029; }
.bar-fill.health { background:linear-gradient(90deg,#913f36,#cd6b4f); }
.bar-fill.prayer { background:linear-gradient(90deg,#415673,#9292c2); }
.prayer-bar,.spec-bar { margin-top:4px; height:16px; border-color:#77816b; }
.bar-label { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; letter-spacing:.2px; color:#fff9e9; text-shadow:0 1px 2px #211714,1px 0 2px #211714; }
#vitals>.bar:first-child::after { content:"♥"; position:absolute; top:1px; left:6px; color:#fff1d8; font-size:12px; text-shadow:0 1px #612723; }
.vitals-loc { display:inline-block; max-width:176px; margin-top:7px; padding:3px 7px 4px; border-left:2px solid #d8bd7b; background:rgba(20,30,23,.85); font:700 13px/1.2 var(--display); color:#fff0c8; text-shadow:0 1px #152015; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#compass { position:absolute; top:var(--safe); left:50%; transform:translateX(-50%); width:220px; height:28px; background:rgba(22,31,25,.92); border:1px solid #9c885d; border-radius:5px; overflow:hidden; }
.compass-track { position:absolute; top:0; left:0; height:100%; display:flex; align-items:center; font-size:11px; font-weight:600; color:#bac0ad; will-change:transform; }
.compass-track .tick { width:40px; text-align:center; flex:0 0 40px; }
.compass-track .tick.card { color:#ffe2a2; font:700 14px var(--display); }
.compass-center { position:absolute; left:50%; top:0; width:0; height:0; transform:translateX(-50%); border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid #f2d79d; }
#compass::after { content:""; position:absolute; bottom:0; left:50%; height:3px; width:1px; background:#f2d79d; }
#minimap { position:absolute; top:var(--safe); right:var(--safe); width:116px; height:116px; border-radius:50%; border:2px solid #b9a579; background:#172b31; box-shadow:0 0 0 2px #17282b,0 0 0 3px #776b51,0 3px 5px #0008; }
#questGuide { position:absolute; left:50%; top:49px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:7px 10px; background:rgba(22,31,25,.91); border:1px solid #8a7951; border-radius:4px; max-width:236px; }
.qg-arrow { display:inline-block; flex:0 0 20px; width:20px; height:25px; transition:transform 120ms linear; }
.qg-arrow path { stroke:#f2d395; }
.qg-label { font-size:12px; line-height:1.35; font-weight:700; color:#f5e2b4; }
#channelBar { position:absolute; left:50%; bottom:96px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; padding:9px 14px; background:#1d2a21; border:1px solid #b39a67; border-radius:5px; box-shadow:0 3px 8px #0006; }
.ch-label { font-size:13px; font-weight:700; color:var(--text); }
.ch-track { position:relative; width:164px; height:7px; border-radius:2px; background:#0f1913; overflow:hidden; }
.ch-fill { position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,#a7854d,#efd295); border-radius:2px; transition:width 100ms linear; }
#prompt { position:absolute; left:50%; bottom:84px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:8px 12px; background:rgba(22,31,25,.96); border:1px solid #c1a56e; border-radius:6px; box-shadow:0 3px 8px #0006; max-width:400px; }
#prompt.target-labeled { visibility:hidden; }
.prompt-key { font-size:10px; font-weight:800; letter-spacing:.6px; color:#25271d; background:#e3c68b; padding:4px 6px; border:1px solid #f0ddb2; border-radius:3px; }
.prompt-text { font-size:14px; font-weight:600; color:var(--text); }
/* The lower middle lane clears the hero and both control pads. */
body.controls-on #prompt { left:56%; max-width:276px; bottom:52px; }
body.controls-on #channelBar { left:56%; bottom:110px; }
#toasts { position:absolute; top:141px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px; width:420px; }
/* The legacy auto indicator assigns inline presentation: override only its
   appearance/placement so it cannot obscure the compass or overlay menus. */
#app #autoTag { top:112px!important; z-index:15!important; max-width:280px; overflow:hidden; text-overflow:ellipsis; background:#263a28!important; border-color:#9fa674!important; color:#dbedbd!important; border-radius:4px!important; box-shadow:none!important; }
.toast { max-width:420px; padding:8px 14px; background:#1e2b22; border:1px solid #7f886b; border-radius:5px; font-size:13px; line-height:1.35; font-weight:600; text-align:center; box-shadow:0 3px 6px #0006; animation:toastIn 200ms var(--ease-focus-on); }
.toast.xp { color:var(--xp); border-color:#847494; }
.toast.good { color:var(--green); border-color:#6e9765; }
.toast.gold { color:var(--gold); border-color:#aa8d54; }
.toast.bad { color:var(--red); border-color:#b67861; }
.toast.out { animation:toastOut 200ms var(--ease-focus-off) forwards; }
@keyframes toastIn { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }
@keyframes toastOut { to { opacity:0; transform:translateY(-5px); } }

/* Adventurer's journal: restrained static material and strong focus edges. */
.overlay { position:absolute; inset:0; z-index:20; display:flex; background:rgba(7,13,10,.56); }
#menu,#shop { align-items:stretch; justify-content:center; }
#menu .panel,#shop .panel { position:relative; margin:var(--safe); width:576px; display:flex; flex-direction:column; background:linear-gradient(110deg,#252f27,#19221d 70%); border:1px solid #b59b68; border-radius:8px; overflow:hidden; box-shadow:inset 0 0 0 3px #313b2d,0 5px 12px #0007; }
.journal-heading { display:flex; align-items:center; flex:0 0 auto; gap:11px; padding:13px 18px 11px; color:#f2dbad; font:21px/1.08 var(--display); }
.journal-heading small { display:block; margin-top:5px; color:#aaa98d; font:700 8px/1 "Segoe UI",sans-serif; letter-spacing:2.2px; }
.journal-seal { display:flex; align-items:center; justify-content:center; width:33px; height:38px; flex:0 0 33px; border:1px solid #ad9361; border-radius:3px 3px 14px 14px; background:#334436; font-size:25px; color:#dec082; }
.journal-rule { flex:1; height:1px; background:linear-gradient(90deg,#7d7451,transparent); margin-left:8px; }
.tabs { display:flex; flex:0 0 auto; gap:5px; padding:8px 10px 10px; border-bottom:1px solid #73704b; background:rgba(14,22,17,.38); overflow-x:auto; flex-wrap:nowrap; scroll-behavior:smooth; scrollbar-width:none; }
.tabs::-webkit-scrollbar { display:none; }
.tab { flex:0 0 auto; text-align:center; padding:9px 12px; border-radius:4px; border:1px solid #526048; background:#253329; color:#c2c7af; font-size:12px; line-height:1.1; font-weight:700; white-space:nowrap; transition:color 150ms,background 150ms,border-color 150ms; }
.tab.active { color:var(--text); }
.tab.sel { color:#292a1c; border-color:#f1d59c; background:linear-gradient(#e6d1a1,#c3a370); box-shadow:inset 0 1px #fff0c7; }
.menu-body { position:relative; flex:1; min-height:0; padding:14px 13px 20px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#8b835b transparent; overscroll-behavior:contain; }
.menu-body::-webkit-scrollbar { width:3px; }
.menu-body::-webkit-scrollbar-thumb { background:#8b835b; border-radius:2px; }
/* Reserve the touch-pad area in the actual scrollport, so focus scrolling keeps
   the selected row above the buttons instead of obscuring it behind them. */
body.controls-on .menu-body { margin-bottom:178px; }
.hint { position:relative; flex:0 0 auto; padding:11px 10px; text-align:center; font-size:11px; line-height:1.35; color:#b9bba6; border-top:1px solid #636747; background:#1b271f; }
.row { display:flex; align-items:center; gap:11px; padding:12px; margin-bottom:8px; background:linear-gradient(100deg,#303c30,#29352b); border:1px solid #4b5942; border-radius:5px; transition:border-color 130ms,background 130ms; }
.row .row-icon { display:flex; align-items:center; justify-content:center; flex:0 0 36px; width:36px; height:36px; font-size:23px; text-align:center; background:#1d2b22; border:1px solid #667052; border-radius:4px; }
.row .row-main { flex:1; min-width:0; }
.row .row-title { font-size:15px; font-weight:700; color:#f4e7c9; line-height:1.2; }
.row .row-sub { font-size:12px; color:#bcc3ac; line-height:1.4; margin-top:4px; }
.row .row-trail { font-size:13px; font-weight:700; color:#ebd298; }
.row.sel { border-color:#e7ca8c; background:linear-gradient(100deg,#49543b,#343f2e); box-shadow:inset 3px 0 #e7ca8c; }
.row.sel .row-title { color:#fff0bc; }
.row.sel .row-icon { border-color:#b9a475; background:#344031; }
.empty-note { padding:28px 14px; text-align:center; color:#b4bea7; font-size:13px; line-height:1.6; }
.section-head { font-size:10px; line-height:1.5; font-weight:800; letter-spacing:1.1px; color:#d2c89f; text-transform:uppercase; margin:2px 4px 10px; }
.skillbar { position:relative; height:7px; border-radius:2px; background:#1a251e; overflow:hidden; margin-top:7px; }
.skillbar>span { position:absolute; left:0; top:0; bottom:0; background:#bca4da; border-radius:2px; }
.obj { font-size:12px; line-height:1.4; color:var(--text-2); margin-top:4px; display:flex; gap:6px; }
.obj .box { color:#bbc1a7; }
.obj.done,.obj.done .box { color:var(--green); }
#mapCanvas { display:block; max-width:100%; margin:0 auto; border-radius:5px; border:2px solid #b19964; background:#17291f; }
.map-legend { margin-top:9px; font-size:11px; line-height:1.7; color:#c3c7b1; text-align:center; }
.map-legend b { font-weight:800; }
#shop .tabs { align-items:center; padding:15px 16px; min-height:70px; background:linear-gradient(105deg,#344132,#1b2b23); }
#pickerTitle.tab.sel { text-align:left; font:22px/1.2 var(--display); color:#f2ddb1; padding:5px 0; background:transparent; border:0; box-shadow:none; }
#pickerTitle::before { content:"✦"; display:inline-block; margin-right:10px; color:#cdb47c; font-size:22px; }
#pickerGold { border-color:#6d7856; background:#203124; color:#f1d598; font-size:13px; padding:8px 10px; }
#shop .row { padding:10px 12px; }

/* Conversations remain above the existing touch controls. */
#dialogue { align-items:flex-end; justify-content:center; background:rgba(9,16,11,.2); }
body.controls-on .dialogue-box { margin-bottom:226px; max-height:362px; }
.dialogue-box { margin:var(--safe); width:576px; max-height:552px; display:flex; flex-direction:column; background:linear-gradient(115deg,#293629,#1b281f); border:1px solid #bba06a; border-radius:7px; box-shadow:inset 0 0 0 3px #354232,0 4px 10px #0008; overflow:hidden; }
.dlg-speaker { position:relative; flex:0 0 auto; padding:15px 18px 0; font:700 19px/1.2 var(--display); color:#f5db9e; }
.dlg-speaker::before { content:"✦"; font-size:15px; color:#ae996b; padding-right:8px; }
.dlg-text { padding:9px 18px 15px; font-size:15px; line-height:1.5; color:#f1ebd7; min-height:60px; overflow-y:auto; }
.dlg-choices { padding:0 12px 10px; display:flex; flex-direction:column; gap:7px; flex:0 1 auto; min-height:48px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#8b835b transparent; }
.choice { flex:0 0 auto; padding:10px 13px; background:#2a382a; border:1px solid #566343; border-radius:4px; font-size:14px; line-height:1.3; font-weight:600; color:#d4ddc3; transition:border-color 130ms,background 130ms; }
.choice.sel { border-color:#dec28a; color:#ffefc3; background:#465037; box-shadow:inset 3px 0 #dec28a; }
.choice .tag { font-size:11px; font-weight:800; color:var(--gold); margin-right:6px; }

/* Cloud sync stays readable; no new network assets. */
#syncPanel { z-index:60; display:flex; align-items:center; justify-content:center; background:rgba(5,12,8,.9); }
.sync-box { background:#25352a; border:1px solid #bea56f; border-radius:8px; padding:20px; max-width:90%; text-align:center; box-shadow:0 4px 12px #0008; }
.sync-title { font:700 20px var(--display); color:#f1d8a2; margin-bottom:14px; }
.sync-qr { background:#fff; border-radius:5px; padding:8px; display:inline-block; margin-bottom:12px; }
.sync-qr img { display:block; width:190px; height:190px; }
.sync-link { font-size:13px; font-weight:700; color:var(--gold); word-break:break-all; line-height:1.5; margin-bottom:12px; }
.sync-foot { font-size:12px; color:#c2c9b2; line-height:1.5; }

/* Original vector heraldry: one tiny inline SVG. */
#boot { position:absolute; inset:0; z-index:40; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 38%,#293e30,#101d17 64%); transition:opacity 400ms ease; }
#boot.out { opacity:0; pointer-events:none; }
.boot-glow { position:absolute; width:370px; height:370px; border:1px solid #63734a55; border-radius:50%; pointer-events:none; }
.boot-glow::before,.boot-glow::after { content:""; position:absolute; inset:12px; border:1px solid #687b4c33; border-radius:50%; }
.boot-glow::after { inset:-14px; border-color:#687b4c22; }
.realm-crest { position:relative; width:92px; height:110px; margin-bottom:27px; }
.boot-eyebrow { position:relative; color:#b9be9a; font-size:9px; font-weight:700; letter-spacing:2.5px; margin-bottom:11px; }
.boot-title { position:relative; font:700 35px var(--display); letter-spacing:4px; color:#f4dfac; text-shadow:0 2px #111b15; }
.boot-sub { position:relative; margin-top:18px; font-size:13px; color:#c0c5ac; letter-spacing:.4px; }

/* Combat stays immediate and bright. Motion uses opacity and transform. */
#fx { position:absolute; inset:0; pointer-events:none; z-index:9; overflow:hidden; }
.hitsplat { position:absolute; transform:translate(-50%,-50%); padding:2px 5px; background:#203121bb; border-radius:3px; font-size:19px; font-weight:900; text-shadow:0 1px 2px #000; animation:hitFloat .86s ease-out forwards; }
.hitsplat.enemy { color:#fff4da; }
.hitsplat.player { color:#ff9681; background:#532b20cc; }
@keyframes hitFloat { 0% { opacity:0; transform:translate(-50%,-50%) scale(.6); } 20% { opacity:1; transform:translate(-50%,-95%) scale(1.15); } 100% { opacity:0; transform:translate(-50%,-220%) scale(1); } }
#xpdrops { position:absolute; top:142px; right:14px; display:flex; flex-direction:column; align-items:flex-end; gap:3px; pointer-events:none; z-index:11; }
.xpdrop { font-size:13px; font-weight:800; color:var(--xp); text-shadow:0 1px 3px #000; animation:xpFloat 1.5s ease-out forwards; }
@keyframes xpFloat { 0% { opacity:0; transform:translateY(8px); } 15% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(-16px); } }
#levelBanner { position:absolute; left:50%; top:38%; transform:translate(-50%,-50%); z-index:16; pointer-events:none; padding:15px 23px; border-radius:6px; background:#2c3927; border:1px solid #dfc58a; color:#ffe6a3; font:700 23px var(--display); letter-spacing:.3px; box-shadow:inset 0 0 0 3px #465039,0 4px 10px #0006; opacity:0; }
#levelBanner.show { animation:lvlPop 2.8s ease forwards; }
@keyframes lvlPop { 0% { opacity:0; transform:translate(-50%,-50%) scale(.8); } 12% { opacity:1; transform:translate(-50%,-50%) scale(1.04); } 22% { transform:translate(-50%,-50%) scale(1); } 80% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-62%) scale(1); } }
@media (prefers-reduced-motion:reduce) {
  .tab,.row,.choice,.marker,.bar-fill,.qg-arrow,.ch-fill { transition:none; }
  .tabs { scroll-behavior:auto; }
}

/* Distinct feedback lanes keep long objectives, experience and celebration cards
   clear of one another and the hero. Full labels remain available to assistive UI. */
.vitals-loc { max-width:164px; }
.qg-label { min-width:0; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.qg-distance { flex:0 0 auto; color:#e7cc90; font-size:10px; font-weight:700; }
#xpdrops { top:218px; right:14px; max-width:168px; }
.xpdrop { max-width:168px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
#levelBanner { top:220px; left:12px; transform:none; max-width:388px; padding:10px 14px; font:700 17px/1.3 var(--display); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
@keyframes lvlPop { 0% { opacity:0; transform:translateY(5px); } 12%,80% { opacity:1; transform:none; } 100% { opacity:0; transform:translateY(-5px); } }