:root{color-scheme:dark;--gold:#e1bb6c;--pale:#f4e6b9;--muted:#849b8b;--green:#39d7a0;--line:#6b613b;--scale:1}
*{box-sizing:border-box}
html{width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:pan-y;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
body{position:fixed;inset:0;margin:0;background:#030907;color:var(--pale);overflow:hidden;overscroll-behavior:none;height:100dvh;display:grid;place-items:center;background-image:radial-gradient(ellipse at 50% 40%,#11271e 0,transparent 65%);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button,input{-webkit-tap-highlight-color:transparent}
button{color:inherit;cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default;opacity:.4}
button:focus-visible,input:focus-visible{outline:3px solid #a7ffe0;outline-offset:4px}
[hidden]{display:none!important}
#game{width:1080px;height:1920px;position:fixed;left:var(--view-center-x,50%);top:var(--view-center-y,50%);transform:translate(-50%,-50%) scale(var(--scale));transform-origin:center;background:#05110d url('../assets/backgrounds/01.webp') center / 100% 100% no-repeat;overflow:hidden;padding:16px 24px 12px;border:1px solid #53472b;box-shadow:0 0 90px #000a;display:flex;flex-direction:column;touch-action:none}
#game:before{content:'';position:absolute;inset:12px;border:1px solid #b0914930;pointer-events:none}
.header{height:135px;display:flex;align-items:center;gap:25px;flex-shrink:0}
.brand{margin-right:auto}
.brand-en{display:block;color:#b5aa87;margin-bottom:6px}
h1{margin:0;color:#f4e4ad;text-shadow:0 2px 0 #000}
small{}
.wallet{display:flex;align-items:center;gap:16px;background:#07160e;border:1px solid #938057;border-radius:22px;padding:15px 24px;box-shadow:inset 0 0 20px #ffffff04}
.wallet small{color:var(--muted);display:block;margin-bottom:4px}
.wallet strong{}
.jade-coin{width:44px;height:44px;border-radius:50%;border:12px solid #279c72;box-shadow:inset 0 2px 6px #a6ffb8,0 0 8px #163c2e;background:#072819}
.icon-btn{width:66px;height:66px;border:1px solid #7f714b;background:#0a2118;border-radius:17px;}
.upgrade{height:108px;border-top:1px solid #9c8248;border-bottom:1px solid #726039;border-radius:7px;background:linear-gradient(110deg,#11281c,#07170f);margin-top:15px;display:flex;align-items:center;justify-content:space-between;padding:0 27px;flex-shrink:0;box-shadow:0 10px 22px #0003}
.streak-label{display:flex;align-items:center;gap:20px}
.diamond{color:#83cdb0;text-shadow:0 0 14px #49ac7930}
.streak-label small{color:#ccd4b6}
.streak-label strong{margin-left:15px;color:#f1c961}
.streak-dots{display:flex;gap:8px;margin-left:4px}
.streak-dots i{width:14px;height:14px;border:1px solid #5d735c;transform:rotate(45deg);background:#15281d}
.streak-dots i.on{background:#52dab0;border-color:#bbf7d0;box-shadow:0 0 9px #53d9a788}
.level-block{border-left:1px solid #526043;padding-left:32px;min-width:225px}
.level-block small{display:block;color:#acbc9d;margin-bottom:4px}
.level-block strong{}
.level-block em{color:#9fe7b5;margin-left:8px}
.scene-wrap{height:934px;min-height:934px;position:relative;flex:1 0 934px}
.scene-top{position:absolute;left:4px;right:4px;top:29px;display:flex;justify-content:space-between;align-items:center;z-index:2;color:#d4c391;pointer-events:none}
#scene{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
#scene:active{cursor:grabbing}
.stone-picker{height:185px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;flex-shrink:0}
.stone-card{position:relative;background:linear-gradient(150deg,#14291e,#081b12);border:1px solid #6a6849;border-radius:17px;display:flex;align-items:center;justify-content:center;gap:7px;overflow:hidden;box-shadow:inset 0 0 20px #0003;transition:border-color .18s,background .18s}
.stone-card.selected{border:3px solid #e7c97a;background:radial-gradient(ellipse at 30% 50%,#42654655,#122519 70%);box-shadow:0 0 17px #dbb95a20,inset 0 0 22px #dcb9680b}
.stone-card svg{width:145px;height:140px;filter:drop-shadow(0 8px 6px #0008)}
.stone-info{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.stone-info small{color:#c0c2a8}
.stone-info strong{color:#e8d39a}
.selected-tick{position:absolute;right:13px;top:10px;color:#f1d789}
.bet-panel{display:flex;height:168px;gap:16px;margin-top:22px;flex-shrink:0}
.bet-input{border:1px solid #76623e;border-radius:14px;flex:1;background:#0b1b13;padding:12px 24px}
.bet-input label{display:block;text-align:center;color:#c5bf9e}
.bet-controls{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.bet-controls button{width:69px;height:69px;border:1px solid #a08e5b;background:linear-gradient(#23553c,#0d2b1d);border-radius:16px;box-shadow:inset 0 2px 0 #bfffd526,0 4px 5px #0005}
.bet-controls strong{}
.catalog-btn{width:194px;border:1px solid #a28b56;background:linear-gradient(#193524,#0a2015);border-radius:15px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px}
.catalog-btn>span{color:#e1c984}
.history-btn{width:85px;border:1px solid #5b674d;background:#0c2017;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-direction:column}
.history-btn small{color:#a8b39a}
.actions{margin-top:23px;flex-shrink:0}
.primary{width:100%;height:133px;border-radius:18px;border:2px solid #f9df94;background:linear-gradient(110deg,#b87a23,#ecc568 28%,#ffe6a1 50%,#eac26a 72%,#b9812c);box-shadow:inset 0 5px 0 #fff3bb, inset 0 -7px 0 #8e5b16,0 5px 0 #38260e,0 0 28px #ffc13a1f;color:#39240d;text-shadow:0 1px 0 #fff4c5}
.primary:not(:disabled):active,.secondary:active{transform:translateY(3px);filter:brightness(.95)}
.decision-actions{display:grid;grid-template-columns:.8fr 1.2fr;gap:16px}
.decision-actions button{}
.secondary{border:1px solid #ad955d;background:linear-gradient(#1c5134,#0d2619);border-radius:18px;}
.progress-track{height:4px;background:#233729;margin:17px 5px 0;border-radius:2px;overflow:hidden}
.progress-track i{display:block;width:0;height:100%;background:#6bdeb0}
.actions p{text-align:center;margin:14px 0 0;color:#a6b89f;min-height:28px}
.result-card{position:absolute;left:40px;right:40px;bottom:24px;padding:27px 35px 22px;border:1px solid #b69c55;border-radius:20px;background:linear-gradient(120deg,#0b291ff5,#061b13f5);text-align:center;box-shadow:0 15px 50px #0008}
.result-card>small{color:#e2c273}
.result-card h2{margin:8px 0 0;}
.result-mult{color:#f6df9a;margin:5px 0}
.result-card p{color:#b2c1a6;margin:8px 0}
.result-amount{display:flex;justify-content:space-around;border-top:1px solid #69714d;padding-top:15px;margin-top:17px}
.result-amount span{color:#9bad98}
.result-amount strong{display:block;color:#f0dfb0;margin-top:5px}
.result-amount strong.positive{color:#70e3ac}
.result-card #next-level{margin-top:16px;color:#d4c082}
#renderer-error{position:absolute;top:40%;left:10%;right:10%;text-align:center;color:#fac078}
dialog{position:fixed;left:var(--view-center-x,50%);top:var(--view-center-y,50%);margin:0;transform:translate(-50%,-50%) scale(var(--scale));width:980px;max-width:none;max-height:1660px;background:#0d2118;border:1px solid #9a8050;border-radius:20px;color:#f0e5c7;padding:0;box-shadow:0 30px 90px #000b;touch-action:pan-y;}
dialog::backdrop{background:#010805c9}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:30px 36px;border-bottom:1px solid #495037}
.modal-head small{color:#b4a373}
.modal-head h2{margin:7px 0 0}
.modal-head button{width:88px;height:88px;border:1px solid #647351;background:#163124;border-radius:12px;}
.modal-body{padding:28px 36px;overflow-y:auto;max-height:1400px;line-height:1.8;touch-action:pan-y;overscroll-behavior:none;-webkit-overflow-scrolling:touch}
.modal-body p{margin-top:0;color:#becab5}
.catalog-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.catalog-item{border:1px solid #405a41;border-radius:12px;padding:14px;background:#0a1912;position:relative}
.catalog-stone{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;border-radius:10px;margin-bottom:16px;background:radial-gradient(ellipse at center,#16372b,#07170f 75%)}
.catalog-item h3{margin:0 0 4px}
.catalog-item strong{color:#edcf8a;}
.catalog-item small{display:block;color:#91a58e}
.catalog-item p{margin:6px 0}
.modal-body .note{padding:12px;border:1px solid #54603c;border-radius:10px;}
.modal-body button{padding:12px 18px;background:#254a31;border:1px solid #947c46;border-radius:10px;}
.record{padding:13px 0;border-bottom:1px solid #364e39;display:flex;justify-content:space-between;gap:10px}
.record small{display:block;color:#9aae95}
.record strong{color:#dfc68c}
.positive{color:#80dfa9!important}
.negative{color:#c6b6a0!important}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}
}


/* Keep the cut surfaces visible while the appraisal occupies the selection strip. */
#game[data-phase=result] .stone-picker{visibility:hidden}

#game[data-phase=result] .result-card{bottom:-210px;z-index:3}

.bet-controls button,.icon-btn{position:relative}

.bet-controls button:before,.icon-btn:before{content:'';position:absolute;inset:-30px -20px}


/* Typography uses 1080 × 1920 design pixels, including the scaled dialogs. */
#game[data-phase=result] #angle-label{visibility:hidden}

#game[data-phase=result] .result-card{padding:28px 35px;line-height:1.25}

.result-card p,.result-amount span,.result-card>small{color:#c1ceba}

.result-card #next-level{line-height:1.4}

.result-amount span{}

.level-block strong,.bet-input label,.catalog-btn{}

.stone-info strong{}

.brand{flex-shrink:0}
.wallet{padding:15px 18px}
.header{gap:20px}

.streak-label{gap:14px}
.streak-dots{gap:6px}
.streak-dots i{width:12px;height:12px}

.level-block{padding-left:24px;min-width:245px}

.actions p{line-height:1.3;min-height:37px}



.modal-head button{}
.modal-body button{min-height:80px}

.modal-body .note{padding:20px}
.catalog-item{padding:22px}
.record{gap:24px}


#cut-line-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
#cut-line{stroke:#ff6049;stroke-width:5;stroke-linecap:round}
#window-preview{position:absolute;z-index:2;bottom:20px;left:50%;transform:translateX(-50%);background:#0a2018dd;padding:12px 26px;border:1px solid #6b7954;border-radius:12px;pointer-events:none}


/* Rarity reveal: one soft light pulse, distinct finite bursts, a quiet resting halo. */
#scene{z-index:1}
#reveal-effects{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;--reveal-color:#cadfcd}
.reveal-aura{position:absolute;left:8%;top:4%;width:84%;height:78%;border-radius:50%;background:radial-gradient(ellipse,color-mix(in srgb,var(--reveal-color) 36%,transparent),transparent 66%);opacity:0}
.reveal-ring{position:absolute;left:50%;top:42%;width:500px;height:500px;margin:-250px;border:3px solid var(--reveal-color);border-radius:50%;opacity:0;box-shadow:0 0 24px color-mix(in srgb,var(--reveal-color) 28%,transparent)}
.ring-two{border-width:1px}
.reveal-rays,.reveal-motes{position:absolute;left:50%;top:42%}
.reveal-rays i{position:absolute;width:9px;height:350px;left:-4px;bottom:0;transform-origin:50% 100%;background:linear-gradient(transparent,var(--reveal-color));clip-path:polygon(50% 0,100% 100%,0 100%);opacity:0;transform:rotate(var(--turn))}
.reveal-motes i{position:absolute;left:0;top:0;width:var(--size);height:var(--size);border-radius:2px;background:var(--reveal-color);box-shadow:0 0 12px var(--reveal-color);opacity:0}
#reveal-badge{position:absolute;top:32px;left:50%;transform:translateX(-50%);z-index:2;pointer-events:none;white-space:nowrap;color:var(--reveal-color);text-shadow:0 2px 5px #000,0 0 25px color-mix(in srgb,var(--reveal-color) 45%,transparent)}
#reveal-badge:before,#reveal-badge:after{content:'◆';vertical-align:middle;margin:0 20px;}
#reveal-badge[data-level=natural]{}
#reveal-badge[data-level=legendary]{}
#reveal-effects[data-level=natural] .reveal-ring{display:none}
#reveal-effects[data-level=fine] .ring-two,#reveal-effects[data-level=rare] .ring-two{display:none}
#reveal-effects[data-level=legendary] .reveal-rays i{width:22px;left:-11px;height:440px}
#reveal-effects[data-level=exceptional] .reveal-rays i{height:390px}
.is-playing .reveal-aura{animation:jade-aura var(--reveal-duration) ease-out both}
.is-playing .reveal-ring{animation:jade-ring var(--reveal-duration) cubic-bezier(.16,.65,.25,1) both}
.is-playing .ring-two{animation-delay:180ms}
.is-playing .reveal-rays i{animation:jade-rays var(--reveal-duration) ease-out both}
.is-playing .reveal-motes i{animation:jade-mote calc(var(--reveal-duration) * .75) cubic-bezier(.15,.5,.3,1) var(--delay) both}
#reveal-badge.is-playing{animation:jade-title 750ms cubic-bezier(.16,.8,.25,1) both}
.is-settled .reveal-aura{opacity:.32}
.result-enter{animation:jade-appraisal 650ms cubic-bezier(.2,.8,.2,1) both}
@keyframes jade-aura{0%{opacity:0;transform:scale(.5)}25%{opacity:1;transform:scale(1.06)}100%{opacity:.32;transform:scale(1)}}
@keyframes jade-ring{0%{opacity:0;transform:scale(.25)}15%{opacity:.8}100%{opacity:0;transform:scale(1.75)}}
@keyframes jade-rays{0%{opacity:0;transform:rotate(var(--turn)) scaleY(.25)}22%{opacity:.55}100%{opacity:0;transform:rotate(calc(var(--turn) + 20deg)) scaleY(1.25)}}
@keyframes jade-mote{0%{opacity:0;transform:translate(0,0) scale(.2) rotate(0)}18%{opacity:.95}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.35) rotate(150deg)}}
@keyframes jade-title{0%{opacity:0;transform:translateX(-50%) translateY(15px) scale(1.25)}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes jade-appraisal{0%{opacity:0;transform:translateY(22px) scale(.95)}100%{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.is-playing .reveal-ring,.is-playing .reveal-rays,.is-playing .reveal-motes{display:none}.is-playing .reveal-aura{animation:none;opacity:.32}#reveal-badge.is-playing,.result-enter{animation:none}}

#angle-label{height:40px;margin-top:22px;flex-shrink:0;display:block;text-align:center;color:#91a38f;line-height:40px}
#random-line{position:absolute;right:16px;top:22px;z-index:6;width:72px;height:72px;display:grid;place-items:center;padding:18px;border:1px solid #61705a;border-radius:50%;background:#10251ac9;color:#a5b599;opacity:.78}
#random-line:before{content:'';position:absolute;inset:-22px;border-radius:50%}
#random-line svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#random-line:hover,#random-line:focus-visible{opacity:1;border-color:#c3bb83;color:#e5dfb8}

/* Compact, non-blocking guidance; all coordinates follow the 1080px design. */
#tutorial{position:absolute;top:80px;left:10px;right:10px;z-index:6;display:flex;gap:18px;align-items:center;padding:16px 20px;background:#071b16f2;border:1px solid #9b8d58;border-radius:14px;pointer-events:none}
#tutorial>div{flex:1;min-width:0}
#tutorial small{color:#d0b572;}
#tutorial strong{display:inline;margin-left:16px;}
#tutorial p{line-height:1.4;margin:8px 0 0;color:#d7dfc7}
#tutorial button{pointer-events:auto;flex-shrink:0;min-height:80px;padding:12px 16px;background:#163d2e;border:1px solid #8b8058;border-radius:10px}
.tutorial-target{outline:3px solid #98e0b7;outline-offset:7px}
#random-line.tutorial-target{opacity:1}
#quality-select{padding:16px;background:#102b20;color:var(--pale);border:1px solid #8b8058}#performance-info{line-height:1.6}html[data-quality="low"] .stone-card svg{filter:none}html[data-quality="low"] #reveal-effects{opacity:.7}

.stone-portrait{width:170px;height:145px;object-fit:contain;flex-shrink:0}

#language-switch{flex-shrink:0;min-width:76px;height:66px;padding:0 12px;border:1px solid #7f714b;background:#0a2118;border-radius:14px;}.header{gap:16px}html:root h1{}html:root .brand-en{}html:root .wallet{padding:12px 15px;gap:8px}html:root .wallet small{}html:root .level-block{min-width:270px;padding-left:20px}html:root .stone-card{gap:0}html:root .stone-info small{max-width:125px;line-height:1.15}html:root .primary,html:root .secondary{}html:root #tutorial strong{}html:root #tutorial p{}html:root #reveal-badge{}html:root #result-name{}html:root .catalog-item h3{}

#language-switch-modal{min-width:90px;border:1px solid #7f714b;background:#0a2118;border-radius:12px;padding:15px;margin-left:auto;margin-right:20px}

/* English readability pass: 40 design px is about 14 CSS px at 390px wide. */
html:root body{}
html:root small{}
html:root .header{gap:14px}
html:root h1{}
html:root .brand-en{}
html:root .wallet{padding:12px 16px;gap:10px}
html:root .wallet small{white-space:nowrap}
html:root .wallet strong{}
html:root .jade-coin{width:36px;height:36px;border-width:10px;flex-shrink:0}
html:root #language-switch{min-width:82px;height:76px}
html:root .icon-btn{width:76px;height:76px;flex-shrink:0;}
html:root .streak-label small,html:root .level-block small,html:root .level-block strong{}
html:root .level-block{min-width:365px;padding-left:20px}
html:root .streak-label strong{}
html:root .streak-label{gap:10px}
html:root .streak-dots{gap:5px}
html:root .scene-top{}
html:root .stone-portrait{width:130px;height:145px}
html:root .stone-info{gap:5px;min-width:0}
html:root .stone-info small{max-width:165px;line-height:1.12}
html:root .stone-info strong{}
html:root #angle-label{height:46px;line-height:46px}
html:root .bet-input label{}
html:root .bet-controls strong{}
html:root .catalog-btn{width:225px;}
html:root .history-btn{width:155px}
html:root .history-btn small{}
html:root .primary,html:root .secondary{}
html:root #tutorial{padding:20px 22px;gap:18px}
html:root #tutorial small{}
html:root #tutorial strong{margin-left:14px}
html:root #tutorial p{line-height:1.35;margin-top:12px}
html:root #tutorial button{min-height:94px}
html:root #window-preview{white-space:nowrap;max-width:95%}
html:root #reveal-badge{}
html:root #reveal-badge[data-level=legendary]{}
html:root .result-card>small{}
html:root #result-name{}
html:root .result-card p,html:root .result-card #next-level,html:root .result-amount span{line-height:1.3}
html:root .result-amount strong{}
html:root .actions p,html:root #renderer-error{}
html:root dialog{}
html:root .modal-head small{}
html:root .modal-head h2{line-height:1.15}
html:root .modal-head>div{min-width:0;flex:1}
html:root .modal-head button{flex-shrink:0}
html:root #language-switch-modal{min-width:100px}
html:root .modal-body{line-height:1.55}
html:root .modal-body button,html:root #quality-select{min-height:96px}
html:root #performance-info{line-height:1.5}
html:root .modal-body .note,html:root .catalog-item p,html:root .catalog-item small,html:root .record small{line-height:1.45}
html:root .catalog-item h3{line-height:1.15}
html:root .catalog-item strong{}
html:root .record{flex-wrap:wrap;gap:10px}
html:root .record>div{min-width:0;flex:1 1 650px}
html:root #language-switch-modal{width:116px;min-width:116px;padding:10px;white-space:nowrap}
#game[data-phase="result"] .scene-top{visibility:hidden}
/* Match supporting Chinese copy to the revised reading hierarchy. */











.bet-input{min-width:0}

/* Five larger streak slots, readable at mobile preview scale. */
.streak-dots{gap:13px;margin-left:12px;padding:5px 3px;flex-shrink:0}
.streak-dots i{width:24px;height:24px;border:2px solid #6e907b;background:#19372a;flex-shrink:0}
.streak-dots i.on{background:#69edba;border-color:#ccffe5;box-shadow:0 0 10px #53d9a755}
html:root .streak-dots{gap:13px}

/* One unobstructed line of guidance; pointer input reaches the stone below. */
#cut-prompt{position:absolute;z-index:7;top:112px;left:24px;right:24px;display:block;text-align:center;pointer-events:none}
#cut-prompt strong{display:inline-block;line-height:1.25;color:#fff0b8;text-shadow:0 2px 3px #020c08,0 0 8px #020c08,0 0 16px #020c08;-webkit-text-stroke:1px #29331e;paint-order:stroke fill;animation:cut-cue-breathe 2.4s ease-in-out infinite}
html:root #cut-prompt strong{}
@keyframes cut-cue-breathe{0%,100%{opacity:.78;transform:scale(.98)}50%{opacity:1;transform:scale(1.02)}}
@media(prefers-reduced-motion:reduce){#cut-prompt strong{animation:none;opacity:1;transform:none}}

/* Full 1080 × 1920 artwork includes the workbench. */

/* Tiered jade celebration. CC0 Kenney sprites; bounded pools, finite motion. */
#reveal-front{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;--reveal-color:#cadfcd;mask-image:linear-gradient(#000 0 64%,transparent 78%)}
#reveal-badge{z-index:3}
.reveal-stars,.reveal-streaks{position:absolute;left:50%;top:40%}
.reveal-stars i,.reveal-flare{position:absolute;background:var(--reveal-color);opacity:0;-webkit-mask:url('../assets/vfx/kenney/star_04.webp') center/contain no-repeat;mask:url('../assets/vfx/kenney/star_04.webp') center/contain no-repeat}
.reveal-stars i{left:var(--sx);top:var(--sy);width:var(--size);height:var(--size);margin:calc(var(--size) * -.5);transform:rotate(var(--spin))}
.reveal-flare{top:25%;left:4%;width:520px;height:230px;-webkit-mask-image:url('../assets/vfx/kenney/flare_01.webp');mask-image:url('../assets/vfx/kenney/flare_01.webp')}
.flare-right{left:auto;right:1%;top:47%;--delay:450ms}
.flare-left{--delay:100ms}
.reveal-streaks i{position:absolute;left:-2px;bottom:0;width:4px;height:115px;transform-origin:50% 100%;background:linear-gradient(transparent,var(--reveal-color),#fffbe5);opacity:0;border-radius:50%}
#reveal-effects .reveal-rays i{width:30px;left:-15px;height:520px;background:linear-gradient(transparent 0%,color-mix(in srgb,var(--reveal-color) 60%,transparent) 65%,transparent);clip-path:polygon(0 0,100% 0,55% 100%,45% 100%)}
#reveal-effects[data-level=exceptional] .reveal-rays i{width:44px;left:-22px;height:580px}
#reveal-effects[data-level=legendary] .reveal-rays i{width:58px;left:-29px;height:620px}
#reveal-front .reveal-ring{top:40%;width:660px;height:480px;margin:-240px -330px;border-width:2px;box-shadow:none}
#reveal-front .ring-two{width:770px;height:570px;margin:-285px -385px;border-width:1px}
#reveal-front[data-level=natural] .reveal-ring,#reveal-front[data-level=fine] .ring-two,#reveal-front[data-level=rare] .ring-two{display:none}
#reveal-front[data-level=natural] .reveal-flare,#reveal-front[data-level=fine] .reveal-flare{display:none}
#reveal-front .reveal-motes{top:40%}
#reveal-front .reveal-motes i{box-shadow:none;border-radius:50%}
.is-playing .reveal-stars i{animation:jade-star calc(var(--reveal-duration) - var(--delay)) ease-out var(--delay) both}
.is-playing .reveal-streaks i{animation:jade-streak calc(var(--reveal-duration) * .6) cubic-bezier(.12,.5,.3,1) var(--delay) both}
.is-playing .reveal-flare{animation:jade-flare calc(var(--reveal-duration) - var(--delay)) ease-out var(--delay) both}
#reveal-front.is-playing .ring-two{animation-duration:calc(var(--reveal-duration) - 180ms)}
#reveal-front.is-settled .reveal-stars i:nth-child(-n+6){opacity:.52;transform:scale(.65) rotate(var(--spin))}
#reveal-front[data-level=natural].is-settled .reveal-stars i,#reveal-front[data-level=fine].is-settled .reveal-stars i{opacity:.25}
#reveal-effects[data-level=exceptional].is-settled .reveal-aura,#reveal-effects[data-level=legendary].is-settled .reveal-aura{opacity:.6}
@keyframes jade-star{0%{opacity:0;transform:scale(.15) rotate(0)}15%{opacity:1;transform:scale(1.2) rotate(var(--spin))}40%{opacity:.5;transform:scale(.65) rotate(var(--spin))}62%{opacity:.95;transform:scale(1) rotate(var(--spin))}100%{opacity:0;transform:scale(.3) rotate(var(--spin))}}
@keyframes jade-streak{0%{opacity:0;transform:rotate(var(--turn)) translateY(-100px) scaleY(.3)}16%{opacity:.85}100%{opacity:0;transform:rotate(var(--turn)) translateY(calc(var(--reach) * -1.7)) scaleY(.6)}}
@keyframes jade-flare{0%{opacity:0;transform:scaleX(.3)}18%{opacity:.95;transform:scaleX(1.15)}48%{opacity:.3}100%{opacity:0;transform:scaleX(1.35)}}
html[data-quality=low] #reveal-front .reveal-stars i:nth-child(n+13),html[data-quality=low] #reveal-front .reveal-streaks i:nth-child(even),html[data-quality=low] #reveal-front .reveal-motes i:nth-child(even),html[data-quality=low] #reveal-effects .reveal-rays i:nth-child(even){display:none}
@media(prefers-reduced-motion:reduce){#reveal-front .reveal-ring,#reveal-front .reveal-motes,#reveal-front .reveal-streaks,#reveal-front .reveal-flare{display:none}#reveal-front .reveal-stars i{animation:none;opacity:0}#reveal-front .reveal-stars i:nth-child(-n+6){opacity:.5;transform:scale(.65)}#reveal-effects .reveal-aura{animation:none;opacity:.32}}
/* The shade reaches zero alpha before every host edge, avoiding a clipped rectangle. */
#reveal-effects:not([data-level=natural]):before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 50% 36% at 50% 36%,#03150fee 0%,#03150fcc 28%,#03150e66 62%,#03150e00 100%);opacity:0}
#reveal-effects.is-playing:before{animation:jade-reveal-shade var(--reveal-duration) ease-out both}
#reveal-effects.is-settled:before{opacity:.7}
@keyframes jade-reveal-shade{0%{opacity:0}12%,65%{opacity:1}100%{opacity:.7}}
@media(prefers-reduced-motion:reduce){#reveal-effects.is-playing:before{animation:none;opacity:.7}}

/* The game forms a stacking context; artwork stays below all UI and 3D. */
.workshop-background{position:absolute;inset:0;z-index:-1;pointer-events:none;background:center / 100% 100% no-repeat;opacity:0}

/* Readable UI over all four photographic workshop backgrounds.
   The scrim is above the background crossfade, below every UI/canvas layer. */
:root{--muted:#c3d1c7;--pale:#fff0c7;--ui-shadow:0 2px 4px #020b08,0 0 12px #020b08}
#game:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,#03110ee8 0%,#03110ed9 12%,#03110e85 21%,transparent 31%,transparent 57%,#03110e85 66%,#03110ee0 83%,#03110ef2 100%)}
.brand-en{color:#e5d8b3;text-shadow:var(--ui-shadow)}
h1{color:#fff0bf;text-shadow:var(--ui-shadow)}
.wallet,.bet-input{background:#0a2018;border-color:#8e8157}
.wallet small,.streak-label small,.level-block small,.bet-input label,.history-btn small{color:var(--muted)}
.level-block em{color:#abf5c8}
#stone-label{padding:8px 18px;border-radius:10px;background:#081b16ed;color:#ffe9af;text-shadow:0 2px 3px #020b08;}
#angle-label{align-self:center;max-width:100%;width:fit-content;padding:0 24px;border-radius:9px;background:#081b16ed;color:#dce8dc;text-shadow:0 1px 3px #020b08}
#status{padding:0 14px;margin-top:8px;border-radius:9px;background:#081b16f5;color:#f0e6c9}
#window-preview{background:#081b16f5;border-color:#9a9066;color:#fff0c7}
#random-line{background:#0a251d;color:#e0eddd;opacity:1;border-color:#a4976b}
.stone-card,.stone-card.selected{background:#0c231a}
.stone-card.selected{background:linear-gradient(130deg,#234432,#0d261c)}
.stone-info small{color:#d5e0cc}
.stone-info strong{color:#ffe6a9}
button:disabled{opacity:1;color:#aebeb4;border-color:#566c5d;background:#20332a;box-shadow:none;text-shadow:none}
.stone-card:disabled{background:#0c2119}
.stone-card.selected:disabled{background:#1a3527;border-color:#b9a873}
.stone-card:disabled .stone-portrait{opacity:.68}
.stone-card:disabled .stone-info small{color:#c1cfbe}
.bet-controls button:disabled{color:#a6baac;background:#1b3226}
#main-action:disabled{color:#d1dccb;background:#263c2e}
.result-card{background:linear-gradient(120deg,#0b291f,#061b13);border-color:#bda569}
.result-card p,.result-amount span,.result-card>small{color:#d1ddcb}
.result-card #next-level{color:#f2d791}
#reveal-badge{text-shadow:0 2px 4px #020b08,0 0 12px #020b08,0 0 22px #020b08}
#renderer-error{padding:18px;background:#10271df5;border-radius:12px;color:#ffe0a1}
dialog{background:#0b2018;color:#f5ebd2;border-color:#ab9362}
.modal-head{background:#102a20;border-bottom-color:#718061}
.modal-head small{color:#e1cea0}
.modal-body p,.catalog-item small,.record small{color:#cedbc8}
.catalog-item{background:#0a1d15;border-color:#637951}
.catalog-item h3{color:#fff0c7}
.catalog-item strong,.record strong{color:#f5d99a}
.modal-body .note{background:#163125;border-color:#7d8963;color:#e5edda}
.modal-body button,#quality-select{background:#214631;color:#f2ecd4;border-color:#9f925f}
.modal-body button:disabled{background:#20332a;color:#aebeb4;border-color:#566c5d}
#tutorial{background:#071b16fa}
#tutorial small{color:#f0d594}
#tutorial p{color:#e0ead6}
button:focus-visible,select:focus-visible{outline:4px solid #b9ffe2;outline-offset:5px}

/* Reserve the footer for transient errors; the cut cue is shown once above the stone. */
#angle-label{margin-top:14px}
.bet-panel{margin-top:16px}
.actions{margin-top:17px}

/* Market copy occupies one shared cue area, never a dialogue panel. */
#merchant-line{position:absolute;top:112px;left:24px;right:24px;z-index:3;display:flex;justify-content:center;align-items:center;gap:14px;pointer-events:none;color:#ffedbf;text-shadow:0 2px 5px #07120b,0 0 12px #07120b;line-height:1.3}
.merchant-seal{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:1px solid #d0ac63;border-radius:50%;background:#183829;text-shadow:none}
html:root #merchant-line{}
#game.is-delivering #merchant-line{color:#ffde91}
#game.is-delivering .merchant-seal{display:none}
.stone-card{transition:opacity .35s ease,border-color .18s,background .18s}
#game[data-phase=window] .stone-card:not(.selected),#game[data-phase=decision] .stone-card:not(.selected),#game[data-phase=cut] .stone-card:not(.selected){opacity:0;pointer-events:none}
.stone-info strong{}
/* Keep tutorial guidance to a single short sentence plus Skip. */
#tutorial #tutorial-step,#tutorial #tutorial-title{display:none}
#tutorial p{margin:0;line-height:1.3}
#tutorial{top:100px;padding:14px 18px;gap:12px}
#tutorial button{min-height:62px}

/* Shared location width accommodates English names in both languages. */
html:root .level-block{min-width:390px}
#merchant-copy{text-shadow:var(--ui-shadow);-webkit-text-stroke:1px #29331e;paint-order:stroke fill}

/* Both cut choices use the same primary-action type scale, including disabled state. */
.decision-actions button{line-height:1.2;}
html:root .decision-actions button{}