/* Jade-gold v1: presentation only. All text and interaction remain native DOM. */
:root{--ui-gold:url('../assets/ui/jade-gold-v1/buttons/primary-normal.svg');--ui-pressed:url('../assets/ui/jade-gold-v1/buttons/primary-pressed.svg');--ui-disabled:url('../assets/ui/jade-gold-v1/buttons/disabled.svg');--ui-jade:url('../assets/ui/jade-gold-v1/buttons/secondary-normal.svg');--ui-square:url('../assets/ui/jade-gold-v1/panels/icon-button.svg')}
#game .primary{background:var(--ui-gold) center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;color:#34230f;text-shadow:0 1px 0 #fff1c880;padding:12px 44px}
#game .primary:active:not(:disabled){background-image:var(--ui-pressed);transform:none}
#game .secondary,#modal #modal-body button,#tutorial button{background:var(--ui-jade) center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;color:#fff0cb;padding:16px 32px}
#game .secondary:active:not(:disabled),#modal #modal-body button:active:not(:disabled){filter:brightness(.85)}
#game .primary:disabled,#game .secondary:disabled,#modal #modal-body button:disabled{background:var(--ui-disabled) center/100% 100% no-repeat;color:#293d30;text-shadow:none;box-shadow:none;opacity:1}
#game #cut-add{background-image:url('../assets/ui/jade-gold-v1/controls/secondary-outline.svg');color:#fff0cb}
#game #cut-add:active:not(:disabled){background-image:var(--ui-jade)}
#game #cut-add:disabled{background-image:var(--ui-disabled);color:#293d30}
#game #settings,#game #language-switch,#game .bet-controls button,#game #catalog,#game #history,#game #random-line,#modal .modal-head button{background:var(--ui-square) center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;display:flex;align-items:center;justify-content:center;color:#f8e5b0}
.ui-icon{width:44px;height:44px;display:block;flex-shrink:0;pointer-events:none}
#game #settings .ui-icon{width:38px;height:38px}
#game #catalog,#game #history{gap:8px;padding:16px 8px}
#game #catalog .ui-icon,#game #history .ui-icon{width:46px;height:46px}
#game #random-line{padding:15px;opacity:1}
#game #random-line .ui-icon{width:100%;height:100%}
#game .bet-controls button:disabled{opacity:.5}
#game .bet-controls button:active:not(:disabled),#game #settings:active,#game #catalog:active,#game #history:active{filter:brightness(.8)}
#game .wallet{background:url('../assets/ui/jade-gold-v1/controls/wallet.svg') center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none}
#game .jade-coin{background:url('../assets/ui/jade-gold-v1/icons/jade-coin.svg') center/contain no-repeat;border:0;border-radius:0;box-shadow:none;width:50px;height:50px}
#game .upgrade{background:url('../assets/ui/jade-gold-v1/controls/tier-strip.svg') center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none}
#game .bet-input{background:url('../assets/ui/jade-gold-v1/controls/budget.svg') center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none}
#game .stone-card,#game .stone-card:disabled{background:url('../assets/ui/jade-gold-v1/controls/card-idle.svg') center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;padding:10px}
#game .stone-card.selected,#game .stone-card.selected:disabled{background-image:url('../assets/ui/jade-gold-v1/controls/card-selected.svg')}
#game .selected-tick{visibility:hidden} /* Selected frame already includes the diamond. */
#game .result-card{background:url('../assets/ui/jade-gold-v1/controls/result.svg') center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:0 14px 35px #0005;padding:30px 40px}
#modal{width:980px;height:1306px;max-height:1660px;border:0;border-radius:0;background:#071c14 url('../assets/ui/jade-gold-v1/panels/modal.svg') center/100% 100% no-repeat;overflow:hidden;padding:0;box-shadow:0 25px 90px #000a}
#modal[open]{display:flex;flex-direction:column}
#modal .modal-head{height:155px;min-height:155px;padding:24px 45px 18px;gap:16px;background:none;border:0;align-items:center}
#modal .modal-head small{display:none}
#modal-title{line-height:1.2;margin:0}
#modal .modal-head>div{flex:1;min-width:0}
#modal .modal-head button{width:68px;height:68px;min-width:68px;flex-shrink:0;padding:12px;margin:0;}
#modal .modal-head .ui-icon{width:38px;height:38px}
#modal #modal-body{min-height:0;flex:1;overflow-y:auto;margin:8px 32px 36px;padding:20px 22px 32px;scrollbar-color:#c5ad71 #102c20;scrollbar-width:thin}
#modal .catalog-item{background:url('../assets/ui/jade-gold-v1/controls/card-idle.svg') center/100% 100% no-repeat;border:0;border-radius:0}
#modal #modal-body #audio-toggle{padding-right:140px;position:relative}
#modal #audio-toggle:after{content:'';position:absolute;right:24px;top:50%;transform:translateY(-50%);width:92px;height:52px;background:url('../assets/ui/jade-gold-v1/controls/toggle-off.svg') center/contain no-repeat;pointer-events:none}
#modal #audio-toggle[aria-pressed=true]:after{background-image:url('../assets/ui/jade-gold-v1/controls/toggle-on.svg')}
#modal #reset-demo{background:none;color:#b8c5b4;text-decoration:underline;text-underline-offset:6px}
#modal #quality-select{background-color:#102d20;color:#fff0cb;border:1px solid #9d8d5b}
@media(prefers-reduced-motion:reduce){#game button,#modal button{transition:none}}

#game #catalog .ui-icon,#game #history .ui-icon{width:68px;height:58px}
#game #settings .ui-icon{width:48px;height:48px}
#game .bet-controls .ui-icon{width:48px;height:48px}

/* Settings: readable sections and a short, scannable play guide. */
#modal .settings-content{line-height:1.6;color:#e7efe5}
html:root #modal .settings-content{line-height:1.5}
#modal .settings-section{padding:32px 0;border-bottom:1px solid #617354}
#modal .settings-section:first-child{padding-top:0}
#modal .settings-section:last-child{border-bottom:0;padding-bottom:8px}
#modal .settings-content h3{margin:0 0 24px;line-height:1.25;color:#ffe3a0;}
#modal .settings-content h4{margin:0 0 12px;line-height:1.3;color:#ffe8b4}
#modal .settings-content p{margin:16px 0 0;color:#e0e9df;overflow-wrap:break-word}
#modal .settings-content #audio-toggle,#modal .settings-content #quality-select{width:100%;min-height:108px;text-align:left}
#modal .settings-content #quality-select{padding:16px 28px;border-radius:8px}
#modal .settings-content .play-intro{margin:0 0 30px;color:#b6f3d3}
#modal .play-steps{list-style:none;margin:0;padding:0}
#modal .play-steps li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;margin:30px 0}
#modal .play-step-number{line-height:64px;height:64px;text-align:center;color:#ffe5a4;border:1px solid #9c8750;border-radius:50%;background:#233b29}
#modal .play-steps p{margin:0}
#modal .settings-content .play-clue{margin:0 0 30px 84px;padding-left:20px;border-left:4px solid #87e4b4;color:#b6f3d3;}
#modal .play-callout{padding:28px;margin:30px 0;background:#122f23;border:1px solid #506747;border-radius:12px}
#modal .settings-content .play-emphasis{color:#ffe1a3;}
#modal .settings-content .play-formula{color:#b6f3d3;line-height:1.5}
#modal .bonus-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:26px 0}
#modal .bonus-steps>div{background:#082218;border:1px solid #527658;border-radius:8px;padding:18px 8px;text-align:center}
#modal .bonus-steps dt{line-height:1.35;color:#e5ebdf}
#modal .bonus-steps dd{margin:12px 0 0;line-height:1.2;color:#a6f4c9}
#modal .settings-content .play-fairness{padding-left:24px;border-left:3px solid #8c9a80;color:#d0dbcc}
#modal .settings-value{color:#ffe3a0;white-space:nowrap}
#modal #modal-body .settings-content #reset-demo{margin-top:28px;width:100%;text-decoration:none;background:#24382b;border:1px solid #9b916a;border-radius:8px;color:#ffebc4}
#modal #modal-body .settings-content #reset-demo:disabled{color:#bec9be;border-color:#607062;background:#25342b;cursor:not-allowed}
#modal .reset-actions{display:grid;gap:20px;margin-top:36px}
#modal #modal-body .reset-actions button{min-height:108px}
#modal #modal-body #cancel-reset{background:none;border:1px solid #889778;border-radius:8px;color:#e7efe5}

/* Preserve corner geometry: stretch only the center and straight edge sections. */
#game .primary,#game .secondary,#game #cut-add,#modal #modal-body button,#tutorial button{
  border:0 solid transparent;background:none;border-image:var(--ui-gold) 80 130 fill / 40px 65px / 0 stretch;
}
#game .primary:active:not(:disabled){background:none;border-image-source:var(--ui-pressed)}
#game .secondary,#modal #modal-body button,#tutorial button{border-image-source:var(--ui-jade)}
#modal #modal-body button,#tutorial button{border-image-width:28px 45.5px}
#game .primary:disabled,#game .secondary:disabled,#game #cut-add:disabled,#modal #modal-body button:disabled{background:none;border-image-source:var(--ui-disabled)}
#game #cut-add{background:none;border-image:url('../assets/ui/jade-gold-v1/frames/gold-slice.svg') 24 fill / 20px / 0 stretch}
#game #cut-add:active:not(:disabled){background:none;border-image-source:url('../assets/ui/jade-gold-v1/frames/selected-slice.svg')}
#game #cut-add:disabled{border-image:var(--ui-disabled) 80 130 fill / 40px 65px / 0 stretch}
#game #settings,#game #language-switch,#game .bet-controls button,#game #catalog,#game #history,#game #random-line,#modal .modal-head button{
  background:none;border:0 solid transparent;border-image:url('../assets/ui/jade-gold-v1/frames/gold-slice.svg') 24 fill / 16px / 0 stretch;
}
#game #catalog,#game #history{border-image-width:22px}
#game .wallet,#game .upgrade,#game .bet-input,#game .stone-card,#game .stone-card:disabled,#modal .catalog-item{
  background:none;border:0 solid transparent;border-image:url('../assets/ui/jade-gold-v1/frames/jade-slice.svg') 24 fill / 24px / 0 stretch;
}
#game .stone-card.selected,#game .stone-card.selected:disabled,#game .result-card{
  background:none;border:0 solid transparent;border-image:url('../assets/ui/jade-gold-v1/frames/selected-slice.svg') 24 fill / 24px / 0 stretch;
}
#game .selected-tick{visibility:visible;position:absolute;top:14px;right:14px;width:22px;height:22px;line-height:0;background:url('../assets/ui/jade-gold-v1/icons/diamond.svg') center/contain no-repeat;pointer-events:none}
#modal #modal-body #reset-demo{border-image:none;background:none}
#modal #modal-body #audio-toggle{padding-right:140px}

/* Compact settings controls, matching the jade panel reference. */
#modal.compact-settings .modal-head{position:relative;justify-content:center}
#modal.compact-settings .modal-head>div{text-align:center;padding:0 75px}
#modal.compact-settings #modal-title{}
html:root #modal.compact-settings #modal-title{}
#modal.compact-settings #language-switch-modal{display:none}
#modal.compact-settings #close-modal{position:absolute;right:45px;top:43px}
#modal.compact-settings .settings-section[data-setting=sound]{display:flex;align-items:center;justify-content:space-between;min-height:190px;padding:22px 16px 38px}
#modal.compact-settings .sound-row h3{margin:0}
#modal.compact-settings .settings-section[data-setting=quality]{padding:38px 16px 44px}
#modal.compact-settings .settings-section[data-setting=sound] h3,#modal.compact-settings .settings-section[data-setting=quality] h3{color:#f6efd9;}
#modal.compact-settings #modal-body #audio-toggle{width:180px;min-width:180px;height:104px;min-height:104px;padding:0;border:0;border-image:none;background:none;flex-shrink:0}
#modal.compact-settings #audio-toggle:after{inset:0;width:100%;height:100%;transform:none;background:url('../assets/ui/jade-gold-v1/controls/toggle-off.svg') center/contain no-repeat}
#modal.compact-settings #audio-toggle[aria-checked=true]:after{background-image:url('../assets/ui/jade-gold-v1/controls/toggle-on.svg')}
#modal .quality-segments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:2px solid #c1c9a9;border-radius:22px;background:#0b281f;overflow:hidden}
#modal .quality-segments label{position:relative;cursor:pointer;min-width:0;border-right:1px solid #617760}
#modal .quality-segments label:last-child{border-right:0}
#modal .quality-segments input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}
#modal .quality-segments span{display:flex;align-items:center;justify-content:center;min-height:116px;padding:14px 6px;color:#f7efda;border:3px solid transparent;border-radius:15px}
#modal .quality-segments input:checked+span{color:#082b20;border-color:#d6f5c8;background:linear-gradient(130deg,#a0d9b5,#528d6a);box-shadow:inset 0 0 22px #d5ffbb80}
#modal .quality-segments input:focus-visible+span{outline:5px solid #fff0b0;outline-offset:-8px}

/* Fixed header columns keep both locales stable while preserving title space. */
#game .header .wallet{flex:0 0 auto;width:var(--wallet-width,420px);min-width:0;height:100px;padding:12px 16px;gap:8px}
#game .header .wallet>div{display:flex;align-items:center;gap:20px;min-width:0}
#game .header .wallet small{margin:0;white-space:nowrap;flex-shrink:0}
#game .header .wallet strong{white-space:nowrap}
#game .header .jade-coin{flex-shrink:0}

/* English layout dimensions are shared; only the typeface follows the locale. */
#game .header{display:grid;grid-template-columns:minmax(0,1fr) var(--wallet-width,420px) 82px 76px;gap:14px}
#game .header .brand{width:100%;min-width:0;margin-right:0}
#game .header h1{white-space:nowrap}
#game #language-switch{white-space:nowrap;padding:0 6px}
#game .header .wallet>div{flex:1;justify-content:space-between;gap:8px}
#game .level-block{width:390px;flex-shrink:0}
#game .streak-label>div:not(.streak-dots){width:190px;flex-shrink:0;white-space:nowrap}
#game .streak-label>.diamond{width:36px;flex-shrink:0;text-align:center}
#game #catalog{width:225px;flex-shrink:0;white-space:nowrap}
#game #history{width:155px;flex-shrink:0;white-space:nowrap}
#game .stone-info{width:165px;flex-shrink:0;min-height:135px;justify-content:center}
#game .stone-info small{min-height:86.4px}
#game #angle-label{width:540px;text-align:center}
#game .actions button{display:flex;align-items:center;justify-content:center;height:133px;min-width:0;padding:0}