/* letroll.css — LetRoll 滾滾小國王：只有「板面」（積木城堡格子＋小國王＋木箱＋光束＋方向鍵）。
   木框／教練／🌼／回家的路／折線圖／統計／方向鍵全部在 garden-kit.css（class gk-），這裡不要重寫。 */

.rl-ref-goal { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.rl-ref-icons { font-size: 13px; line-height: 1; letter-spacing: -1px; white-space: nowrap; }
.rl-ref-text { font-size: 10px; font-weight: 800; color: #7c5a21; line-height: 1; white-space: nowrap; }
.rl .gk-road-home { align-items: center; justify-content: center; }
.rl-home { font-size: 18px; line-height: 1; }
.rl-lvl button { padding: 0 12px; }
.rl-lvl button[disabled] { opacity: .35; cursor: default; }
.rl-lvl-label { appearance: none; background: none; border: 0; border-left: 1px solid var(--gd-bd); border-right: 1px solid var(--gd-bd); cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; padding: 0 12px; font-weight: 800; font-size: 14.5px; color: #334155; min-width: 86px; justify-content: center; }
.rl-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; width: 100%; max-height: 196px; overflow-y: auto; padding: 8px; box-sizing: border-box; background: #fff8ea; border: 2px solid #e5c58c; border-radius: 14px; }
.rl-pick { appearance: none; position: relative; height: 40px; border-radius: 10px; border: 2px solid #e5c58c; background: #fff; font: 800 15px/1 inherit; color: #475569; cursor: pointer; }
.rl-pick.is-done { background: #fef9c3; border-color: #eab308; }
.rl-pick.is-done::after { content: '⭐'; position: absolute; right: -5px; top: -7px; font-size: 12px; }
.rl-pick.is-cur { border-color: var(--gk-good); box-shadow: 0 0 0 2px var(--gk-good); }

.rl-board { position: relative; }
/* 城堡：--c 一格 */
.rl-yard { --c: min(76px, calc(628px / var(--w)), calc((100vw - 76px) / var(--w))); position: relative; width: calc(var(--c) * var(--w) + 12px); margin: 0 auto; padding: 6px; box-sizing: border-box; border-radius: 18px; background: #7c5a3a; box-shadow: inset 0 -5px 0 rgba(0,0,0,.2), 0 3px 6px rgba(60,30,0,.25); }
.rl-grid { position: relative; width: calc(var(--c) * var(--w)); height: calc(var(--c) * var(--h)); border-radius: 12px; overflow: hidden; background: #b9a7d6; touch-action: manipulation; outline: none; user-select: none; -webkit-user-select: none; }
.rl-grid:focus-visible { box-shadow: 0 0 0 3px #86efac; }
.rl-cell { position: absolute; width: var(--c); height: var(--c); left: calc(var(--x) * var(--c)); top: calc(var(--y) * var(--c)); box-sizing: border-box; }
/* 城堡內部：淡紫磚牆 */
.rl-air { background: linear-gradient(180deg, #c9bce4, #b9a7d6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
/* 木頭積木牆 */
.rl-wall { background: linear-gradient(180deg, #d9a066 0 18%, #c98a4d 18% 82%, #a86a34 82%); box-shadow: inset 0 0 0 2px #8a4f1c, inset 0 4px 0 rgba(255,255,255,.25); border-radius: 6px; }
.rl-wall--edge { background: linear-gradient(180deg, #8f6b4a, #7c5a3a); box-shadow: inset 0 0 0 2px #5c3d22; border-radius: 0; }
.rl-wall--floor { background: repeating-linear-gradient(90deg, #a86a34 0 8px, #c98a4d 8px 30px); box-shadow: inset 0 3px 0 #e2b37a, inset 0 0 0 2px #8a4f1c; border-radius: 0; }
/* 彩虹門 */
.rl-goal { background: linear-gradient(180deg, #c9bce4, #b9a7d6); }
.rl-goal-arch { position: absolute; left: 14%; right: 14%; bottom: 0; top: 14%; border-radius: 45% 45% 6px 6px; background: conic-gradient(from 180deg at 50% 100%, #ef4444, #f59e0b, #facc15, #22c55e, #3b82f6, #a855f7, #ef4444); box-shadow: 0 0 12px 3px rgba(255,255,255,.55); }
.rl-goal-arch::after { content: ''; position: absolute; inset: 22% 22% 0; border-radius: 45% 45% 0 0; background: radial-gradient(circle at 50% 30%, #fff, #fde68a 60%, #fbbf24); }
.rl-flag { position: absolute; left: 50%; transform: translateX(-50%); top: -2px; white-space: nowrap; font-size: max(9px, calc(var(--c) * .15)); font-weight: 900; color: #7c2d12; background: #fff7ed; border: 2px solid #fdba74; border-radius: 6px; padding: 0 4px; line-height: 1.3; z-index: 3; }
.rl-yard--won .rl-goal-arch { animation: rl-glow .6s ease-in-out infinite alternate; }
@keyframes rl-glow { to { box-shadow: 0 0 22px 8px rgba(255,255,255,.9); } }
/* 門 */
.rl-door { background: linear-gradient(180deg, #c9bce4, #b9a7d6); }
.rl-door-leaf { position: absolute; inset: 8% 14% 0; border-radius: 45% 45% 4px 4px; background: linear-gradient(180deg, #92400e, #78350f); box-shadow: inset 0 0 0 3px #451a03; transition: transform .45s ease-in, opacity .45s; transform-origin: 0 50%; }
.rl-door-leaf::after { content: '🔒'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: calc(var(--c) * .34); }
.rl-door.is-open .rl-door-leaf { transform: perspective(200px) rotateY(-80deg); opacity: .35; }
.rl-door.is-open .rl-door-leaf::after { content: '🔓'; }
/* 懸浮平台（底座）與升起來時的平台 */
.rl-lift { background: linear-gradient(180deg, #c9bce4, #b9a7d6); }
.rl-lift-pad { position: absolute; left: 10%; right: 10%; top: 12%; height: 32%; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #bae6fd, #38bdf8 70%, #0369a1); box-shadow: 0 0 10px 2px rgba(56,189,248,.7); animation: rl-bob 1.6s ease-in-out infinite; }
.rl-float { position: absolute; left: 0; top: 0; width: var(--c); height: var(--c); pointer-events: none; z-index: 4; transition: transform .35s ease-out; }
.rl-float::before { content: ''; position: absolute; left: 10%; right: 10%; top: 4%; height: 30%; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #bae6fd, #38bdf8 70%, #0369a1); box-shadow: 0 0 14px 4px rgba(56,189,248,.8); }
@keyframes rl-bob { 50% { transform: translateY(-10%); } }
/* 燈與感應器 */
.rl-lamp { background: linear-gradient(180deg, #8f6b4a, #7c5a3a); box-shadow: inset 0 0 0 2px #5c3d22; }
.rl-lamp-body { position: absolute; inset: 22%; border-radius: 30%; background: radial-gradient(circle at 50% 50%, #fff7ae, #fbbf24 55%, #b45309); box-shadow: 0 0 12px 4px rgba(253,224,71,.8); }
.rl-lamp-body::after { content: '➤'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); font-size: calc(var(--c) * .3); color: #7c2d12; }
.rl-lamp--0 .rl-lamp-body { --rot: -90deg; } .rl-lamp--2 .rl-lamp-body { --rot: 90deg; } .rl-lamp--3 .rl-lamp-body { --rot: 180deg; }
.rl-sensor { background: linear-gradient(180deg, #8f6b4a, #7c5a3a); box-shadow: inset 0 0 0 2px #5c3d22; }
.rl-sensor::after { content: '🔮'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: calc(var(--c) * .5); filter: grayscale(.8) opacity(.7); transition: filter .3s, transform .3s; }
.rl-sensor.is-on::after { filter: none; transform: translate(-50%, -50%) scale(1.2); text-shadow: 0 0 14px #f0abfc; }
/* 光束 */
.rl-beam { position: absolute; width: var(--c); height: var(--c); left: calc(var(--x) * var(--c)); top: calc(var(--y) * var(--c)); pointer-events: none; z-index: 2; }
.rl-beam--h::before, .rl-beam--v::before { content: ''; position: absolute; background: linear-gradient(90deg, rgba(253,224,71,.35), #fde047, rgba(253,224,71,.35)); box-shadow: 0 0 10px 3px rgba(253,224,71,.6); }
.rl-beam--h::before { left: 0; right: 0; top: 42%; height: 16%; }
.rl-beam--v::before { top: 0; bottom: 0; left: 42%; width: 16%; background: linear-gradient(180deg, rgba(253,224,71,.35), #fde047, rgba(253,224,71,.35)); }
.rl-beam--m::before { content: ''; position: absolute; left: 30%; top: 30%; right: 30%; bottom: 30%; border-radius: 50%; background: radial-gradient(circle, #fff, rgba(253,224,71,0) 70%); }
/* 鏡子（按鈕） */
.rl-mirror { appearance: none; border: 0; padding: 0; cursor: pointer; background: linear-gradient(180deg, #c9bce4, #b9a7d6); -webkit-tap-highlight-color: transparent; }
.rl-mirror svg { position: absolute; inset: 6%; width: 88%; height: 88%; transition: transform .25s cubic-bezier(.3,1.4,.6,1); }
.rl-mirror.is-back svg { transform: rotate(90deg); }
.rl-mirror:active svg { transform: scale(.92); }
.rl-mirror.is-back:active svg { transform: rotate(90deg) scale(.92); }
.rl-mirror.is-good { box-shadow: inset 0 0 0 3px var(--gk-good); }
.rl-mirror.is-bad { box-shadow: inset 0 0 0 3px var(--gk-bad); }
.rl-mirror.gk-glow { animation: gk-glow 1s ease-in-out infinite; z-index: 5; }
.rl-badge { --b: min(20px, calc(var(--c) * .34)); position: absolute; right: 2px; top: 2px; width: var(--b); height: var(--b); border-radius: 50%; display: none; place-items: center; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); z-index: 3; pointer-events: none; }
.rl-badge svg { width: 60%; height: 60%; display: block; position: static; inset: auto; }
.rl-mirror.is-good .rl-badge { display: grid; background: var(--gk-good); }
.rl-mirror.is-bad .rl-badge { display: grid; background: var(--gk-bad); }
.rl-mirror.is-same .rl-badge { display: grid; background: var(--gk-same); }
/* 餅乾、木箱、小國王 */
.rl-cookie { position: absolute; width: var(--c); height: var(--c); left: calc(var(--x) * var(--c)); top: calc(var(--y) * var(--c)); display: grid; place-items: center; font-size: calc(var(--c) * .6); line-height: 1; pointer-events: none; z-index: 3; transition: transform .25s, opacity .25s; }
.rl-cookie.is-eaten { transform: scale(0); opacity: 0; }
.rl-crate { position: absolute; left: 0; top: 0; width: var(--c); height: var(--c); pointer-events: none; z-index: 4; transition: transform .28s ease-in; }
.rl-crate svg { width: 100%; height: 100%; display: block; }
.rl-king { position: absolute; left: 0; top: 0; width: var(--c); height: var(--c); pointer-events: none; z-index: 6; transition: transform .3s cubic-bezier(.4, .2, .5, 1); }
.rl-king svg { width: 100%; height: 100%; display: block; transition: transform .3s; }
.rl-king.is-flip svg { transform: scaleX(-1); }
.rl-king.is-instant, .rl-float.is-instant, .rl-crate.is-instant { transition: none; }
.rl-king.gk-shake { animation: gk-shake .24s; }
.rl-yard--won .rl-king svg { animation: rl-bob .5s ease-in-out infinite; }
.rl .gk-win { position: absolute; top: auto; }
@media (prefers-reduced-motion: reduce) { .rl-king, .rl-crate, .rl-cookie, .rl-float, .rl-mirror svg, .rl-door-leaf { transition: none; } .rl-lift-pad, .rl-yard--won .rl-king svg, .rl-yard--won .rl-goal-arch { animation: none; } }