/* r28 game-native action surfaces. Visual-only layer; gameplay and accepted art remain unchanged. */
:root { --vv-parchment:#f1d79e; --vv-parchment-light:#fff3ca; --vv-parchment-shadow:#c89d5e; --vv-wood:#70401f; --vv-wood-dark:#2c170d; --vv-amber:#efb64f; --vv-navy:#132d50; --vv-ink-warm:#352416; }
.play-panel{background:linear-gradient(145deg,rgba(17,42,67,.96),rgba(8,25,43,.98));border:1px solid #976d32;border-radius:18px;box-shadow:0 20px 46px rgba(3,13,23,.32),inset 0 0 0 2px rgba(241,182,79,.12)}
.play-panel .current-player-card{position:relative;overflow:hidden;color:#fff7df;background:linear-gradient(90deg,transparent 0 72%,rgba(239,182,79,.09)),repeating-linear-gradient(4deg,rgba(255,255,255,.025) 0 1px,transparent 1px 8px),linear-gradient(145deg,#1a3b61,#102a49);border:1px solid #a87832;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,244,207,.12),0 5px 0 #071a2e}
.play-panel .current-player-card::after{content:"";position:absolute;inset:6px;border:1px solid rgba(255,215,130,.18);border-radius:8px;pointer-events:none}.play-panel .current-player-card>*{position:relative;z-index:1}.play-panel .current-player-card .eyebrow{color:#f2c873}.play-panel .current-player-card p:last-child{color:#d8e2ea}
.play-panel .action-card,.play-panel .spinner-card{position:relative;isolation:isolate;overflow:hidden;color:var(--vv-ink-warm);background:radial-gradient(circle at 11px 11px,#7d5228 0 2px,#d8ae6b 2.5px 4px,transparent 4.5px),radial-gradient(circle at calc(100% - 11px) 11px,#7d5228 0 2px,#d8ae6b 2.5px 4px,transparent 4.5px),radial-gradient(circle at 11px calc(100% - 11px),#7d5228 0 2px,#d8ae6b 2.5px 4px,transparent 4.5px),radial-gradient(circle at calc(100% - 11px) calc(100% - 11px),#7d5228 0 2px,#d8ae6b 2.5px 4px,transparent 4.5px),repeating-linear-gradient(2deg,rgba(100,62,25,.025) 0 1px,transparent 1px 6px),linear-gradient(145deg,var(--vv-parchment-light),var(--vv-parchment) 68%,#dfbb7c);border:1px solid #8c5a29;border-radius:14px;padding:1.15rem 1.05rem 1.2rem;box-shadow:inset 0 0 0 2px rgba(255,248,219,.6),inset 0 -7px 12px rgba(111,64,27,.1),0 6px 0 #321b0e,0 12px 22px rgba(0,0,0,.25)}
.play-panel .action-card::before,.play-panel .spinner-card::before{content:"";position:absolute;z-index:-1;left:2.6rem;right:2.6rem;top:0;height:4px;background:repeating-linear-gradient(90deg,var(--vv-navy) 0 18px,var(--vv-amber) 18px 24px);border-radius:0 0 5px 5px;box-shadow:0 1px rgba(255,255,255,.4)}
.play-panel .action-card h3,.play-panel .spinner-copy h3{color:#432b17;font-family:Georgia,"Times New Roman",serif;font-size:1.22rem;line-height:1.2;letter-spacing:-.01em}.play-panel .step-label{color:#67451f;font-size:.72rem;letter-spacing:.13em}.play-panel .step-label span{width:29px;height:29px;color:#fff1cb;background:radial-gradient(circle at 35% 27%,#31597f,var(--vv-navy) 58%,#091a2d 100%);border:1px solid #071522;border-radius:50%;box-shadow:inset 1px 2px 2px rgba(255,255,255,.25),inset -2px -2px 3px rgba(0,0,0,.45),0 2px 0 #8e612c}
.play-panel .pill{min-height:26px;color:#4f351c;background:rgba(255,247,217,.58);border:1px solid rgba(120,78,35,.35);border-radius:5px}.play-panel .choice-list,.play-panel .ordering-list{gap:.62rem}.play-panel .choice,.play-panel .order-row{min-height:50px;color:#342418;background:rgba(255,249,225,.66);border:1px solid #997041;border-left:5px solid #76502a;border-radius:7px;box-shadow:inset 0 1px rgba(255,255,255,.65),0 2px 0 rgba(91,51,22,.18)}.play-panel .choice:hover{background:rgba(255,252,235,.92)}.play-panel .choice:has(input:checked){background:#fff2c4;border-color:#6b451f;border-left-color:var(--vv-navy);box-shadow:inset 0 0 0 1px #d19a3d,0 3px 0 rgba(73,41,18,.26)}.play-panel .choice input{width:20px;height:20px;accent-color:var(--vv-navy)}.play-panel .order-row output{color:#fff1cb;background:var(--vv-navy)}.play-panel .order-controls button{color:#fff1cb;background:var(--vv-navy);border:1px solid #091a2d}
.play-panel .primary-button,.handoff-card .primary-button{min-height:50px;color:#2b190d;background:repeating-linear-gradient(5deg,rgba(91,47,16,.08) 0 1px,transparent 1px 7px),linear-gradient(180deg,#ffd983 0,var(--vv-amber) 58%,#c98225 100%);border:1px solid #6b3c15;border-radius:8px;box-shadow:inset 0 2px rgba(255,247,200,.7),inset 0 -2px rgba(107,54,15,.22),0 5px 0 #49250f,0 8px 13px rgba(50,25,8,.26);font-weight:800;letter-spacing:.02em;text-shadow:0 1px rgba(255,241,195,.72)}.play-panel .primary-button:hover,.handoff-card .primary-button:hover{filter:saturate(1.08) brightness(1.04);transform:translateY(-1px)}.play-panel .primary-button:active,.handoff-card .primary-button:active{transform:translateY(3px);box-shadow:inset 0 2px rgba(255,247,200,.55),0 2px 0 #49250f}.play-panel .primary-button:disabled{color:#77664d;background:linear-gradient(180deg,#ddd0ae,#b9aa87);border-color:#71664f;box-shadow:inset 0 1px rgba(255,255,255,.5),0 3px 0 #5a513e;text-shadow:none}
.play-panel .feedback-banner{color:#184a35;background:rgba(224,240,218,.82);border:1px solid #528262;border-left:6px solid #2f7656;border-radius:7px;box-shadow:inset 0 1px rgba(255,255,255,.55)}.play-panel .feedback-banner.incorrect{color:#702e25;background:rgba(246,221,205,.85);border-color:#a35a4e;border-left-color:#963f33}.play-panel .feedback-icon{box-shadow:inset 0 1px rgba(255,255,255,.25),0 2px 0 rgba(48,28,15,.25)}.play-panel .scripture-card,.play-panel .optional-note{background:rgba(255,249,226,.72);border-color:#a8742e;box-shadow:inset 0 1px rgba(255,255,255,.65)}
.play-panel .spinner-card{grid-template-columns:1fr 132px}.play-panel .spinner-copy p:last-child{color:#674f36}.play-panel .spinner{width:132px;height:132px;filter:drop-shadow(0 5px 3px rgba(55,29,13,.28))}.play-panel .spinner-number.selected{color:#04536b}
.handoff-card{color:var(--vv-ink-warm);background:repeating-linear-gradient(2deg,rgba(100,62,25,.025) 0 1px,transparent 1px 6px),linear-gradient(145deg,var(--vv-parchment-light),var(--vv-parchment));border:1px solid #8c5a29;border-radius:15px;box-shadow:inset 0 0 0 3px rgba(255,248,219,.65),0 8px 0 #321b0e,0 20px 42px rgba(0,0,0,.28)}
@media(max-width:720px){.play-panel{border-radius:14px;padding:.78rem}.play-panel .action-card,.play-panel .spinner-card{padding:1rem .9rem 1.08rem}.play-panel .primary-button{width:100%}.play-panel .spinner-card{grid-template-columns:minmax(0,1fr) 116px}.play-panel .spinner{width:116px;height:116px}}
@media(prefers-reduced-motion:reduce){.play-panel .primary-button{transition:none}}
body.high-contrast .play-panel .action-card,body.high-contrast .play-panel .spinner-card,body.high-contrast .play-panel .choice{border-width:2px}