/* Reference composition: two layouts, one server board, no shared lobby header. */
body #fortune :is(.fortune-mobile-stage,.fortune-desktop-stage) { position:relative; isolation:isolate; overflow:hidden; }
.fortune-fx-layer { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:20; }
.fortune-reel-window { position:absolute; overflow:hidden; }
body #fortune .fortune-reel-tile { display:grid; place-items:center; container-type:size; border:0; background:none; }
body #fortune.fortune-showing-events .fortune-event-skip { display:none; }
body #fortune.fortune-showing-events:is([data-scene=BIG_WIN],[data-scene=SUPER_WIN],[data-scene=MEGA_WIN],[data-scene=MAX_WIN]):not(.fortune-bonus-active) .fortune-event-skip { display:block; }
.fortune-spark { position:absolute; width:5px; height:5px; border-radius:1px; box-shadow:0 0 8px 2px #fbdc91; }
.fortune-scene-card { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; gap:12px; text-align:center; width:max-content; max-width:86%; padding:22px 30px; border:2px solid #ffe09b; border-radius:18px; color:#ffefc4; background:radial-gradient(ellipse,#642778f2,#130b20fa 72%); box-shadow:0 0 0 4px #80602799,inset 0 0 35px #e9b95433,0 0 80px #b153de99; }
.fortune-scene-card strong { font:900 clamp(22px,3.5vw,60px)/1.12 var(--ui-font); color:#ffe6a5; text-shadow:0 2px #9a5a12,0 4px #663909,0 6px 8px #000; }
.fortune-scene-card span { font:600 clamp(12px,1.7vw,25px)/1.4 var(--ui-font); }
.fortune-flying-cartridge { position:absolute; display:grid; place-items:center; width:55px; height:82px; border-radius:28px 28px 8px 8px; border:2px solid #fff0b2; background:linear-gradient(90deg,#613212,#efb54c 23%,#fff2ab 44%,#cd8e25 68%,#5c2d08); color:#3b1b09; font:900 22px var(--ui-font); text-shadow:0 1px #fff7cd; box-shadow:inset 0 -9px #8e591b,0 0 25px #ffb849; }
body #fortune :is(.fortune-board,.fortune-desktop-board) { overflow:hidden; transition:box-shadow .4s,border-color .4s; }
.fortune-character-motion { display:block; height:100%; width:100%; max-width:100%; aspect-ratio:1; background:url('/assets/ui/fortune-character-poses-v1.png') 0 0/300% 200% no-repeat; transform-origin:50% 95%; animation:fortune-breathe 5s ease-in-out infinite; }
body #fortune :is(.fortune-joker-art,.fortune-desktop-joker) { display:flex; justify-content:center; align-items:flex-end; }
body #fortune :is(.fortune-joker-art,.fortune-desktop-joker) { container-type:size; }
body #fortune .fortune-character-motion { position:relative; left:auto; bottom:auto; width:min(94cqw,94cqh); height:min(94cqw,94cqh); flex-shrink:0; }
#fortune[data-joker-pose=prepare] .fortune-character-motion { background-position:50% 0; animation:fortune-anticipate .3s ease-out both; }
#fortune[data-joker-pose=throw] .fortune-character-motion { background-position:100% 0; animation:fortune-throw .55s ease-out both; }
#fortune[data-joker-pose=celebrate] .fortune-character-motion { background-position:0 100%; animation:fortune-celebrate .7s ease-in-out infinite alternate; }
#fortune[data-joker-pose=summon] .fortune-character-motion { background-position:50% 100%; animation:fortune-celebrate 1.2s ease-in-out infinite alternate; }
#fortune[data-joker-pose=bow] .fortune-character-motion { background-position:100% 100%; animation:fortune-bow .7s ease-out both; }
#fortune[data-scene=SPINNING] :is(.fortune-board,.fortune-desktop-board),#fortune[data-scene=MULTIPLIER_THROW] :is(.fortune-board,.fortune-desktop-board) { border-color:#ffe8b7; box-shadow:0 0 26px #e49eff99,inset 0 0 22px #b84fff44; }
#fortune.fortune-requesting .fortune-sprite { animation:fortune-waiting .35s linear infinite; }
#fortune.fortune-bonus-active :is(.fortune-mobile-stage,.fortune-desktop-stage) { background:radial-gradient(ellipse at 50% 40%,#6b248055,#28102ee6 65%),linear-gradient(#381449,#130919); }
#fortune.fortune-bonus-active :is(.fortune-board,.fortune-desktop-board) { border-color:#f8c8ff; box-shadow:0 0 26px #d070ed99,inset 0 0 20px #9f3ac955; }
body #fortune .fortune-event-skip { z-index:30; }
#fortune[data-quality=low] .fortune-character-motion { animation:none; }
@keyframes fortune-breathe { 0%,100%{transform:translateY(0) rotate(-.5deg) scale(1)}50%{transform:translateY(-2px) rotate(.5deg) scale(1.02)} }
@keyframes fortune-anticipate { from{transform:rotate(0)}to{transform:rotate(-6deg) translateX(-3%)} }
@keyframes fortune-throw { 0%{transform:rotate(-6deg) translateX(-3%)}35%{transform:rotate(6deg) translateX(8%)}100%{transform:rotate(0) translateX(0)} }
@keyframes fortune-celebrate { from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-4px) rotate(1deg) scale(1.025)} }
@keyframes fortune-bow { from{transform:rotate(-4deg)}to{transform:rotate(3deg) translateY(3%)} }
@keyframes fortune-waiting { from{transform:translateY(-30%);filter:blur(2px)}to{transform:translateY(30%);filter:blur(3px)} }
@media(prefers-reduced-motion:reduce){#fortune .fortune-character-motion,#fortune .fortune-sprite{animation:none!important;}}
#fortuneInfoDialog.fortune-settings-dialog { width:min(980px,calc(100vw - 24px)); border:2px solid #eed391; box-shadow:0 0 0 3px #795522,inset 0 0 35px #66287966,0 16px 60px #000; padding:18px; }
#fortuneInfoDialog.fortune-settings-dialog h2 { font-size:clamp(20px,3vw,32px); color:#ffe5a5; text-transform:uppercase; text-shadow:0 2px #895312,0 4px 6px #000; }
.fortune-setting-row { display:grid; grid-template-columns:48px minmax(0,1fr) minmax(0,1fr); gap:14px; align-items:center; min-height:72px; border-bottom:1px solid #b38c4544; }
.fortune-setting-icon { color:#eec974; font-size:32px; text-align:center; }
#fortuneInfoDialog .fortune-setting-toggle { justify-content:space-between; font-weight:650; }
.fortune-setting-toggle input { appearance:none; width:48px; height:28px; flex-shrink:0; border:1px solid #a977b9; border-radius:20px; background:#261a32; position:relative; cursor:pointer; }
#fortuneInfoDialog .fortune-setting-toggle input { min-height:28px; max-height:28px; margin:0; padding:0; }
#fortuneInfoDialog .fortune-setting-volume input { height:24px; min-height:24px; margin:0; padding:0; }
.fortune-setting-toggle input::after { content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#ebdfee; box-shadow:0 1px 3px #000; transition:transform .15s; }
.fortune-setting-toggle input:checked { background:linear-gradient(#a53fbb,#5c1a77); }
.fortune-setting-toggle input:checked::after { transform:translateX(20px); }
#fortuneInfoDialog .fortune-setting-volume { display:grid; gap:0; }
.fortune-setting-volume span { display:flex; justify-content:space-between; }
.fortune-setting-volume input { width:100%; accent-color:#b952da; min-height:28px; }
.fortune-quality { border:0; padding:0; display:flex; gap:4px; margin:0; }
#fortuneInfoDialog .fortune-quality label { margin:0; flex:1; position:relative; }
.fortune-quality input { position:absolute; opacity:0; }
.fortune-quality span { display:block; padding:10px 5px; border:1px solid #71582e; border-radius:6px; width:100%; text-align:center; }
.fortune-quality input:checked+span { border-color:#f3d06f; background:linear-gradient(#70218c,#32143f); color:#fff0bd; }
.fortune-quality input:focus-visible+span { outline:2px solid #fff; }
#fortunePresentationForm footer { display:flex; justify-content:space-between; gap:16px; margin-top:14px; }
#fortunePresentationForm footer button { flex:1; }
#fortunePresentationForm footer button[type=submit] { background:linear-gradient(#30641c,#12350c); }
#fortuneSettingsError:empty { display:none; }
@media(orientation:landscape) and (max-height:600px){
 #fortuneInfoDialog.fortune-settings-dialog { padding:8px 14px; font-size:12px; }
 .fortune-setting-row { grid-template-columns:30px minmax(0,1fr) minmax(0,1fr); min-height:38px; gap:10px; }
 #fortuneInfoDialog .fortune-setting-toggle,#fortuneInfoDialog .fortune-setting-volume { margin:3px 0; }
 .fortune-setting-icon { font-size:25px; }.fortune-setting-row p{margin:0;}
 #fortuneInfoDialog .fortune-setting-volume span { line-height:12px; }
 #fortuneInfoDialog .fortune-setting-volume input { height:20px; min-height:20px; }
 .fortune-quality span { padding:6px 2px; }
 #fortunePresentationForm footer { margin-top:6px; gap:10px; }
 #fortuneInfoDialog.fortune-settings-dialog button { min-height:36px; padding:4px 10px; }
 .fortune-scene-card { padding:14px 18px; gap:8px; }
}
#fortuneBet[role=button],#fortuneDesktopBet[role=button] { cursor:pointer; }
#fortuneBet[role=button]:focus-visible,#fortuneDesktopBet[role=button]:focus-visible { outline:2px solid #ffdf8c; outline-offset:2px; border-radius:5px; }
#fortuneBetForm { display:grid; gap:12px; }
#fortuneBetInput { width:100%; min-width:0; padding:10px; font-size:20px; }
body #fortune :is(.fortune-joker-art,.fortune-desktop-joker) { border:0; background:none; }
body #fortune :is(.fortune-joker-art,.fortune-desktop-joker)::after { content:none; }
body #fortune :is(.fortune-joker-art,.fortune-desktop-joker) img { display:block; width:100%; height:100%; min-height:0; object-fit:contain; object-position:center bottom; max-height:100%; }
body #fortune :is(.fortune-joker-art,.fortune-desktop-joker) { display:block; padding:0; }
body #fortune :is(.fortune-service-nav,.fortune-desktop-services) button > span { line-height:1.4; }
body #fortune .fortune-desktop-menu { padding:0; font-size:26px!important; }
body #fortune :is(.fortune-desktop-metric strong,.fortune-desktop-bonus em) { line-height:1.25; }
body #fortune .fortune-desktop-bet > div button { padding:0; height:48px; line-height:1.4; }
body #fortune :is(.fortune-symbol,.fortune-desktop-symbol) { position:relative; container-type:size; background:radial-gradient(ellipse,#281430,#08050d 75%); border:1px solid #785432; border-radius:5px; }
.fortune-sprite { display:block; width:min(92cqw,92cqh); height:min(92cqw,92cqh); background:url('/assets/ui/fortune-symbols-v1.png') no-repeat; background-size:400% 300%; background-position:0 0; }
.fortune-sprite[data-symbol=diamonds] { background-position:33.3333% 0; }
.fortune-sprite[data-symbol=hearts] { background-position:66.6667% 0; }
.fortune-sprite[data-symbol=spades] { background-position:100% 0; }
.fortune-sprite[data-symbol=ace] { background-position:0 50%; }
.fortune-sprite[data-symbol=queen] { background-position:33.3333% 50%; }
.fortune-sprite[data-symbol=king] { background-position:66.6667% 50%; }
.fortune-sprite[data-symbol=crown] { background-position:100% 50%; }
.fortune-sprite[data-symbol=joker_mask] { background-position:0 100%; }
.fortune-sprite[data-symbol=scatter_joker] { background-position:33.3333% 100%; }
body #fortune :is(.fortune-board-wrap,.fortune-desktop-board-wrap) { position:relative; }
body #fortune .fortune-event-skip { display:none; position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:5; padding:8px 16px; min-height:36px; font:600 12px var(--ui-font); background:#160c20; }
body #fortune.fortune-showing-events .fortune-event-skip { display:none; }
body #fortune button:focus-visible { outline:2px solid #ffdc82; outline-offset:-3px; }
body #fortune button.polished-button::after { content:none!important; }
body #fortune :is(.fortune-topbar,.fortune-desktop-topbar) { grid-template-columns:44px minmax(90px,1fr) auto; }
/* The owner reserved logo/header chrome for lobby; keep only game-local controls. */
body #fortune :is(.fortune-brand,.fortune-desktop-brand) { display:none; }
body #fortune :is(.fortune-service-nav,.fortune-desktop-services) { grid-template-columns:repeat(4,minmax(44px,1fr)); }
body #fortune :is(.fortune-topbar,.fortune-desktop-topbar) button { min-height:44px; }
body #fortune :is(.fortune-wallet,.fortune-desktop-wallet) { width:max-content; min-width:130px; border:0; background:none; }
#fortuneInfoDialog { width:min(660px,calc(100vw - 20px)); max-height:calc(100dvh - 20px); padding:16px; overflow:auto; color:#f3deb0; border:1px solid #bb9144; border-radius:14px; background:linear-gradient(145deg,#271332,#0b0810); font:15px/1.5 var(--ui-font); }
#fortuneInfoDialog::backdrop { background:#000b; }
#fortuneInfoDialog header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#fortuneInfoDialog h2 { margin:0; font-size:19px; }
#fortuneInfoDialog button { min-height:44px; padding:8px 16px; color:#f1d18b; background:#352242; border:1px solid #96703c; border-radius:8px; }
#fortuneInfoDialog label { display:flex; align-items:center; gap:10px; margin:10px 0; }
#fortuneInfoDialog table { width:100%; border-collapse:collapse; text-align:center; }
#fortuneInfoDialog :is(td,th) { padding:6px; border-bottom:1px solid #92703c55; }
@media (orientation:landscape) and (max-height:600px) {
 body #fortune .fortune-mobile-bonus-panel { grid-template-rows:minmax(60px,1fr) auto auto 36px; gap:4px; }
 body #fortune .fortune-mobile-bonus-panel :is(.fortune-bonus-spins,.fortune-bonus-total) { padding:3px; }
 body #fortune .fortune-mobile-bonus-panel small { font:600 9px/1.2 var(--ui-font); }
 body #fortune .fortune-mobile-bonus-panel .fortune-bonus-spins strong { font-size:40px; line-height:1; }
 body #fortune .fortune-mobile-bonus-panel .fortune-bonus-total strong { font-size:23px; line-height:1.1; }
 body #fortune .fortune-mobile-bonus-panel .fortune-skip-animation { font-size:10px!important; }
 body #fortune .fortune-mobile-stage { grid-template-rows:44px minmax(0,1fr) 36px; gap:4px; padding:4px; }
 body #fortune .fortune-wallet { padding:2px 5px; }
 body #fortune .fortune-main-layout { grid-template-columns:minmax(100px,20%) minmax(0,1fr) minmax(125px,22%); gap:5px; }
 body #fortune .fortune-left-panel { grid-template-rows:minmax(0,1fr) auto auto auto; }
 body #fortune .fortune-right-panel { grid-template-rows:minmax(0,1fr) auto 48px 32px; gap:4px; }
 body #fortune .fortune-bet { padding:3px; }
 body #fortune .fortune-bet > div { grid-template-columns:36px minmax(0,1fr) 36px; }
 body #fortune .fortune-bet button { min-height:36px; height:36px; }
 body #fortune .fortune-service-nav button > small { font-size:8px; }
 body #fortune .fortune-service-nav button { padding:2px; }
 body #fortune .fortune-service-nav button > span { font-size:16px; }
 body #fortune .fortune-footer button { min-height:36px; font-size:9px; }
 body #fortune .fortune-bonus-buy { padding:2px; gap:1px; }
 body #fortune .fortune-bonus-buy b { font-size:9px; padding:0 8px; }
 body #fortune .fortune-bonus-buy strong { font-size:10px; }
 body #fortune .fortune-bonus-buy span { font-size:14px; }
 body #fortune .fortune-bonus-buy small { font-size:9px; }
 body #fortune .fortune-bet > small { font-size:8px; }
 body #fortune .fortune-auto { font-size:11px!important; }
 body #fortune .fortune-play small { font-size:9px; }
 body #fortune .fortune-play { padding:2px; }
 body #fortune .fortune-play strong { font-size:20px; line-height:1.25; }
}
/* Owner review: retain the approved layout, brighten metal and raise type hierarchy. */
body #fortune :is(.fortune-mobile-stage,.fortune-desktop-stage) {
 background:radial-gradient(ellipse at 50% 15%,#51235766,transparent 58%),radial-gradient(ellipse at 3% 55%,#b5792533,transparent 38%),linear-gradient(135deg,#140b18,#201026 50%,#0b070f);
}
body #fortune :is(.fortune-metric,.fortune-multiplier-list,.fortune-bet,.fortune-desktop-metric,.fortune-desktop-multipliers,.fortune-desktop-bet) {
 border-color:transparent;
 background:linear-gradient(145deg,#35203e,#140d1d) padding-box,linear-gradient(135deg,#fff0b0,#d6a449 28%,#79501e 55%,#ecca77 80%,#fff0b0) border-box;
 box-shadow:inset 0 1px 0 #fff0bb38,inset 0 -2px 3px #03010588,0 2px 4px #0008;
}
body #fortune :is(.fortune-mobile-stage,.fortune-desktop-stage) button {
 border-color:#e5bf6e;
 background:linear-gradient(165deg,#664825 0%,#352236 18%,#1e122b 75%,#382a26);
 color:#ffedb4;
 box-shadow:inset 0 1px 0 #fff5c577,inset 0 0 0 2px #b77b2433,inset 0 -3px 4px #0009,0 2px 4px #0008;
}
body #fortune :is(.fortune-board,.fortune-desktop-board) {
 border-style:solid; border-color:transparent;
 background:linear-gradient(135deg,#24102d,#110918) padding-box,linear-gradient(135deg,#fff1b1,#e2b756 18%,#87571e 43%,#f5d987 65%,#b07c2a 86%,#ffedaa) border-box;
 box-shadow:inset 0 0 0 1px #fff0bb99,inset 0 0 10px #050207,0 0 0 1px #714615,0 3px 12px #0009,0 0 20px #c5902926;
}
body #fortune :is(.fortune-symbol,.fortune-desktop-symbol) {
 border-color:#c39b57; background:radial-gradient(ellipse at 50% 15%,#4b2a52,#1a1024 78%);
 box-shadow:inset 0 1px 1px #fff0aa33,inset 0 -2px 3px #0008;
}
body #fortune :is(.fortune-play,.fortune-desktop-play) {
 border-color:#ffe298!important;
 background:linear-gradient(175deg,#72ac50 0%,#23753d 16%,#10502c 65%,#063a20 100%)!important;
 box-shadow:inset 0 2px 0 #efffc377,inset 0 0 0 2px #e6c87555,inset 0 -4px 6px #001e17,0 3px 7px #0009;
}
body #fortune :is(.fortune-bonus-buy,.fortune-desktop-bonus) {
 background:radial-gradient(ellipse at 50% 20%,#78428555,transparent 75%),linear-gradient(160deg,#432441,#211329 70%,#3d2b28);
}
body #fortune :is(.fortune-play strong,.fortune-desktop-play strong,.fortune-metric strong,.fortune-desktop-metric strong,.fortune-bonus-buy span,.fortune-desktop-bonus em) {
 color:#ffe9a0; font-weight:900; letter-spacing:.025em;
 text-shadow:0 -1px 0 #fff9d7,0 1px 0 #a66720,0 2px 0 #633213,0 3px 2px #090508,0 0 9px #e8b85433;
}
body #fortune :is(.fortune-bonus-buy b,.fortune-desktop-bonus b) {
 background:linear-gradient(#aa64b8,#562566 55%,#391744); border-color:#ffdf8c;
 box-shadow:inset 0 1px 0 #ffdeee66,0 2px 3px #0007; text-shadow:0 1px 1px #25072c;
}
body #fortune :is(.fortune-multiplier-list span,.fortune-desktop-multipliers span) {
 color:#ffedb4; background:linear-gradient(#6c4a29,#3d281f); box-shadow:inset 0 1px 0 #eacb7844;
}
body #fortune :is(.fortune-service-nav small,.fortune-desktop-services small,.fortune-metric small,.fortune-multiplier-list > small,.fortune-bet > small,.fortune-desktop-metric small,.fortune-desktop-multipliers > small,.fortune-desktop-bet > small) {
 color:#f4dfb2; font-family:var(--ui-font); font-weight:600; text-transform:none; line-height:1.3;
}
body #fortune :is(.fortune-footer,.fortune-desktop-footer) button { text-shadow:0 1px 1px #000; }
@media (min-width:1000px) and (min-height:601px) {
 body #fortune :is(.fortune-desktop-services small,.fortune-desktop-metric small,.fortune-desktop-multipliers > small,.fortune-desktop-bet > small,.fortune-desktop-wallet small,.fortune-desktop-bet > span,.fortune-desktop-metric > span,.fortune-desktop-play small,.fortune-desktop-bonus small) { font-size:clamp(12px,1vw,16px); line-height:1.3; }
 body #fortune .fortune-desktop-bonus strong { font-size:clamp(18px,1.5vw,25px); }
 body #fortune .fortune-desktop-multipliers span { font-size:clamp(12px,1vw,16px); }
 body #fortune .fortune-desktop-bet nav button { font-size:13px; }
 body #fortune .fortune-desktop-footer button { font-size:clamp(15px,1.2vw,20px); }
 body #fortune .fortune-desktop-footer span { font-size:clamp(12px,1vw,16px); }
}
@media (orientation:landscape) and (max-height:600px) {
 body #fortune :is(.fortune-metric small,.fortune-multiplier-list > small,.fortune-bet > small,.fortune-wallet small,.fortune-bet > span,.fortune-metric > span) { font-size:9px; line-height:1.25; }
 body #fortune .fortune-service-nav button > small { font-size:9px; }
 body #fortune .fortune-metric { padding:2px; }
 body #fortune .fortune-metric strong { font-size:22px; line-height:1.2; }
 body #fortune .fortune-multiplier-list { padding:2px; }
 body #fortune .fortune-multiplier-list span { font-size:9px; padding:1px 0; }
 body #fortune .fortune-bonus-buy b { font-size:11px; }
 body #fortune .fortune-bonus-buy strong { font-size:11px; }
 body #fortune .fortune-bonus-buy span { font-size:18px; line-height:1.2; }
 body #fortune .fortune-bonus-buy small { font:600 10px/1.25 var(--ui-font); color:#f4dfb2; }
 body #fortune .fortune-play strong { font-size:24px; }
 body #fortune .fortune-play small { font-size:10px; }
 body #fortune .fortune-auto { font-size:13px!important; }
 body #fortune .fortune-footer button { font-size:11px; line-height:1.2; padding:2px; }
 body #fortune .fortune-footer span { font-size:9px; line-height:1.25; }
 body #fortune .fortune-footer b { font-size:13px; }
 body #fortune .fortune-availability { font-size:8px; }
}
@media (orientation:landscape) and (max-width:620px) {
 body #fortune .fortune-bonus-buy { padding:0; gap:0; }
 body #fortune .fortune-bonus-buy b { font-size:10px; line-height:1.2; }
 body #fortune .fortune-bonus-buy strong { font-size:10px; line-height:1.2; }
 body #fortune .fortune-bonus-buy span { font-size:16px; }
}