@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=ZCOOL+XiaoWei&display=swap');

:root { --bg:#05070a; --panel:rgba(8,13,18,.74); --line:rgba(173,196,200,.16); --muted:#6d7b80; --text:#d9e3df; --silver:#b8e2e3; --cyan:#70d9df; --gold:#f1bf57; --gold-soft:#ffd98c; --serif:'ZCOOL XiaoWei','Songti SC','STSong',serif; --mono:'DM Mono','SF Mono','Menlo',monospace; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--bg); color:var(--text); }
body { font-family:var(--mono); overflow-x:hidden; }
button { font:inherit; color:inherit; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:0; background:radial-gradient(circle at 50% 42%,rgba(25,68,78,.16),transparent 32%),radial-gradient(circle at 82% 20%,rgba(196,141,58,.06),transparent 20%); }
.grain { position:fixed; inset:-50%; pointer-events:none; z-index:10; opacity:.12; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); transform:rotate(8deg); }
.app-shell { position:relative; z-index:1; min-height:100vh; padding:22px 32px 18px; display:flex; flex-direction:column; }
.topbar,.bottom-bar { display:flex; justify-content:space-between; align-items:center; }
.topbar { height:58px; border-bottom:1px solid var(--line); }
.brand-lockup { display:flex; gap:13px; align-items:center; }
.brand-mark { display:grid; place-items:center; width:31px; height:31px; color:var(--gold); border:1px solid rgba(241,191,87,.55); border-radius:50%; font-size:17px; box-shadow:0 0 20px rgba(241,191,87,.12); }
.eyebrow,.panel-label,.top-meta,.stage-caption,.stage-footer,.left-footer,.footer-status,.footer-coords,.result-card-top,.result-pinyin { font-size:9px; letter-spacing:.15em; text-transform:uppercase; }
.eyebrow { color:var(--muted); margin-bottom:4px; }
h1 { margin:0; font-family:var(--serif); font-size:25px; font-weight:400; letter-spacing:.14em; color:#eff4ed; }
h1 span { color:var(--gold); margin:0 4px; }
.top-meta { color:var(--muted); display:flex; align-items:center; gap:10px; }
.live-dot,.status-pip { width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
.meta-divider { width:1px; height:12px; background:var(--line); }
.console-grid { flex:1; display:grid; grid-template-columns:minmax(175px,220px) minmax(420px,1fr) minmax(180px,240px); gap:24px; min-height:0; padding:24px 0 16px; }
.panel { border:1px solid var(--line); background:linear-gradient(145deg,rgba(11,18,23,.76),rgba(3,6,8,.44)); backdrop-filter:blur(9px); padding:18px 16px; position:relative; }
.panel::before { content:''; position:absolute; width:7px; height:7px; border-left:1px solid var(--silver); border-top:1px solid var(--silver); left:-1px; top:-1px; }
.panel-label { color:var(--silver); display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:12px; }
.panel-label span { color:var(--muted); font-size:8px; }
.left-rail,.right-rail { min-height:520px; }
.ritual-steps { padding:20px 0 16px; }
.ritual-step { display:grid; grid-template-columns:24px 1fr 7px; gap:9px; align-items:center; min-height:57px; color:var(--muted); opacity:.6; position:relative; }
.ritual-step::after { content:''; position:absolute; left:11px; top:39px; height:25px; width:1px; background:var(--line); }
.ritual-step:last-child::after { display:none; }
.ritual-step.is-active,.ritual-step.is-done { color:var(--text); opacity:1; }
.ritual-step.is-active i { background:var(--cyan); box-shadow:0 0 12px var(--cyan); }
.ritual-step.is-done i { background:var(--gold); box-shadow:0 0 12px var(--gold); }
.step-index { font-size:10px; color:currentColor; }
.ritual-step strong { display:block; font-family:var(--serif); font-size:16px; font-weight:400; letter-spacing:.08em; }
.ritual-step small { display:block; font-size:8px; letter-spacing:.12em; margin-top:4px; }
.ritual-step i { width:5px; height:5px; display:block; border-radius:50%; background:var(--muted); }
.rail-divider { height:1px; background:var(--line); margin:5px 0 17px; }
.signal-block { padding-bottom:20px; }
.signal-block .panel-label { border-bottom:0; padding-bottom:10px; }
.signal-row { display:grid; grid-template-columns:20px 1fr auto; align-items:center; gap:6px; font-size:10px; padding:8px 0; color:var(--muted); border-top:1px solid rgba(173,196,200,.07); }
.signal-row b { font-weight:400; color:var(--cyan); font-size:8px; }
.signal-icon { color:var(--silver); font-size:16px; }
.tiny-button,.ghost-button { width:100%; margin-top:12px; border:1px solid rgba(184,226,227,.25); background:rgba(184,226,227,.05); padding:9px 10px; text-align:left; cursor:pointer; font-size:9px; letter-spacing:.06em; transition:.25s ease; }
.tiny-button:hover,.ghost-button:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(112,217,223,.09); }
.tiny-button span,.ghost-button span { float:right; color:var(--cyan); }
.camera-preview { display:none; width:100%; aspect-ratio:4/3; margin-top:12px; object-fit:cover; filter:saturate(.25) contrast(1.15); border:1px solid var(--line); opacity:.55; }
.camera-preview.is-on { display:block; }
.left-footer { position:absolute; bottom:16px; left:16px; right:16px; display:flex; align-items:center; gap:6px; color:var(--muted); }
kbd { border:1px solid var(--line); padding:3px 5px; color:var(--silver); font-size:8px; letter-spacing:0; }
.stage-wrap { min-width:0; display:flex; flex-direction:column; }
.stage-caption,.stage-footer { color:var(--muted); display:flex; justify-content:space-between; padding:0 4px 9px; }
.stage-caption span:last-child { color:var(--cyan); }
.stage { flex:1; min-height:520px; position:relative; overflow:hidden; border:1px solid var(--line); background:#030608; box-shadow:inset 0 0 100px rgba(60,139,147,.055); }
.stage::before,.stage::after { content:''; position:absolute; pointer-events:none; z-index:2; }
.stage::before { inset:12px; border:1px solid rgba(173,196,200,.09); clip-path:polygon(0 0,90px 0,90px 1px,0 1px,0 90px,1px 90px,1px 0,100% 0,100% 90px,calc(100% - 1px) 90px,calc(100% - 1px) 1px,calc(100% - 90px) 1px,calc(100% - 90px) 0,100% 0,100% 100%,0 100%); }
.stage::after { width:100%; height:1px; left:0; top:50%; background:linear-gradient(90deg,transparent,rgba(112,217,223,.12),transparent); }
#ritual-canvas { display:block; width:100%; max-width:100%; height:100%; min-width:0; }
.stage-vignette { position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle,transparent 20%,rgba(2,4,6,.2) 60%,rgba(2,4,6,.84) 100%); z-index:1; }
.crosshair { width:16px; height:16px; position:absolute; z-index:3; opacity:.5; }
.crosshair::before,.crosshair::after { content:''; position:absolute; background:var(--silver); }
.crosshair::before { width:16px; height:1px; top:7px; }.crosshair::after { width:1px; height:16px; left:7px; }
.crosshair-top { top:20px; left:50%; transform:translateX(-50%); }.crosshair-bottom { bottom:20px; left:50%; transform:translateX(-50%); }
.cast-hint { position:absolute; left:50%; bottom:45px; transform:translateX(-50%); z-index:4; text-align:center; color:var(--silver); transition:.4s ease; pointer-events:none; white-space:nowrap; }
.cast-hint strong { display:block; font-family:var(--serif); font-size:17px; font-weight:400; letter-spacing:.16em; }.cast-hint small { color:var(--muted); display:block; margin-top:7px; font-size:8px; letter-spacing:.2em; }
.hint-orb { display:block; width:5px; height:5px; background:var(--cyan); border-radius:50%; margin:0 auto 12px; box-shadow:0 0 16px var(--cyan); animation:breathe 2s ease-in-out infinite; }.cast-hint.is-hidden { opacity:0; transform:translate(-50%,12px); }
.flash { position:absolute; inset:0; z-index:5; pointer-events:none; background:radial-gradient(circle,rgba(255,255,255,.9),rgba(174,237,239,.35) 17%,transparent 58%); opacity:0; }.flash.is-active { animation:flash .62s ease-out; }
.result-card { position:absolute; z-index:6; left:50%; top:50%; width:min(285px,62%); transform:translate(-50%,-48%) scale(.82); opacity:0; pointer-events:none; padding:18px 20px 16px; background:linear-gradient(145deg,rgba(20,17,10,.93),rgba(10,9,7,.96)); border:1px solid rgba(241,191,87,.55); box-shadow:0 0 0 1px rgba(241,191,87,.08),0 0 70px rgba(241,191,87,.18),inset 0 0 30px rgba(241,191,87,.04); transition:.7s cubic-bezier(.2,.8,.2,1); }
.result-card.is-visible { transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto; }
.result-card-top { display:flex; justify-content:space-between; color:var(--gold-soft); font-size:8px; }.result-card-top button { border:0; background:none; padding:0; color:var(--gold); font-size:19px; line-height:10px; cursor:pointer; }
.result-symbol { font-family:var(--serif); font-size:38px; text-align:center; letter-spacing:.16em; margin:23px 0 5px; color:#ffe0a1; text-shadow:0 0 21px rgba(241,191,87,.33); }.result-pinyin { text-align:center; color:var(--gold); font-size:8px; }.result-line { height:1px; margin:18px 0 14px; background:linear-gradient(90deg,transparent,rgba(241,191,87,.65),transparent); }
.result-card p { margin:0; font-family:var(--serif); line-height:1.8; font-size:13px; color:rgba(255,239,206,.82); }.result-footer { display:flex; justify-content:space-between; margin-top:19px; color:rgba(241,191,87,.7); font-size:8px; letter-spacing:.12em; }
.yao-list { display:flex; flex-direction:column; gap:1px; padding:23px 0 18px; }.yao-row { min-height:43px; display:grid; grid-template-columns:38px 1fr 25px; align-items:center; gap:9px; border-bottom:1px solid rgba(173,196,200,.07); color:var(--muted); transition:.45s ease; }.yao-row.is-new { color:var(--text); animation:row-in .5s ease both; }
.yao-name { font-family:var(--serif); font-size:13px; }.yao-line { height:5px; display:block; position:relative; background:var(--cyan); box-shadow:0 0 9px rgba(112,217,223,.6); opacity:0; transform:scaleX(.1); transition:.5s ease; }.yao-line::after { content:''; position:absolute; inset:-4px 0; border-top:1px solid rgba(255,255,255,.42); border-bottom:1px solid rgba(255,255,255,.1); }.yao-line.yin::before { content:''; position:absolute; width:18%; left:41%; top:-1px; bottom:-1px; background:var(--bg); z-index:1; }.yao-row.is-cast .yao-line { opacity:1; transform:scaleX(1); }.yao-row.is-cast .yao-value { color:var(--cyan); }.yao-value { text-align:right; font-size:9px; color:var(--muted); }
.right-note { border-left:1px solid var(--cyan); padding:1px 0 1px 11px; color:var(--muted); font-family:var(--serif); font-size:13px; line-height:1.65; }.right-actions { position:absolute; bottom:16px; left:16px; right:16px; }
.bottom-bar { min-height:43px; border-top:1px solid var(--line); }.footer-status { display:flex; align-items:center; gap:8px; color:var(--muted); }.footer-controls { display:flex; gap:7px; align-items:center; }
.primary-button { border:1px solid rgba(112,217,223,.5); background:rgba(112,217,223,.1); padding:10px 14px; color:var(--silver); letter-spacing:.08em; cursor:pointer; transition:.25s ease; }.primary-button:hover { background:rgba(112,217,223,.18); border-color:var(--cyan); box-shadow:0 0 25px rgba(112,217,223,.12); }.button-glyph { color:var(--cyan); margin-right:4px; }.primary-button kbd { margin-left:13px; color:var(--muted); }
.sound-button { border:1px solid var(--line); background:none; width:34px; height:35px; cursor:pointer; color:var(--cyan); }.sound-button.is-muted { color:var(--muted); }.footer-coords { color:var(--muted); }.footer-coords span { color:var(--gold); padding:0 8px; }
body.is-gold .top-meta,body.is-gold .stage-caption span:last-child { color:var(--gold); } body.is-gold .live-dot,body.is-gold .status-pip { background:var(--gold); box-shadow:0 0 12px var(--gold); } body.is-gold .cast-hint { color:var(--gold-soft); } body.is-gold .hint-orb { background:var(--gold); box-shadow:0 0 16px var(--gold); } body.is-gold .stage { box-shadow:inset 0 0 100px rgba(173,104,20,.09); }
@keyframes breathe { 0%,100% { transform:scale(.72); opacity:.6; } 50% { transform:scale(1.35); opacity:1; } } @keyframes flash { 0% { opacity:0; } 18% { opacity:.95; } 100% { opacity:0; } } @keyframes row-in { 0% { opacity:0; transform:translateX(10px); } 100% { opacity:1; transform:translateX(0); } }
@media (max-width:980px) { .app-shell { padding:16px; }.console-grid { grid-template-columns:1fr; gap:12px; }.left-rail,.right-rail { min-height:auto; }.left-rail { display:none; }.right-rail { order:2; }.stage { min-height:68vh; }.right-actions { position:static; }.yao-list { display:grid; grid-template-columns:repeat(3,1fr); }.right-note { display:none; }.footer-coords { display:none; } }
@media (max-width:560px) { .top-meta { display:none; }.topbar { height:48px; }.stage { min-height:66vh; }.stage-footer { padding-top:7px; }.stage-footer span:first-child { max-width:180px; }.primary-button { font-size:9px; padding:10px 9px; }.primary-button kbd { display:none; }.result-card { width:78%; }.result-symbol { font-size:31px; } }

/* Refined ritual-console layer */
html { background:#030507; }
body { background:
  radial-gradient(ellipse at 50% 44%, rgba(28,82,91,.16) 0%, rgba(4,8,11,.08) 32%, transparent 62%),
  linear-gradient(125deg, #030507 0%, #071015 48%, #030507 100%);
}
body::after { content:''; position:fixed; inset:0; pointer-events:none; opacity:.32; background-image:linear-gradient(rgba(112,217,223,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(112,217,223,.035) 1px,transparent 1px); background-size:72px 72px; mask-image:radial-gradient(ellipse at 50% 45%,#000 0%,transparent 74%); }
.app-shell { max-width:1640px; width:100%; margin:0 auto; padding:26px 40px 22px; }
.topbar { height:72px; border-bottom-color:rgba(184,226,227,.2); }
.brand-lockup { gap:16px; }
.brand-mark { width:40px; height:40px; font-size:21px; border-color:rgba(241,191,87,.72); box-shadow:0 0 28px rgba(241,191,87,.16), inset 0 0 15px rgba(241,191,87,.08); }
.brand-mark::after { content:''; position:absolute; width:5px; height:5px; margin-left:27px; margin-top:-27px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.eyebrow { font-size:8px; letter-spacing:.22em; color:#829497; }
h1 { font-size:31px; letter-spacing:.2em; text-shadow:0 0 24px rgba(184,226,227,.12); }
.top-meta { font-size:8px; letter-spacing:.19em; }
.live-dot { width:7px; height:7px; }
.console-grid { grid-template-columns:230px minmax(500px,1fr) 250px; gap:18px; padding:28px 0 18px; }
.panel { border-radius:16px; border-color:rgba(184,226,227,.2); background:linear-gradient(145deg,rgba(14,27,32,.68),rgba(4,8,11,.72)); box-shadow:0 18px 50px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04); padding:22px 18px; }
.panel::after { content:''; position:absolute; right:18px; top:18px; width:5px; height:5px; border-radius:50%; background:rgba(112,217,223,.65); box-shadow:0 0 12px rgba(112,217,223,.7); }
.panel-label { font-size:8px; letter-spacing:.21em; padding-bottom:14px; }
.panel-label span { font-size:7px; letter-spacing:.12em; }
.ritual-steps { padding:23px 0 19px; }
.ritual-step { min-height:64px; grid-template-columns:28px 1fr 8px; }
.ritual-step::after { left:13px; top:43px; height:30px; background:linear-gradient(var(--line),transparent); }
.step-index { font-size:9px; letter-spacing:.08em; }
.ritual-step strong { font-size:18px; letter-spacing:.12em; }
.ritual-step small { font-size:7px; letter-spacing:.17em; color:#829497; }
.ritual-step i { width:6px; height:6px; }
.rail-divider { background:linear-gradient(90deg,rgba(184,226,227,.2),transparent); margin:10px 0 20px; }
.signal-row { font-size:9px; padding:10px 0; }
.signal-row b { font-size:7px; letter-spacing:.08em; }
.tiny-button,.ghost-button { border-radius:7px; padding:11px 12px; border-color:rgba(184,226,227,.28); background:linear-gradient(100deg,rgba(112,217,223,.09),rgba(112,217,223,.02)); }
.left-footer { font-size:8px; letter-spacing:.17em; }
.left-footer kbd { border-radius:4px; padding:4px 6px; background:rgba(184,226,227,.05); }
.stage-wrap { position:relative; }
.stage-caption { padding:0 8px 10px; letter-spacing:.2em; }
.stage { border-radius:24px; border-color:rgba(184,226,227,.24); min-height:580px; background:
  radial-gradient(circle at 50% 49%,rgba(19,71,78,.13),transparent 35%),
  linear-gradient(145deg,#040a0d,#020506 70%);
  box-shadow:0 26px 80px rgba(0,0,0,.35), inset 0 0 120px rgba(70,174,181,.06), inset 0 1px 0 rgba(255,255,255,.08);
}
.stage::before { inset:14px; border-radius:15px; border-color:rgba(184,226,227,.12); }
.stage::after { opacity:.7; }
.stage-vignette { background:radial-gradient(circle at 50% 46%,transparent 18%,rgba(2,4,6,.12) 54%,rgba(2,4,6,.88) 100%); }
.crosshair { opacity:.72; }
.cast-hint { bottom:38px; padding:11px 22px 12px; border:1px solid rgba(112,217,223,.14); border-radius:999px; background:rgba(4,11,14,.5); box-shadow:0 8px 30px rgba(0,0,0,.2); }
.cast-hint strong { font-size:16px; letter-spacing:.2em; }
.cast-hint small { letter-spacing:.25em; }
.hint-orb { margin-bottom:9px; }
.stage-footer { padding:11px 8px 0; font-size:8px; letter-spacing:.17em; }
.stage-footer b { color:var(--silver); font-size:13px; font-weight:400; letter-spacing:.05em; }
.result-card { border-radius:17px; width:min(320px,62%); padding:21px 23px 18px; backdrop-filter:blur(12px); }
.result-card-top { font-size:7px; letter-spacing:.2em; }
.result-symbol { font-size:43px; margin:27px 0 6px; }
.result-card p { font-size:14px; line-height:1.95; }
.result-footer { font-size:7px; }
.right-rail { overflow:hidden; }
.yao-list { padding:24px 0 20px; gap:5px; }
.yao-row { min-height:49px; padding:0 8px; border:1px solid transparent; border-radius:8px; grid-template-columns:42px 1fr 31px; }
.yao-row.is-cast { background:linear-gradient(90deg,rgba(112,217,223,.09),transparent); border-color:rgba(112,217,223,.1); }
.yao-name { font-size:14px; }
.yao-line { height:4px; }
.yao-value { font-size:8px; letter-spacing:.04em; }
.right-note { border-left-width:2px; border-left-color:rgba(112,217,223,.7); padding:5px 0 5px 13px; font-size:14px; }
.right-actions { left:18px; right:18px; bottom:18px; }
.ghost-button { text-align:center; letter-spacing:.13em; }
.bottom-bar { min-height:54px; border-top-color:rgba(184,226,227,.2); }
.footer-status,.footer-coords { font-size:8px; letter-spacing:.2em; }
.primary-button { border-radius:999px; padding:12px 18px 12px 15px; border-color:rgba(112,217,223,.62); box-shadow:0 6px 22px rgba(0,0,0,.2); }
.primary-button:hover { transform:translateY(-1px); }
.sound-button { border-radius:50%; width:36px; height:36px; }
body.is-gold .stage { border-color:rgba(241,191,87,.42); box-shadow:0 26px 90px rgba(91,58,18,.22),inset 0 0 130px rgba(173,104,20,.12),inset 0 1px 0 rgba(255,228,163,.12); }
body.is-gold .stage::before { border-color:rgba(241,191,87,.23); }
body.is-gold .panel::after { background:var(--gold); box-shadow:0 0 12px var(--gold); }
body.is-gold .yao-row.is-cast { background:linear-gradient(90deg,rgba(241,191,87,.12),transparent); border-color:rgba(241,191,87,.14); }
@media (max-width:1100px) { .app-shell { padding-left:24px; padding-right:24px; }.console-grid { grid-template-columns:200px minmax(400px,1fr) 220px; gap:13px; } }
@media (max-width:980px) { .app-shell { padding:16px; }.console-grid { grid-template-columns:1fr; gap:14px; }.stage { min-height:68vh; border-radius:20px; }.right-rail { border-radius:16px; }.primary-button { padding:11px 15px; } }
@media (max-width:560px) { h1 { font-size:25px; }.brand-mark { width:34px; height:34px; font-size:18px; }.app-shell { padding:12px; }.stage { min-height:64vh; border-radius:17px; }.cast-hint { bottom:29px; padding:9px 15px; }.cast-hint strong { font-size:13px; }.result-card { width:82%; }.result-symbol { font-size:34px; }.bottom-bar { min-height:62px; }.footer-status { display:none; }.footer-controls { margin:0 auto; } }

@media (max-width:980px) {
  html, body { width:100%; max-width:100%; overflow-x:hidden; }
  .app-shell, .console-grid, .stage-wrap, .stage { width:100%; min-width:0; max-width:100%; }
  .console-grid { overflow:hidden; }
}

/* Hand cue + calm mobile hierarchy */
body { line-height:1.45; }
.stage-caption span, .stage-footer span { white-space:nowrap; }
.hand-visual { position:absolute; z-index:4; right:24px; bottom:24px; width:126px; height:176px; display:grid; place-items:center; pointer-events:none; filter:drop-shadow(0 0 16px rgba(112,217,223,.22)); opacity:.86; }
.hand-orbit { position:absolute; width:112px; height:112px; border:1px solid rgba(112,217,223,.24); border-radius:50%; box-shadow:0 0 24px rgba(112,217,223,.14), inset 0 0 18px rgba(112,217,223,.08); animation:hand-orbit 8s linear infinite; }
.hand-orbit::before, .hand-orbit::after { content:''; position:absolute; inset:10px; border:1px dashed rgba(184,226,227,.2); border-radius:50%; }
.hand-orbit::after { inset:25px; border-style:solid; border-color:rgba(241,191,87,.3) transparent; }
.hand-svg { position:relative; z-index:1; width:92px; height:118px; overflow:visible; }
.hand-pose { fill:rgba(112,217,223,.1); stroke:var(--cyan); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transform-origin:50% 85%; transition:opacity .28s ease, transform .5s cubic-bezier(.2,.8,.2,1), fill .28s ease, stroke .28s ease; }
.hand-detail { fill:none; stroke:rgba(184,226,227,.78); stroke-width:1.5; }
.hand-pose-open { opacity:1; transform:translateY(0) rotate(-7deg) scale(1); }
.hand-pose-fist { opacity:0; transform:translateY(12px) rotate(7deg) scale(.84); }
.hand-visual.is-fist { animation:hand-thump .72s ease both; }
.hand-visual.is-fist .hand-pose-open { opacity:0; transform:translateY(-7px) rotate(-16deg) scale(.8); }
.hand-visual.is-fist .hand-pose-fist { opacity:1; transform:translateY(0) rotate(4deg) scale(1); fill:rgba(241,191,87,.14); stroke:var(--gold); }
.hand-visual.is-fist .hand-detail { stroke:rgba(255,218,139,.82); }
.hand-label { position:absolute; bottom:-1px; left:50%; transform:translateX(-50%); display:grid; gap:3px; text-align:center; white-space:nowrap; color:var(--muted); font-size:8px; letter-spacing:.13em; }
.hand-label b { color:var(--cyan); font-size:7px; font-weight:400; }
.hand-visual.is-fist .hand-label b { color:var(--gold); }
.hand-label em { font-style:normal; color:#70898d; font-size:6px; letter-spacing:.06em; }
.hand-label em[data-tone="ready"] { color:var(--cyan); }
.hand-label em[data-tone="cast"] { color:var(--gold); }
.hand-label em[data-tone="error"] { color:#ef9b86; }
.camera-quick-button { position:absolute; z-index:4; top:22px; left:22px; display:none; border:1px solid rgba(112,217,223,.34); border-radius:999px; padding:7px 11px; background:rgba(3,10,13,.7); color:var(--silver); font:inherit; font-size:8px; letter-spacing:.1em; cursor:pointer; }
.camera-quick-button.is-active { color:var(--gold); border-color:rgba(241,191,87,.5); }
@keyframes hand-orbit { to { transform:rotate(360deg); } }
@keyframes hand-thump { 0% { transform:scale(1); } 30% { transform:scale(1.08); } 100% { transform:scale(1); } }

@media (max-width:980px) {
  .app-shell { padding:18px 16px 14px; }
  .topbar { height:62px; }
  .console-grid { padding:18px 0 14px; }
  .stage { min-height:clamp(420px, 66vh, 620px); }
  .hand-visual { right:14px; bottom:22px; transform:scale(.86); transform-origin:bottom right; }
  .camera-quick-button { display:block; }
  .cast-hint { bottom:38px; max-width:calc(100% - 170px); white-space:normal; }
  .cast-hint strong, .cast-hint small { display:block; }
  .right-rail { padding:18px 16px; }
  .yao-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .yao-row { min-height:46px; grid-template-columns:34px minmax(0,1fr) 28px; gap:6px; }
  .yao-name { font-size:13px; }
  .right-note { display:block; margin-top:4px; font-size:12px; }
  .right-actions { margin-top:14px; }
  .bottom-bar { min-height:58px; }
  .footer-controls { width:100%; justify-content:center; }
  .primary-button { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

@media (max-width:560px) {
  h1 { font-size:24px; letter-spacing:.12em; }
  .eyebrow { font-size:7px; letter-spacing:.16em; }
  .topbar { height:56px; }
  .console-grid { gap:12px; }
  .stage-caption { padding:0 4px 8px; font-size:8px; letter-spacing:.12em; }
  .stage { min-height:clamp(390px, 61vh, 520px); border-radius:18px; }
  .hand-visual { right:4px; bottom:17px; transform:scale(.67); }
  .camera-quick-button { top:16px; left:16px; font-size:7px; padding:6px 9px; }
  .cast-hint { left:38%; bottom:29px; max-width:54%; padding:8px 12px; }
  .cast-hint strong { font-size:12px; letter-spacing:.1em; }
  .cast-hint small { font-size:7px; letter-spacing:.12em; }
  .stage-footer { font-size:7px; letter-spacing:.08em; }
  .right-rail { border-radius:14px; }
  .panel-label { font-size:9px; letter-spacing:.13em; }
  .panel-label span { font-size:7px; }
  .yao-list { padding:16px 0 10px; }
  .yao-row { min-height:42px; }
  .yao-value { font-size:7px; }
  .right-note { font-size:11px; line-height:1.5; }
  .bottom-bar { margin-top:2px; }
}