/* Sanctuary visual system: quiet contrast, warm metal, generous breathing room. */
:root, [data-theme="midnight"] {
  --calm-bg:#101f20; --calm-panel:#17292a; --calm-ink:#f0eee4;
  --calm-muted:#a4bab4; --calm-gold:#dbc394; --calm-line:rgba(219,195,148,.2);
}
[data-theme="emerald"] { --calm-bg:#10281f; --calm-panel:#1b342a; --calm-ink:#edf3e6; --calm-muted:#aec5b5; --calm-gold:#d8cea3; --calm-line:#d8cea333; }
[data-theme="parchment"] { --calm-bg:#eee8db; --calm-panel:#f8f3e9; --calm-ink:#283e38; --calm-muted:#536b61; --calm-gold:#7c5e2e; --calm-line:#7c5e2e33; }
html, body { overflow:auto !important; background:var(--calm-bg); color:var(--calm-ink); }
body { background-image:radial-gradient(ellipse at 75% 5%,#a2b39412,transparent 55%); }
button,a { -webkit-tap-highlight-color:transparent; }
button:focus-visible,a:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--calm-gold); outline-offset:5px; }
.game-root { max-width:1440px; min-height:100dvh; height:auto; max-height:none; background:transparent; box-shadow:none; overflow:visible; }
#three-global-bg-container { opacity:.12; pointer-events:none; }
.game-top-bar { height:96px; flex-shrink:0; padding:20px 5%; background:transparent; box-shadow:none; border-bottom:1px solid var(--calm-line); gap:20px; }
.brand { display:flex; align-items:center; gap:12px; color:var(--calm-ink); text-decoration:none; margin-right:auto; font:28px 'Cormorant Garamond',serif; letter-spacing:1px; }
.brand-symbol { color:var(--calm-gold); font-size:42px; }
.brand small { display:block; font:8px 'Sarabun',sans-serif; letter-spacing:2.8px; margin-top:3px; color:var(--calm-muted); }
.player-avatar-frame { width:38px; height:38px; border:1px solid var(--calm-line); box-shadow:none; border-radius:50%; }
.player-avatar-frame img { border-radius:50%; }
.player-level-badge { background:var(--calm-gold); font-size:8px; border:0; box-shadow:none; }
.game-currency-pill { background:transparent; box-shadow:none; border:1px solid var(--calm-line); padding:8px 12px; }
.game-currency-add { background:var(--calm-gold); }
#theme-btn,#sound-btn { width:40px; height:40px; background:transparent; border:1px solid var(--calm-line); }
.game-stage-viewport { flex:none; overflow:visible; }
.game-scene { position:relative; inset:auto; display:none; padding:32px 5% 24px; min-height:660px; }
.game-scene.active { display:flex; }
.reading-intro { text-align:center; margin:4px 0 34px; }
.eyebrow { font-size:10px; letter-spacing:3px; color:var(--calm-gold); font-weight:500; }
.reading-intro h1 { font-family:'Pridi',serif; font-size:clamp(25px,3vw,37px); font-weight:400; margin:12px 0 9px; line-height:1.6; }
.reading-intro p { color:var(--calm-muted); font-size:14px; }
.reading-layout { display:grid; grid-template-columns:300px 1fr; gap:44px; width:100%; max-width:1100px; margin:0 auto; }
.ritual-note { padding:24px 0; }
.ritual-note h2 { font:400 30px/1.7 'Pridi',serif; margin:18px 0; }
.ritual-note>p { color:var(--calm-muted); font-size:14px; line-height:1.9; }
.ritual-divider { display:flex; align-items:center; gap:14px; color:var(--calm-gold); margin:23px 0; }
.ritual-divider:before,.ritual-divider:after { content:''; height:1px; background:var(--calm-line); flex:1; }
.ritual-note ol { list-style:none; margin:0; padding:0; }
.ritual-note li { font-size:13px; margin:18px 0; color:var(--calm-muted); }
.ritual-note li span { color:var(--calm-gold); font:16px 'Cormorant Garamond',serif; margin-right:13px; }
.gentle-note { display:flex; gap:12px; border-left:1px solid var(--calm-gold); padding:4px 0 4px 16px; margin:28px 0 22px; }
.gentle-note>span { font-size:24px; color:var(--calm-gold); }
.gentle-note p { font-size:12px; line-height:1.9; color:var(--calm-muted); }
.ritual-duration { font-size:11px; color:var(--calm-muted); }
.reading-panel { display:flex; flex-direction:column; padding:24px; border:1px solid var(--calm-line); border-radius:180px 180px 24px 24px / 45px 45px 24px 24px; background:radial-gradient(ellipse at 50% 10%,#bcc9950b,transparent 65%),var(--calm-panel); box-shadow:0 25px 70px #00000018; }
.reading-panel>div:first-child { justify-content:center; flex-direction:column; gap:10px; }
.reading-panel>div:first-child>div { color:var(--calm-gold); }
#arena-hint { background:transparent; border:0; color:var(--calm-muted); font-size:12px; font-weight:400; }
.arena-playmat { gap:16px; }
.playmat-table { min-height:230px; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; }
.playmat-table:before { content:'✧'; position:absolute; top:5px; left:50%; transform:translateX(-50%); color:var(--calm-gold); font-size:23px; opacity:.6; }
.arena-slots-row { gap:18px; justify-content:center; padding:25px 0 0; }
.runic-slot { width:125px; height:177px; border:1px solid var(--calm-line); border-radius:60px 60px 10px 10px; background:linear-gradient(180deg,#d4c5a508,#0000000a); box-shadow:none; }
.runic-slot:after { inset:7px; border:1px solid var(--calm-line); border-radius:54px 54px 6px 6px; }
.runic-slot-tag { top:auto; bottom:-27px; background:transparent; border:0; font-size:10px; color:var(--calm-muted); font-weight:400; }
.slot-placeholder>span:first-child { font:36px 'Cormorant Garamond',serif; color:var(--calm-gold); }
.slot-placeholder>span:last-child { display:none; }
.runic-slot.has-card { background:var(--calm-bg); border-radius:12px; border-color:var(--calm-gold); box-shadow:0 6px 20px #0002; }
.runic-slot.has-card img { height:85px; border-color:var(--calm-line); }
.runic-slot.has-card>div>div:nth-last-child(2)>div { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%; }
.runic-slot.has-card>div>div:nth-last-child(2)>div:last-child { font-family:'Sarabun',sans-serif; font-weight:400; }
.arena-playmat>div:nth-child(2) { order:3; padding:0 0 2px; }
.player-hand-dock { height:150px; padding-bottom:8px; margin-top:14px; }
.hand-card-item { width:88px; height:132px; margin-left:-14px; border:1px solid #bda678; border-radius:9px; box-shadow:0 8px 18px #0005; padding:0; background:var(--calm-panel); }
.hand-card-item:hover,.hand-card-item:active { transform:translateY(-14px) scale(1.04)!important; box-shadow:0 10px 24px #0006,0 0 0 1px var(--calm-gold); }
.hand-card-item .tcg-holo-rainbow,.hand-card-item .absolute.bottom-1 { display:none; }
.hand-card-item img { filter:saturate(.45); }
.btn-game-3d,.btn-game-gold-aaa { min-height:44px; font-family:'Sarabun',sans-serif; font-weight:600; letter-spacing:0; text-transform:none; border-radius:10px; text-shadow:none; transition:background .2s,transform .2s; }
.btn-game-gold,.btn-game-gold-aaa { background:linear-gradient(120deg,#e6d3ab,#c7b084); color:#23302a; border:1px solid #eadab7; box-shadow:0 4px 15px #0001; }
.btn-game-primary { background:transparent; border:1px solid var(--calm-line); color:var(--calm-ink); box-shadow:none; text-shadow:none; }
.btn-game-3d:hover { filter:brightness(1.08); }
.btn-game-3d:active,.btn-game-gold-aaa:active { transform:translateY(1px); box-shadow:none; }
.reading-footnote { text-align:center; color:var(--calm-muted); font-size:11px; line-height:1.8; padding:24px 0 0; }
.game-bottom-dock { position:sticky; bottom:0; height:82px; flex-shrink:0; width:100%; margin-top:auto; justify-content:center; gap:36px; background:var(--calm-bg); border-top:1px solid var(--calm-line); box-shadow:0 -8px 30px #0000000a; padding-bottom:env(safe-area-inset-bottom); }
.game-tab-btn { min-width:100px; padding:8px 18px; gap:5px; color:var(--calm-muted); }
.game-tab-btn.active { transform:none; color:var(--calm-gold); }
.game-tab-btn.active:before { content:''; position:absolute; top:-4px; width:28px; height:2px; background:var(--calm-gold); }
.tab-icon-wrap,.game-tab-btn.active .tab-icon-wrap { background:transparent; border:0; box-shadow:none; color:inherit; font-size:23px; height:26px; }
.game-tab-label { font-size:12px; font-weight:400; letter-spacing:0; }
.game-scene:not(#scene-arena) { width:min(100%,850px); margin:auto; gap:28px; }
.game-scene h2 { font-weight:400; }
.game-scene .text-amber-300,.game-top-bar .text-amber-300,.game-scene .text-sky-300,.game-scene .text-sky-400 { color:var(--calm-gold); }
.game-scene .text-slate-300,.game-scene .text-slate-400 { color:var(--calm-muted); }
.binder-mastery-panel { padding:20px; background:var(--calm-panel); border:1px solid var(--calm-line); box-shadow:none; }
.binder-slot-recess { box-shadow:none; }
.summon-portal-circle { box-shadow:0 0 65px #c8b48119; }
.summon-rune-ring { border:1px solid var(--calm-line); }
.game-dialog-overlay { position:fixed; bottom:96px; left:50%; right:auto; transform:translateX(-50%); width:min(640px,calc(100% - 28px)); animation:none; }
.game-dialog-box { background:var(--calm-panel); border:1px solid var(--calm-gold); box-shadow:0 16px 65px #0006; padding:22px; }
.dialog-text-body { color:var(--calm-ink); line-height:1.9; max-height:45dvh; overflow:auto; white-space:pre-line; user-select:text; }
.dialog-name-tag,.dialog-continue-cursor { color:var(--calm-gold); }
.dialog-guide-symbol { width:50px; height:50px; }
.tcg-holo-glare { opacity:.22; }
.tcg-holo-rainbow { opacity:.3; }
.screen-shake { animation:none; }
@media(min-width:1100px) { #binder-cards-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:900px) { .reading-layout { grid-template-columns:230px 1fr; gap:24px; } .ritual-note h2 { font-size:25px; }  .reading-panel { padding:20px 14px; } .game-bottom-dock { gap:12px; } }
@media(max-width:640px) {
  .game-top-bar { height:76px; padding:14px 18px; gap:10px; } .brand { font-size:22px; gap:7px; } .brand-symbol { font-size:31px; } .brand small { font-size:6px; letter-spacing:1.3px; }
  .game-currency-pill:first-child { display:none; } .game-currency-pill { padding:6px 9px; gap:4px; } #theme-btn,#sound-btn { width:36px; height:36px; } #karma-quick-add { display:none; }
  .game-scene { padding:24px 16px 16px; min-height:590px; } .reading-intro { margin:0 0 23px; } .reading-intro h1 { font-size:24px; margin:10px 0; } .reading-intro p { font-size:12px; } .eyebrow { font-size:8px; letter-spacing:2px; }
  .reading-layout { display:block; } .ritual-note { display:none; } .reading-panel { padding:20px 12px; } .runic-slot { width:26%; max-width:125px; height:146px; } .arena-slots-row { gap:12px; } .playmat-table { min-height:205px; }
  .runic-slot.has-card img { height:64px; } .player-hand-dock { height:138px; } .hand-card-item { width:73px; height:113px; margin-left:-17px; } .game-bottom-dock { gap:0; justify-content:space-around; height:76px; } .game-tab-btn { min-width:0; padding:8px; flex:1; } .game-tab-label { font-size:11px; }
  .reading-footnote { font-size:10px; padding-top:18px; } .game-dialog-box { padding:16px; gap:10px; } .dialog-guide-symbol { width:34px; height:34px; }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }