.symbols-game{max-width:1080px;margin:auto;padding:12px}.symbols-setup,.symbols-result{max-width:680px;margin:auto;text-align:center;display:grid;gap:14px}.symbols-setup p,.symbols-hint{color:#c3bad2;line-height:1.45}.symbols-setup label{display:flex;justify-content:center;align-items:center;gap:14px}.symbols-emblem{font-size:38px;color:#e2ff88;letter-spacing:8px}.symbols-modes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.symbols-modes button{font-size:15px;padding:14px}.symbols-top{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:12px}.symbols-top h1{font-size:24px;margin:0 auto 0 0}.symbols-top span{color:#c3bad2;font-size:14px}.symbols-top b{color:#fff;font-size:18px}.symbols-clock{padding:8px 14px;border:1px solid #665680;background:#2a203a;border-radius:12px;color:#e2ff88;font-size:22px;font-variant-numeric:tabular-nums}.symbols-clock.urgent{color:#ff7899;border-color:#ff7899}.symbols-play{display:grid;grid-template-columns:1fr 1fr;gap:20px}.symbols-hand{align-self:center;min-width:0}.symbols-turn{text-align:center;font-weight:700;color:#e2ff88}.symbols-cards{display:flex;gap:8px;perspective:600px}.symbol-card{min-width:0;flex:1;aspect-ratio:.64;padding:10px 3px;border:2px solid #62537e;border-radius:15px;background:linear-gradient(150deg,#352444,#191321);color:var(--symbol-color);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:0 6px 16px #0005}.symbol-card:disabled{opacity:1}.symbol-card>span{font-family:Georgia,serif;font-size:clamp(44px,7vw,90px);line-height:1;text-shadow:0 0 15px color-mix(in srgb,var(--symbol-color),transparent 65%)}.symbol-card small{font-size:10px;color:#eee;max-width:100%;overflow:hidden;text-overflow:ellipsis}.symbol-card.held{border-color:#e2ff88;background:linear-gradient(150deg,#414b27,#191f15);transform:translateY(-5px)}.symbols-roll{width:100%;margin-top:16px}.symbols-roll small{margin-left:10px;font-variant-numeric:tabular-nums}.symbols-hint{font-size:12px;text-align:center}.symbols-tasks h2{font-size:18px;display:flex;justify-content:space-between;margin:0 0 10px}.symbols-tasks h2 small{color:#b7abc9;font-size:13px}.symbols-task-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.symbol-task{display:flex;align-items:center;gap:7px;min-height:54px;padding:7px 9px;text-align:left;border:1px solid #594569;border-radius:12px;background:#291e36;color:#f6f2ff;min-width:0}.symbol-task:disabled{opacity:.58}.symbol-task.done{opacity:1;background:#233b2e;border-color:#527e57}.symbol-task.crossed{background:#382330;border-color:#714050}.symbol-task-icon{font-family:Georgia,serif;font-size:24px;min-width:25px}.symbol-task:nth-child(n+6) .symbol-task-icon{font:700 11px Arial}.symbol-task>span:nth-child(2){font-size:12px;flex:1}.symbol-task small{display:block;font-size:10px;color:#b7abc9}.symbol-task b{font-size:15px;color:#e2ff88;white-space:nowrap}.symbol-task.crossed b{color:#ff90b2}.symbols-scoreboard{display:grid;gap:8px}.symbols-scoreboard>div{display:flex;justify-content:space-between;padding:14px;background:#292034;border-radius:12px}.symbols-scoreboard b{color:#e2ff88}.symbols-history{overflow:auto}.symbols-history table{width:100%;border-collapse:collapse}.symbols-history td,.symbols-history th{padding:10px;border-bottom:1px solid #493952}.symbols-game .game-bottom{display:flex;justify-content:center;gap:8px;margin-top:20px}.symbols-cover{background:radial-gradient(ellipse at 50% 70%,#6b3584,#181020 75%);display:flex!important;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;padding:18%;box-sizing:border-box}.spinning{animation:symbol-spin var(--spin-duration,2s) cubic-bezier(.1,.65,.18,1) var(--spin-offset,0ms) both;box-shadow:0 0 22px #b780ff66}@keyframes symbol-spin{from{transform:rotateY(-2160deg)}to{transform:rotateY(0)}}
@media(max-width:620px) and (orientation:portrait){.symbols-play{grid-template-columns:1fr;gap:14px}.symbols-top{gap:10px}.symbols-top h1{width:100%;font-size:22px}.symbol-card{aspect-ratio:.9}.symbol-card>span{font-size:clamp(46px,13vw,64px)}.symbols-hint{margin:8px 0}.symbols-tasks h2{margin-bottom:6px}}
@media(orientation:landscape) and (max-height:650px){body:has(.symbols-active){overflow:hidden;height:100dvh}.shell:has(.symbols-active){height:100dvh;max-width:none;padding:0;margin:0;display:block}.shell:has(.symbols-active)>header,.shell:has(.symbols-active)>nav,.shell:has(.symbols-active) .profile-menu,.shell:has(.symbols-active) .profile-status,.shell:has(.symbols-active) .profile-header,.shell:has(.symbols-active) .presence-badge{display:none!important}main:has(.symbols-active){height:100dvh;min-height:0!important;overflow:hidden;padding:0!important;border:none!important}.symbols-active{box-sizing:border-box;height:100dvh;padding:8px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));display:flex;flex-direction:column}.symbols-active .game-bottom,.symbols-active #online-notice{display:none!important}.symbols-top{flex:none;margin-bottom:5px;gap:15px}.symbols-top h1{font-size:17px}.symbols-top span{font-size:12px}.symbols-top b{font-size:14px}.symbols-clock{font-size:17px;padding:4px 10px}.symbols-play{flex:1;min-height:0;grid-template-columns:minmax(0,42fr) minmax(0,58fr);gap:12px}.symbols-hand{align-self:center}.symbols-turn{margin:0 0 10px;font-size:13px}.symbol-card{aspect-ratio:.75;max-height:36dvh;border-radius:9px}.symbol-card>span{font-size:clamp(40px,11dvh,72px)}.symbol-card small{font-size:9px}.symbols-roll{margin-top:10px;padding:10px;font-size:16px}.symbols-hint{font-size:10px;margin:7px 0}.symbols-tasks{min-height:0;display:flex;flex-direction:column}.symbols-tasks h2{font-size:13px;margin:0 0 4px}.symbols-task-grid{flex:1;min-height:0;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:4px;padding-right:12px}.symbol-task{min-height:0;padding:4px;gap:4px;border-radius:8px}.symbol-task-icon{font-size:20px;min-width:18px}.symbol-task>span:nth-child(2){font-size:10px}.symbol-task b{font-size:12px}.symbol-task small{font-size:9px}}
@media(prefers-reduced-motion:reduce){.spinning{animation:none}}

.symbol-task.eligible{opacity:1;border:2px solid #e2ff88;background:linear-gradient(135deg,#3b4b28,#263422);box-shadow:0 0 14px #dfff8840,inset 0 0 12px #dfff8810}.symbol-task.eligible>span:nth-child(2){color:#fff;font-weight:700}.symbol-task.eligible .symbol-task-icon{filter:drop-shadow(0 0 7px currentColor)}.symbol-task.eligible b{font-weight:900}.symbol-task.eligible:disabled{opacity:.65}.symbols-pass{width:100%;margin-top:8px;padding:10px;font-size:13px}.symbol-card>span{font-weight:700;filter:drop-shadow(0 2px 2px #0008)}

.sy-icon{display:inline-block;width:100%;aspect-ratio:.94;flex:none;background-image:url('/symbols-icons.webp');background-repeat:no-repeat;background-size:500% auto;background-position:var(--sy-x,0%) center}
.symbol-card .symbol-face{display:flex;width:94%;aspect-ratio:1;align-items:center;justify-content:center;filter:none;font-size:44px}.symbol-face .sy-icon{filter:drop-shadow(0 3px 5px #0007)}
.symbols-emblem-icons{display:flex;justify-content:center;gap:6px;letter-spacing:0}.symbols-emblem-icons .sy-icon{width:52px}
.symbol-task{display:grid;grid-template-columns:1fr auto;gap:3px 5px;padding:8px;min-height:78px}.symbol-task-pattern{grid-column:1 / -1;display:flex;justify-content:center;gap:1px;min-width:0}.symbol-task-pattern .sy-icon{width:clamp(18px,4.9vw,29px)}.symbol-task>span:nth-child(2){font-size:12px;min-width:0}.symbol-task small{display:none}.symbol-task.eligible .sy-icon{filter:drop-shadow(0 0 4px #e2ff8877)}
.hub-gallery .symbols-cover{padding:4%!important;position:relative;flex-wrap:nowrap;gap:0;background:radial-gradient(ellipse at 50% 60%,#653384 0,#251331 48%,#14101d 95%)}.symbols-cover i.sy-icon{width:20%;font-size:0;border:none;border-radius:0;background-color:transparent;padding:0;flex:none;box-shadow:none;filter:drop-shadow(0 7px 8px #0008);transform:none!important;margin:0!important}
@media(orientation:landscape) and (max-height:650px){.symbol-task{min-height:0;padding:3px 5px;gap:0 3px}.symbol-task-pattern .sy-icon{width:clamp(17px,7dvh,27px)}.symbol-task>span:nth-child(2){font-size:10px}.symbol-task b{font-size:11px}.symbol-card .symbol-face{width:96%}.symbols-hint{font-size:9px}.symbols-pass{padding:5px;margin-top:4px}}

.symbol-task-pattern .sy-wildcard{display:inline-flex;align-items:center;justify-content:center;width:26px;height:28px;box-sizing:border-box;border:1px solid #bb97e3;border-radius:7px;background:linear-gradient(145deg,#7d47a4,#412159);color:#fff;font:900 22px Georgia,serif;box-shadow:0 2px 4px #0005}.symbol-task-pattern:has(.sy-wildcard){gap:4px}.symbol-task.eligible .sy-wildcard{border-color:#e2ff88;box-shadow:0 0 6px #dfff8844}@media(orientation:landscape) and (max-height:650px){.symbol-task-pattern .sy-wildcard{width:clamp(17px,7dvh,27px);height:clamp(19px,7.5dvh,29px);font-size:18px}}

.symbol-task-pattern .sy-wildcard-second{background:linear-gradient(145deg,#276a73,#16414c);border-color:#85dfe7}

.symbol-multiplier{display:inline-block;margin-right:4px;padding:2px 4px;border-radius:5px;background:#e2ff88;color:#233318;font:800 11px Arial,sans-serif;vertical-align:middle}@media(orientation:landscape) and (max-height:650px){.symbol-multiplier{font-size:9px;margin-right:2px;padding:1px 3px}}

.symbol-card .symbol-face{position:relative;overflow:hidden;display:block}.sy-reel-track{position:absolute;left:0;display:block;width:100%;will-change:transform}.sy-reel-cell{display:flex;align-items:center;justify-content:center;width:100%;height:var(--reel-size);flex:none}.sy-reel-cell .sy-icon{width:94%}.symbol-card.reeling{border-color:#b780ff;box-shadow:0 0 22px #b780ff66}.symbol-card.reeling .symbol-face:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,#1d142766,transparent 18%,transparent 82%,#1d142766)}

/* Machine-style spin control; fixed size preserves the board during animation. */
.symbols-roll{display:flex;align-items:center;justify-content:center;gap:14px;min-height:66px;padding:10px 22px;border:2px solid #e9d28a;border-radius:20px;background:linear-gradient(180deg,#c89d4e 0%,#77532b 12%,#40244c 16%,#a748d5 47%,#50216d 88%,#291536 100%);box-shadow:0 5px 0 #190e22,0 0 0 3px #35203d,0 7px 20px #0008,inset 0 2px 2px #ffffff88;color:#fff4dc;text-shadow:0 2px 3px #291039;font-weight:900;letter-spacing:.04em;touch-action:manipulation}.symbols-roll:not(:disabled):hover{filter:brightness(1.15);box-shadow:0 5px 0 #190e22,0 0 22px #c15bff77}.symbols-roll:not(:disabled):active{transform:translateY(3px);box-shadow:0 2px 0 #190e22,inset 0 3px 8px #0006}.symbols-roll-wheel{display:grid;place-items:center;width:42px;height:42px;border:2px solid #f5dc95;border-radius:50%;background:radial-gradient(circle,#ae68d4,#41204e);font:900 34px/1 Arial,sans-serif;box-shadow:inset 0 0 8px #ffffff33,0 0 9px #f3cf8355}.symbols-roll-label{display:flex;flex-direction:column;gap:2px}.symbols-roll-label small{font-size:14px;letter-spacing:.15em;color:#f7d892}.symbols-roll.is-spinning{opacity:1;filter:saturate(.85)}.symbols-roll.is-spinning .symbols-roll-wheel{animation:sy-wheel .18s linear infinite}.sy-failure-x{display:grid;place-items:center;width:94%;height:100%;font:900 clamp(42px,11vw,100px)/1 Arial,sans-serif;font-style:normal;color:#ff345f;text-shadow:0 0 10px #ff345f99,0 3px 0 #730823}.symbol-card.failure-reel{border-color:#ff4569;box-shadow:0 0 14px #ff345f55}.symbol-card.failure-reel small{color:#ff7897}@keyframes sy-wheel{to{transform:rotate(360deg)}}@media(orientation:landscape) and (max-height:650px){.symbols-roll{min-height:46px;padding:5px 14px;gap:9px;border-radius:14px;margin-top:9px}.symbols-roll-wheel{width:31px;height:31px;font-size:26px}.symbols-roll-label small{font-size:12px}.sy-failure-x{font-size:clamp(36px,17dvh,80px)}}@media(prefers-reduced-motion:reduce){.symbols-roll.is-spinning .symbols-roll-wheel{animation:none}}



/* Symbolrausch: stable cards, readable actions and scroll fallback on short screens. */
body.game-active main[data-game="symbols"]{display:block;overflow:auto;overscroll-behavior:contain}
.symbols-game{box-sizing:border-box;width:100%;max-width:1180px;min-width:0;max-height:100%;overflow:auto;padding:clamp(10px,2vw,24px);background:radial-gradient(ellipse at 30% 0,#35274355,transparent 65%);border-radius:22px;scrollbar-width:thin}
.symbols-active{display:flex;flex-direction:column;gap:12px;height:100%;min-height:0}
.symbols-top{display:grid;grid-template-columns:minmax(0,1fr) auto auto minmax(130px,210px);gap:16px;align-items:center;margin:0;padding-bottom:12px;border-bottom:1px solid #6c568144}
.symbols-top h1{font-size:clamp(19px,2.5vw,28px);width:auto;overflow-wrap:anywhere}
.symbols-top>span:not(.symbols-time){display:grid;gap:3px;font-size:12px;white-space:nowrap}
.symbols-top b{font-size:21px;font-variant-numeric:tabular-nums}
.symbols-time{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;min-width:0}
.symbols-time .symbols-clock{width:100%;min-width:0;box-sizing:border-box;padding:0;height:30px;border-radius:9px}
.symbols-time> b{font-size:17px;color:#e2ff88}.symbols-time .imposo-timebar-brand{font-size:11px}
.symbols-play{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(12px,2.5vw,28px);flex:1;min-height:0}
.symbols-hand{align-self:center;min-width:0;padding:12px;border:1px solid #73558b55;border-radius:20px;background:#21192988}
.symbols-turn{margin:0 0 14px;overflow-wrap:anywhere}
.symbols-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(5px,1vw,10px);padding-top:5px}
.symbol-card{width:100%;aspect-ratio:.78;max-height:210px;min-height:64px;transition:transform .14s ease,border-color .14s ease,background .14s ease;touch-action:manipulation;cursor:pointer}
.symbol-card.held{transform:translateY(-4px);box-shadow:0 0 0 1px #e2ff88,0 8px 20px #0005}
.symbol-card:not(:disabled):active{transform:scale(.95)}
.symbol-card small{font-size:clamp(9px,1vw,12px);white-space:nowrap}.symbol-card .symbol-face{width:96%;max-height:140px}
.symbols-roll{min-height:52px;margin-top:14px;font-size:19px;border-radius:16px;background:linear-gradient(180deg,#9362cd,#633a99);border:1px solid #c49aef;box-shadow:0 4px 0 #29173e,0 7px 20px #0005;letter-spacing:0}
.symbols-roll-wheel{width:32px;height:32px;font-size:27px}.symbols-step{text-align:center;font-size:13px;min-height:2.4em;line-height:1.3;color:#ded2ed;margin:12px 0 0}
.symbols-help{font-size:12px;text-align:center;margin-top:5px}.symbols-help summary{cursor:pointer;color:#b9aacb}.symbols-help p{font-size:12px}
.symbols-tasks{display:flex;flex-direction:column;min-width:0;min-height:0}.symbols-tasks h2{font-size:17px;flex:none}
.symbols-task-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:8px;overflow:auto;min-height:0;align-content:start;padding:3px;scrollbar-width:thin}
.symbol-task{box-sizing:border-box;min-height:68px;border-width:1px;padding:7px 9px;transition:background .16s ease,border-color .16s ease,transform .12s ease;touch-action:manipulation;cursor:pointer}
.symbol-task.eligible{border-width:1px;box-shadow:inset 3px 0 #e2ff88,0 0 12px #dfff8820}.symbol-task:not(:disabled):active{transform:scale(.97)}
.symbol-task>span:nth-child(2){font-size:12px;overflow-wrap:anywhere}.symbol-task b{font-size:15px}.symbol-task.done{opacity:.75}.symbol-task:disabled:not(.done){opacity:.6}
.symbol-task-pattern .sy-icon{width:clamp(20px,2.4vw,27px)}.symbol-task-pattern .sy-wildcard{width:22px;height:24px;font-size:19px}
.symbols-game .game-bottom{display:flex!important;flex:none;flex-wrap:wrap;margin:0;padding:4px 90px 4px 0;gap:8px;justify-content:flex-start}.symbols-game .game-bottom button{min-height:36px;font-size:12px;padding:8px 12px}
.symbols-active #online-notice{display:block!important;flex:none;margin:0;font-size:12px;color:#ffa9b9;overflow-wrap:anywhere}.symbols-active #online-notice:empty{display:none!important}
.symbols-scoreboard>div{gap:10px;align-items:center;text-align:left;border:1px solid transparent}.symbols-scoreboard strong{flex:1;min-width:0;overflow-wrap:anywhere}.symbols-scoreboard .sy-own{border-color:#b9d978;background:#2d3928}.sy-place{width:30px;text-align:center;font-size:20px;color:#d7c2ee}
.sy-countdown{display:grid;place-items:center;font-size:clamp(70px,18vmin,120px);color:#e2ff88;min-height:180px;animation:sy-count-in .18s ease-out}
.sy-scored{animation:sy-score .45s ease-out}.sy-urgent{animation:sy-clock .8s ease-in-out infinite}
@keyframes sy-count-in{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes sy-score{50%{box-shadow:0 0 24px #dfff8888;background:#536531}}
@keyframes sy-clock{50%{outline:2px solid #ff7899;outline-offset:2px}}
@media(max-width:700px) and (orientation:portrait){
 .symbols-active{height:auto;min-height:100%;gap:14px}.symbols-top{grid-template-columns:minmax(0,1fr) auto auto;gap:10px;padding-bottom:10px}.symbols-time{grid-column:1/-1;grid-template-columns:42px minmax(0,1fr)}.symbols-time .symbols-clock{height:24px}.symbols-top b{font-size:18px}.symbols-top h1{font-size:22px}
 .symbols-play{grid-template-columns:minmax(0,1fr);gap:16px}.symbols-hand{padding:12px}.symbol-card{aspect-ratio:.85;max-height:150px}.symbols-tasks{overflow:visible}.symbols-task-grid{overflow:visible}.symbols-game .game-bottom{padding-bottom:54px}.symbols-setup,.symbols-result{padding-bottom:50px}
}
@media(orientation:landscape) and (max-height:650px){
 .shell:has(.symbols-active){height:100dvh;padding:0}.symbols-active{height:100%;padding:max(6px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));gap:6px;border-radius:0}
 .symbols-top{grid-template-columns:minmax(0,1fr) auto auto minmax(130px,190px);padding-bottom:5px;gap:12px}.symbols-top h1{font-size:18px}.symbols-top>span:not(.symbols-time){display:flex;gap:5px;font-size:11px}.symbols-top b{font-size:15px}.symbols-time>b{font-size:14px}.symbols-time .symbols-clock{height:23px}
 .symbols-play{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:12px;min-height:180px}.symbols-hand{padding:8px;align-self:center}.symbols-turn{font-size:12px;margin-bottom:5px}.symbol-card{aspect-ratio:1;max-height:110px;min-height:58px;padding:4px 2px;gap:3px;border-radius:10px}.symbol-card small{font-size:9px}.symbol-card .symbol-face{width:94%}
 .symbols-roll{min-height:42px;margin-top:8px;padding:5px 10px;font-size:16px}.symbols-roll-wheel{width:27px;height:27px;font-size:23px}.symbols-roll-label small{font-size:11px}.symbols-step{font-size:11px;margin-top:7px;min-height:1.3em}.symbols-help{margin-top:2px;font-size:10px}.symbols-tasks h2{font-size:13px;margin-bottom:3px}
 .symbols-task-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;gap:5px;padding:2px;overflow:auto;flex:1}.symbol-task{min-height:54px;padding:4px 5px;gap:2px 3px}.symbol-task>span:nth-child(2){font-size:10px}.symbol-task b{font-size:12px}.symbol-task-pattern .sy-icon{width:clamp(17px,2.7vw,23px)}.symbol-task-pattern .sy-wildcard{width:18px;height:20px;font-size:16px}.symbols-active .game-bottom button{min-height:30px;padding:5px 9px;font-size:11px}
}
@media(orientation:landscape) and (max-width:740px){.symbols-task-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.symbols-top{grid-template-columns:minmax(0,1fr) auto auto 125px;gap:6px}.symbols-top h1{font-size:16px}}
@media(prefers-reduced-motion:reduce){.symbol-card,.symbol-task{transition:none}.sy-scored,.sy-urgent,.sy-countdown{animation:none}}
.symbol-card.sy-fresh{animation:sy-deal .18s ease-out}.symbol-card.failure-reel{animation:sy-wrong .2s ease-out}
@keyframes sy-deal{from{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes sy-wrong{25%,75%{transform:translateX(-2px)}50%{transform:translateX(2px)}}
@media(prefers-reduced-motion:reduce){.symbol-card.sy-fresh,.symbol-card.failure-reel{animation:none}}

/* Portrait gate lives outside the inert/paused game surface. */
.symbols-rotation{position:fixed;inset:0;z-index:12000;background:#151120;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px max(24px,env(safe-area-inset-right)) 32px max(24px,env(safe-area-inset-left));gap:24px;color:#f8f3ff;box-sizing:border-box}.symbols-rotation[hidden]{display:none}.symbols-rotation p{font-size:clamp(20px,5vw,28px);font-weight:700;max-width:430px;line-height:1.4;margin:0}.symbols-rotation small{color:#c3bad2;font-size:14px;max-width:430px}.sy-rotate-phone{display:grid;place-items:center;width:140px;height:140px;position:relative}.sy-rotate-phone:after{content:'↻';position:absolute;font-size:60px;color:#e2ff88;right:-8px;top:-4px}.sy-rotate-phone i{display:block;width:52px;height:90px;border:4px solid #e2ff88;border-radius:12px;position:relative;animation:sy-rotate-device 2.6s ease-in-out infinite}.sy-rotate-phone i:after{content:'';position:absolute;bottom:7px;left:50%;transform:translateX(-50%);width:15px;height:3px;background:#e2ff88;border-radius:2px}@keyframes sy-rotate-device{0%,15%{transform:rotate(0)}55%,85%{transform:rotate(90deg)}100%{transform:rotate(0)}}
/* Square symbol area is derived from card height, so flex shrink cannot crop sprites. */
.symbol-card{box-sizing:border-box;overflow:visible;display:grid;grid-template-rows:minmax(0,1fr) 14px;justify-items:center;gap:3px}.symbol-card .symbol-face{width:min(100%,140px);height:auto;max-width:100%;max-height:none;aspect-ratio:1;min-height:0;justify-self:center;align-self:center;flex:none}.symbol-card small{line-height:14px;width:100%;text-align:center}.symbol-face>.sy-icon{width:100%;height:100%;background-size:500% auto}.sy-reel-cell .sy-icon{width:94%;height:auto;background-size:500% auto}
@media(orientation:landscape) and (max-height:650px){
 .symbols-active{overflow:auto}.symbols-top{flex:none}.symbols-play{flex:1 0 auto;min-height:0;align-items:start}.symbols-hand{align-self:center}.symbols-tasks{overflow:visible}.symbols-task-grid{overflow:visible;flex:none;grid-template-rows:repeat(4,minmax(46px,auto));padding:2px}.symbol-task{min-height:46px}.symbol-task-pattern{max-width:100%;overflow:visible}.symbol-task-pattern .sy-icon{height:20px;width:19px;background-size:500% 100%}.symbol-task-pattern .sy-wildcard{width:18px;height:20px}.symbol-card{height:clamp(58px,26dvh,96px);aspect-ratio:auto;max-height:none;min-height:0;padding:5px 3px}.symbol-card .symbol-face{width:min(100%,calc(clamp(58px,26dvh,96px) - 31px));height:auto;aspect-ratio:1}.symbols-step{min-height:0}.symbols-game .game-bottom{margin-top:4px}.symbols-tasks h2{margin-bottom:3px}
}
@media(orientation:landscape) and (max-height:360px){.symbols-active{gap:4px}.symbols-top{padding-bottom:3px}.symbols-play{gap:10px}.symbols-hand{padding:6px}.symbols-task-grid{gap:4px;grid-template-rows:repeat(4,minmax(42px,auto))}.symbol-task{min-height:42px;padding:3px 5px}.symbol-task-pattern .sy-icon{height:17px;width:16px}.symbol-task-pattern .sy-wildcard{height:17px;width:16px;font-size:14px}.symbols-roll{margin-top:6px;min-height:36px}.symbols-turn{margin-bottom:3px}.symbols-step{margin-top:5px;font-size:10px}.symbols-help{font-size:10px}}
@media(orientation:landscape) and (max-width:740px){.symbols-task-grid{grid-template-rows:repeat(6,minmax(46px,auto))}}
@media(prefers-reduced-motion:reduce){.sy-rotate-phone i{animation:none;transform:rotate(90deg)}}

/* Keep navigation in the visible header, independent of board scrolling. */
.symbols-home{min-height:34px;padding:6px 10px;font-size:12px;white-space:nowrap}.symbols-top{grid-template-columns:minmax(0,1fr) auto auto auto minmax(130px,190px)}
@media(orientation:landscape) and (max-height:650px){.symbols-top{grid-template-columns:minmax(0,1fr) auto auto auto minmax(115px,180px);gap:10px}.symbols-home{min-height:30px;font-size:11px;padding:5px 8px}.symbols-top h1{font-size:17px}}
@media(orientation:landscape) and (max-width:740px){.symbols-top{grid-template-columns:minmax(0,1fr) auto auto auto 105px;gap:5px}.symbols-top h1{font-size:14px}.symbols-top>span:not(.symbols-time){font-size:10px}.symbols-top b{font-size:12px}.symbols-home{font-size:10px;padding:5px}.symbols-time{gap:4px}}

/* Landscape is one fixed surface. Both columns shrink with the actual viewport. */
@media(orientation:landscape){
 body:has(.symbols-active){height:100dvh;overflow:hidden}.shell:has(.symbols-active){height:100dvh;padding:0;display:block}.shell:has(.symbols-active)>.top,.shell:has(.symbols-active)>.profile-menu,.shell:has(.symbols-active)>nav,.shell:has(.symbols-active)>.visitor-count{display:none!important}
 body.game-active main[data-game="symbols"]:has(.symbols-active){height:100dvh;min-height:0;overflow:hidden!important;display:block;padding:0!important}
 .symbols-active{width:100%;max-width:1180px;height:100dvh;max-height:100dvh;overflow:hidden;padding:max(6px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));gap:6px;box-sizing:border-box;border-radius:0}
 .symbols-active .symbols-top{flex:0 0 auto;min-height:0;padding-bottom:5px}.symbols-active .symbols-play{flex:1 1 0;min-height:0;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);align-items:stretch;gap:12px;overflow:hidden}
 .symbols-active .symbols-hand{height:100%;box-sizing:border-box;min-height:0;align-self:stretch;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:5px;padding:8px;overflow:hidden}
 .symbols-active .symbols-turn{margin:0;font-size:12px;line-height:1.2}.symbols-active .symbols-cards{height:100%;max-height:150px;min-height:0;align-self:center;align-items:stretch;padding-top:4px;box-sizing:border-box}
 .symbols-active .symbol-card{height:100%;max-height:none;min-height:0;aspect-ratio:auto;box-sizing:border-box;padding:4px 3px;container-type:size;grid-template-rows:minmax(0,1fr) 12px;gap:2px;overflow:hidden}
 .symbols-active .symbol-card .symbol-face{--sy-face:min(100cqw,calc(100cqh - 14px));width:var(--sy-face);height:var(--sy-face);max-width:none;aspect-ratio:1;min-height:0}.symbols-active .symbol-card small{font-size:9px;line-height:12px}
 .symbols-active .symbols-roll{margin:0;min-height:36px;padding:5px 10px;box-sizing:border-box}.symbols-active .symbols-step{margin:0;min-height:0;font-size:10px;line-height:1.2}.symbols-active .symbols-help{display:none}
 .symbols-active .symbols-tasks{height:100%;min-height:0;overflow:hidden}.symbols-active .symbols-tasks h2{flex:0 0 auto;margin:0 0 4px;font-size:13px;line-height:1.2}
 .symbols-active .symbols-task-grid{flex:1 1 0;min-height:0;height:auto;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:4px;padding:2px;overflow:hidden;align-content:stretch}
 .symbols-active .symbol-task{min-height:0;min-width:0;height:100%;padding:3px 5px;grid-template-rows:minmax(0,1fr) auto;gap:1px 3px;overflow:hidden}.symbols-active .symbol-task-pattern{height:100%;align-items:center;min-height:0;gap:1px}
 .symbols-active .symbol-task-pattern .sy-icon{width:clamp(12px,2.2vw,25px);height:auto;max-height:100%;background-size:500% auto}.symbols-active .symbol-task-pattern .sy-wildcard{width:clamp(12px,2.1vw,22px);height:clamp(12px,5dvh,23px);font-size:clamp(10px,4dvh,19px);flex-shrink:1}.symbols-active .symbol-task-pattern:has(.sy-wildcard){gap:2px}
 .symbols-active .symbol-task>span:nth-child(2){font-size:clamp(8px,2.8dvh,12px);line-height:1.1}.symbols-active .symbol-task b{font-size:clamp(9px,3dvh,14px);line-height:1.1}.symbols-active .symbol-multiplier{font-size:8px;padding:1px 2px;margin-right:2px}
 .symbols-active .game-bottom{flex:0 0 auto;min-height:0;padding:0 90px 0 0;margin:0;gap:5px}.symbols-active .game-bottom>[data-game-action="home"]{display:none}.symbols-active .game-bottom:has(>button:only-child){display:none!important}.symbols-active .game-bottom button{min-height:26px;font-size:10px;padding:4px 7px}
}
@media(orientation:landscape) and (max-height:320px){.symbols-active{gap:4px;padding-top:4px;padding-bottom:4px}.symbols-active .symbols-top{padding-bottom:3px}.symbols-active .symbols-hand{gap:3px;padding:6px}.symbols-active .symbols-roll{min-height:32px;font-size:14px;padding:3px 8px}.symbols-active .symbols-roll-wheel{width:24px;height:24px;font-size:20px}.symbols-active .symbols-turn{font-size:10px}.symbols-active .symbols-roll-label small{font-size:10px}.symbols-active .symbol-task{padding:2px 4px}.symbols-active .symbols-task-grid{gap:3px}}
@media(orientation:landscape){
 .symbols-active .symbol-task{container-type:size}
 .symbols-active .symbol-task-pattern .sy-icon,.symbols-active .symbol-task-pattern .sy-wildcard{--task-icon:min(25px,calc((100cqw - 10px)/5),calc((100cqh - 14px)*.94));width:var(--task-icon);height:calc(var(--task-icon)/.94);min-height:0;max-height:none;flex:none;aspect-ratio:.94}
 .symbols-active .symbol-task-pattern .sy-wildcard{font-size:min(19px,calc((100cqh - 14px)*.8))}
}
/* Explicit exceptions to the site's generic hidden home buttons. */
#main .symbols-game .symbols-home{display:inline-flex!important;align-items:center;justify-content:center;visibility:visible;flex:none}
@media(orientation:landscape){
 body.game-active:has(.symbols-active){height:100dvh;box-sizing:border-box;overflow:hidden}
 body.game-active .shell:has(.symbols-active){height:100%!important;width:100%;max-width:none;padding:0!important;margin:0!important;box-sizing:border-box;display:flex!important;flex-direction:column}
 body.game-active #main[data-game="symbols"]:has(.symbols-active){height:100%!important;flex:1 1 0;min-height:0!important;padding:0!important;overflow:hidden!important;box-sizing:border-box}
 #main .symbols-active{height:100%!important;min-height:0;max-height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:5px;box-sizing:border-box;padding:6px max(12px,env(safe-area-inset-right)) 6px max(12px,env(safe-area-inset-left));overflow:hidden}
 #main .symbols-active .symbols-play{height:100%;min-height:0;overflow:hidden;align-items:stretch}
 #main .symbols-active .symbols-top{grid-template-columns:minmax(90px,1fr) auto auto auto minmax(115px,190px);min-width:0;gap:10px}
 #main .symbols-active .symbols-hand{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:6px;align-items:center;box-sizing:border-box}
 #main .symbols-active .symbols-cards{height:100%;min-height:0;max-height:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;justify-items:center;gap:7px;overflow:visible}
 #main .symbols-active .symbol-card{aspect-ratio:1;height:auto;width:100%;max-height:100%;align-self:center;justify-self:center;min-height:0;container-type:normal;border-radius:12px;box-sizing:border-box;display:grid;grid-template-rows:minmax(0,1fr) 12px;gap:2px;padding:5px 3px;overflow:hidden}
 #main .symbols-active .symbol-card .symbol-face{width:calc(100% - 4px);height:auto;aspect-ratio:1;max-height:100%;position:relative;overflow:hidden;display:block;min-height:0;align-self:center;justify-self:center}
 #main .symbols-active .sy-reel-track{left:0;width:100%;display:block}.symbols-active .sy-reel-cell{height:var(--reel-size);width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.symbols-active .sy-reel-cell .sy-icon{width:94%;height:auto;aspect-ratio:.94;background-size:500% auto}
 #main .symbols-active .symbols-task-grid{height:100%;min-height:0;grid-template-rows:repeat(4,minmax(0,1fr));grid-template-columns:repeat(3,minmax(0,1fr));padding:3px;gap:5px;overflow:hidden;box-sizing:border-box}
 #main .symbols-active .symbols-tasks{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:2px}
 #main .symbols-active .symbol-task{container-type:normal;height:100%;min-height:0;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr) auto;gap:2px 3px;padding:4px 6px;box-sizing:border-box;overflow:hidden}
 #main .symbols-active .symbol-task-pattern{min-height:0;height:100%;width:100%;gap:2px;display:flex;justify-content:center;align-items:center;overflow:hidden}
 #main .symbols-active .symbol-task-pattern .sy-icon{width:20px;height:auto;aspect-ratio:.94;min-height:0;max-height:100%;background-size:500% auto;flex:none}
 #main .symbols-active .symbol-task-pattern .sy-wildcard{width:19px;height:20px;font-size:16px;max-height:100%;box-sizing:border-box;flex:none}
 #main .symbols-active .symbols-step{font-size:10px;line-height:1.15;overflow-wrap:anywhere;margin:0}.symbols-active .symbol-task>span:nth-child(2){line-height:1.15}.symbols-active .symbol-task b{line-height:1.15}
 #main .symbols-active #online-notice:empty{display:none!important}#main .symbols-active .game-bottom{grid-row:4;min-height:0;margin:0;padding:0 90px 0 0}
}
@media(orientation:landscape) and (max-width:740px){#main .symbols-active .symbols-top{grid-template-columns:minmax(70px,1fr) auto auto auto 95px;gap:5px}#main .symbols-active .symbols-top h1{font-size:13px}#main .symbols-active .symbols-home{font-size:10px;padding:5px 6px}#main .symbols-active .symbols-cards{gap:4px}#main .symbols-active .symbols-play{gap:8px}}
/* Short GPU strips avoid oversized WebKit layers; CSS drives the reel without JS frames. */
.symbols-game .sy-reel-track{animation:sy-reel-scroll var(--sy-duration,2000ms) linear var(--sy-elapsed,0ms) both;will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translate3d(0,0,0)}
@keyframes sy-reel-scroll{0%{transform:translate3d(0,0,0)}55%{transform:translate3d(0,calc(var(--sy-distance)*.85),0)}80%{transform:translate3d(0,calc(var(--sy-distance)*.97),0)}100%{transform:translate3d(0,var(--sy-distance),0)}}
#main .symbols-game .symbol-card{grid-template-rows:minmax(0,1fr);gap:0;align-items:center}#main .symbols-game .symbol-card .symbol-face{align-self:center;justify-self:center}
#main .symbols-active .symbol-card .symbol-face{--sy-face:min(calc(100% - 4px),140px);width:var(--sy-face);height:auto;aspect-ratio:1}

/* A generic .game-bottom rule places controls in column 2. Keep every direct
   child in the single outer column; only .symbols-play has two columns. */
@media(orientation:landscape){
 #main .symbols-active{grid-template-columns:minmax(0,1fr);grid-auto-flow:row;grid-auto-columns:0;align-content:stretch}
 #main .symbols-active>.symbols-top{grid-column:1;grid-row:1;align-self:stretch;width:100%;min-width:0}
 #main .symbols-active>.symbols-play{grid-column:1;grid-row:2;width:100%;min-width:0}
 #main .symbols-active>#online-notice{grid-column:1;grid-row:3;min-width:0}
 #main .symbols-active>.game-bottom{grid-column:1;grid-row:4;justify-self:stretch;align-self:stretch;width:100%;min-width:0}
 #main .symbols-active .symbols-top h1{white-space:nowrap;overflow-wrap:normal;font-size:clamp(16px,2vw,24px)}
 #main .symbols-active .symbols-time{grid-column:auto;min-width:0}
}

.symbols-rotation-home{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));min-height:44px;padding:10px 16px;border:1px solid #ed8195;border-radius:14px;background:#b42f49;color:#fff;font-size:16px;font-weight:800;box-shadow:0 3px 10px #0003}.symbols-rotation-home:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Neon Arcade skin: paint only; the fixed layout and symbol sizes stay intact. */
body:has(.symbols-active),body.game-active #main[data-game="symbols"]:has(.symbols-active){background:#070e1c}
#main .symbols-active{background:radial-gradient(ellipse at 24% 36%,#11304c55,transparent 58%),linear-gradient(120deg,#0b1728,#080e1c 70%);color:#eaf8ff}
.symbols-active .symbols-top{border-bottom-color:#299bce55}
.symbols-active .symbols-top h1{color:#dffaff;text-shadow:0 0 12px #36cfff66}
.symbols-active .symbols-top>span:not(.symbols-time),.symbols-active .symbols-tasks h2 small{color:#9bb6ce}
.symbols-active .symbols-top b,.symbols-active .symbols-tasks h2{color:#eaf8ff}
.symbols-active .symbols-time>b,.symbols-active .symbols-turn{color:#cfff88;text-shadow:0 0 8px #bcff7733}
.symbols-active .symbols-hand{border-color:#359cd477;background:repeating-linear-gradient(0deg,#ffffff02 0 1px,transparent 1px 4px),linear-gradient(145deg,#142b40,#0b1425 68%);box-shadow:inset 0 1px 0 #97dcff33,inset 0 0 24px #0005,0 0 14px #15baff12}
#main .symbols-active .symbol-card{position:relative;border-color:#4b99b7;background:linear-gradient(145deg,#263d53,#0a1728 45%,#172d43);color:var(--symbol-color);box-shadow:inset 0 1px 2px #c0efff66,inset 0 0 12px #000b,0 0 0 1px #091322,0 3px 9px #0008}
.symbols-active .symbol-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(155deg,#d7f6ff18,transparent 35%,transparent 70%,#41c7ff0a);box-shadow:inset 0 0 9px #0008}
#main .symbols-active .symbol-card .symbol-face{border-radius:7px;background:radial-gradient(ellipse,#1e375388,#050c19cc);box-shadow:inset 0 4px 10px #0008,inset 0 -3px 7px #0006}
.symbols-active .symbol-face .sy-icon{filter:drop-shadow(0 2px 4px #0009)}
#main .symbols-active .symbol-card.held{border-color:#d5ff85;background:linear-gradient(145deg,#37472c,#101e1c);box-shadow:inset 0 1px 2px #f0ffd777,0 0 12px #cbff8555}
#main .symbols-active .symbol-card.reeling{border-color:#74eaff;box-shadow:inset 0 0 12px #0009,0 0 12px #25caff77}
.symbols-active .symbol-card.reeling .symbol-face:after{background:linear-gradient(to bottom,#050c19bb,transparent 24%,transparent 76%,#050c19bb)}
#main .symbols-active .symbol-card.failure-reel{border-color:#ff4569;box-shadow:0 0 14px #ff345f55}
.symbols-active .symbols-roll{border-color:#79eaff;background:linear-gradient(180deg,#27c6f5,#078fc7 55%,#05638e);color:#effcff;text-shadow:0 2px 3px #003d67;box-shadow:inset 0 1px 2px #ffffff77,inset 0 -2px 2px #00466a88,0 4px 0 #033e62,0 0 14px #16c9ff44}
.symbols-active .symbols-roll:not(:disabled):hover{box-shadow:inset 0 1px 2px #ffffff77,0 4px 0 #033e62,0 0 20px #16c9ff77}
.symbols-active .symbols-roll:not(:disabled):active{box-shadow:inset 0 3px 8px #00395499,0 2px 0 #033e62}
.symbols-active .symbols-roll-wheel{border-color:#c0f5ff;background:radial-gradient(circle,#24c1e7,#0873a6);color:#e8fcff;box-shadow:inset 0 0 8px #ffffff33,0 0 9px #61dfff55}
.symbols-active .symbols-roll-label small{color:#d9f8ff}
.symbols-active .symbols-step{color:#a9c3d8}
.symbols-active .symbol-task{border-color:#2c6284;background:linear-gradient(145deg,#16293e,#101b2e);color:#e1eef9;box-shadow:inset 0 1px 0 #86d9ff15,0 0 6px #149cdd0c}
.symbols-active .symbol-task:disabled:not(.done){opacity:.8}
.symbols-active .symbol-task b{color:#cfff88}
.symbols-active .symbol-task.eligible{border-color:#8deaff;background:linear-gradient(145deg,#173f53,#102b40);box-shadow:inset 3px 0 #6ee7ff,0 0 12px #40d8ff44}
.symbols-active .symbol-task.done{border-color:#589d73;background:linear-gradient(145deg,#1d3a35,#102921)}
.symbols-active .symbol-task.crossed{border-color:#974963;background:linear-gradient(145deg,#382035,#231727)}
.symbols-active .symbol-task.crossed b{color:#ff90b2}
.symbols-active .sy-wildcard{box-shadow:inset 0 1px 2px #ffffff33,0 2px 5px #0008}
#main .symbols-active .symbols-home,body:has(.symbols-active) #game-pause-button{border-color:#65d6ff;background:linear-gradient(180deg,#173f5d,#10233b);color:#e8faff;box-shadow:inset 0 1px 0 #d5f5ff33,0 0 10px #16baff22;text-shadow:0 1px 2px #0008}
.symbols-active button:focus-visible{outline-color:#a5eeff}

/* Midnight steel machine: surface changes only, preserving every layout box. */
#main .symbols-active{background:radial-gradient(ellipse at 24% 40%,#20364d38,transparent 65%),linear-gradient(130deg,#0d1725,#070e1a 75%)}
#main .symbols-active .symbols-hand{position:relative;border-color:#849eb4;background:repeating-linear-gradient(105deg,#ffffff02 0 1px,transparent 1px 5px),linear-gradient(145deg,#172536,#0a111e 70%);box-shadow:inset 0 0 0 2px #172332,inset 0 0 0 4px #71899b55,inset 0 0 0 6px #080e18,inset 0 1px 3px #e5f2ff88,inset 0 -2px 3px #000c,0 5px 12px #0006}
#main .symbols-active .symbols-turn{color:#d7e8ef;text-shadow:0 1px 2px #000}
#main .symbols-active .symbol-card{border-color:#859bae;background:linear-gradient(110deg,#455b6e,#192b3e 18%,#0b1523 50%,#344c60 88%,#a1b2bc);box-shadow:inset 0 1px 2px #edf7ff99,inset 0 -2px 3px #000b,0 0 0 1px #050a13,0 4px 8px #0009}
#main .symbols-active .symbol-card .symbol-face{background:linear-gradient(180deg,#030811,#15263b 32%,#192b41 65%,#030811);box-shadow:inset 0 6px 10px #000b,inset 0 -6px 10px #000a,inset 1px 0 2px #000b;border-radius:5px}
#main .symbols-active .symbol-card::after{background:linear-gradient(180deg,#0005,transparent 28%,#c5e6ff08 48%,transparent 72%,#0007);box-shadow:inset 0 0 0 1px #d4e6f522,inset 0 0 8px #0007}
#main .symbols-active .symbol-card.reeling{border-color:#a3c6dc;box-shadow:inset 0 1px 2px #d6efff88,inset 0 -2px 3px #000b,0 4px 8px #0009}
#main .symbols-active .symbol-card.held{border-color:#d5ff85;background:linear-gradient(145deg,#3c5034,#14231e);box-shadow:inset 0 1px 2px #e6ffc488,0 0 0 1px #99bd6566,0 4px 8px #0008}
#main .symbols-active .symbol-card.failure-reel{border-color:#ff4569;box-shadow:inset 0 1px 2px #ffc2ce55,0 3px 8px #0008}
#main .symbols-active .symbols-roll{border-color:#9eb8ca;background:repeating-linear-gradient(100deg,#ffffff03 0 1px,transparent 1px 4px),linear-gradient(180deg,#5c768b,#344e66 15%,#20374f 55%,#14283d);color:#f0f7fc;text-shadow:0 2px 2px #081421;box-shadow:inset 0 1px 2px #e2f3ff99,inset 0 -2px 3px #07111dcc,0 4px 0 #060e1a,0 5px 10px #0006}
#main .symbols-active .symbols-roll:not(:disabled):hover{box-shadow:inset 0 1px 2px #e2f3ff99,0 4px 0 #060e1a,0 5px 12px #0008}
#main .symbols-active .symbols-roll-wheel{border-color:#afcadb;background:radial-gradient(circle,#587a94,#203a52);box-shadow:inset 0 1px 2px #e2f3ff55,0 2px 4px #0006}
#main .symbols-active .symbols-roll-label small{color:#cadde9}

/* Three symbols share one reel window: only the middle one is the result. */
#main .symbols-active .symbol-face .sy-rest-strip{position:absolute;inset:-61% 0 auto;height:222%;width:100%;display:flex;flex-direction:column}
#main .symbols-active .sy-rest-cell{height:33.333333%;width:100%;flex:none;display:flex;align-items:center;justify-content:center;font-size:28px}
#main .symbols-active .sy-rest-cell .sy-icon{width:72%;height:auto;aspect-ratio:.94}
#main .symbols-active .sy-reel-cell .sy-icon{width:72%;height:auto;aspect-ratio:.94}
#main .symbols-active .symbol-card .symbol-face::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(180deg,#020611bb,transparent 25%,transparent 75%,#020611bb);box-shadow:inset 0 1px 0 #a6c8dd33,inset 0 -1px 0 #a6c8dd33}
#main .symbols-active .sy-rest-cell .sy-failure-x{font-size:clamp(20px,5vw,60px)}

/* One machine cabinet and shared glass window; decorations have no layout footprint. */
#main .symbols-active .symbols-hand{isolation:isolate;border-radius:22px;background:radial-gradient(circle at 10px 10px,#b6c6d0 0 2px,#263a4b 3px,transparent 4px),radial-gradient(circle at calc(100% - 10px) 10px,#b6c6d0 0 2px,#263a4b 3px,transparent 4px),radial-gradient(circle at 10px calc(100% - 10px),#b6c6d0 0 2px,#263a4b 3px,transparent 4px),radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),#b6c6d0 0 2px,#263a4b 3px,transparent 4px),repeating-linear-gradient(100deg,#ffffff02 0 1px,transparent 1px 4px),linear-gradient(160deg,#31465a,#102033 25%,#0b1523 70%,#293f53);box-shadow:inset 0 0 0 2px #10202e,inset 0 0 0 4px #9eb3c377,inset 0 0 0 7px #0a1421,inset 0 0 0 8px #5b718477,inset 0 2px 3px #f0f8ff99,0 6px 14px #0008}
#main .symbols-active .symbols-turn{background:linear-gradient(180deg,#090f1d,#19293a);border-radius:7px;box-shadow:inset 0 1px 3px #0008,0 1px 0 #a4bfd144;text-shadow:0 1px 2px #000}
#main .symbols-active .symbols-cards{position:relative;isolation:isolate}
#main .symbols-active .symbols-cards::before{content:"";position:absolute;pointer-events:none;z-index:-1;left:-3px;right:-3px;top:50%;height:calc(var(--machine-reel-size,90px) + 12px);transform:translateY(-50%);border-radius:9px;background:linear-gradient(180deg,#a9bac5,#30495d 4%,#030914 9%,#060d19 92%,#657e90 96%,#bccbd4);box-shadow:0 0 0 1px #050b14,inset 0 1px 1px #f0faff88,0 4px 7px #0008}
#main .symbols-active .symbols-cards::after{content:"";position:absolute;pointer-events:none;z-index:4;left:1px;right:1px;top:50%;height:var(--machine-reel-size,90px);transform:translateY(-50%);border-radius:5px;background:linear-gradient(0deg,transparent calc(50% - .5px),#a5d5ee55 calc(50% - .5px),#a5d5ee55 calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(155deg,#e3f4ff14,transparent 35%,transparent 60%,#c9e8ff06);box-shadow:inset 0 5px 9px #0007,inset 0 -5px 9px #0007}
#main .symbols-active .symbol-card{border-color:#536c7c;border-radius:4px;background:linear-gradient(90deg,#7893a5,#162536 5%,#091320 95%,#7b96a6);box-shadow:inset 1px 0 1px #bfd5e333,inset -1px 0 1px #000b}
#main .symbols-active .symbol-card.held{border-color:#cfff88;box-shadow:inset 0 0 0 1px #cfff8877}
#main .symbols-active .symbols-roll{box-shadow:inset 0 0 0 2px #263e53,inset 0 2px 2px #ebf6ff99,inset 0 -3px 4px #030b18,0 3px 0 #050c16,0 0 0 2px #7892a055}

/* Compact WebKit reel layer: 200 symbol steps/second before a separate braking phase. */
#main .symbols-game .sy-reel-track{animation:sy-reel-fast 25ms linear var(--sy-elapsed,0ms) var(--sy-fast-cycles,77),sy-reel-brake var(--sy-brake-duration,1575ms) cubic-bezier(.12,.75,.2,1) var(--sy-brake-delay,1925ms) 1 forwards}
@keyframes sy-reel-fast{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,var(--sy-loop-distance),0)}}
@keyframes sy-reel-brake{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,var(--sy-distance),0)}}
.symbols-active .symbol-card.reeling .symbol-face{contain:paint}

.sy-icon{background-image:url('/symbols-royal-colors.webp');aspect-ratio:1;background-size:500% 100%}
@media(orientation:landscape){#main .symbols-active .symbols-task-grid{grid-template-rows:repeat(3,minmax(0,1fr))}}
.symbols-game .sy-icon,.hub-gallery .symbols-cover .sy-icon{background-image:url('/symbols-royal-colors.webp');background-size:500% 100%!important}

#main .symbols-active .symbols-top{position:relative;z-index:20}#main .symbols-active .symbols-home{position:relative;z-index:21;touch-action:manipulation;pointer-events:auto}

/* Award preview stays inside each task, without moving the task grid. */
#main .symbols-active .symbol-task{position:relative}
#main .symbols-active .symbol-task.eligible .symbol-task-pattern{padding-top:20px;box-sizing:border-box}
#main .symbols-active .sy-points-bubble{position:absolute;right:4px;top:3px;z-index:2;display:block;padding:3px 7px;border-radius:20px;background:#b7f58b;border:1px solid #ddffbd;color:#153509;font-style:normal;font-weight:800;font-size:12px;line-height:1.1;white-space:nowrap;pointer-events:none;box-shadow:0 2px 5px #0005}

#main .symbols-active .symbol-task{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#main .symbols-active .symbol-task>*{pointer-events:none}

/* Fit the failure mark inside its own window; royal symbol sizing is unchanged. */
#main .symbols-active .sy-failure-result{position:absolute;inset:0;display:grid;place-items:center}
#main .symbols-active .sy-failure-x{position:relative;display:block;flex:none;width:72%;height:72%;font-size:0!important;line-height:0;text-shadow:none;filter:drop-shadow(0 2px 1px #730823) drop-shadow(0 0 4px #ff345f66)}
#main .symbols-active .sy-failure-x::before,#main .symbols-active .sy-failure-x::after{content:"";position:absolute;left:0;top:43%;width:100%;height:14%;border-radius:3px;background:#ff345f;transform:rotate(45deg)}
#main .symbols-active .sy-failure-x::after{transform:rotate(-45deg)}