/* Shared, local visual layer. Room colours continue to control the table. */
:root { --muted:#b3c1b9; --soft:#ced6cc; --line:#3c4c44; --gold:#edcc91; }
body { background:radial-gradient(ellipse at 10% 0,var(--room-glow,#294536),transparent 48%),#0c1413; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at 100% 50%,#8f755508,transparent 65%); }
.topbar { position:sticky; top:0; z-index:6; background:#101a17fa; }
.top-inner { min-height:76px; }
.tabs { padding:5px; border-color:#4b61544d; background:#09120f; border-radius:14px; }
.tabs a { min-height:44px; border-radius:10px; transition:background .18s,color .18s; }
.tabs a[aria-current] { background:linear-gradient(145deg,#3b4c3c,#28372e); color:#f6d79f; box-shadow:inset 0 1px #b5c7b317,0 2px 8px #0002; }
.icon-button { min-width:44px; min-height:44px; border-radius:13px; }
.skip-link { position:fixed; z-index:30; top:-100px; left:12px; padding:12px 18px; border-radius:10px; background:#f5d8a0; color:#1e211c; font-weight:700; }
.skip-link:focus { top:12px; }
#app:focus { outline:0; }
.page-heading h1 { text-wrap:balance; }
.table-panel,.panel { box-shadow:0 12px 32px #0000001a,inset 0 1px #e7d8ba08; }
.stage { background:radial-gradient(ellipse at 50% 58%,var(--room-stage-glow),var(--room-stage-shadow) 87%); }
.stage::before { content:""; position:absolute; inset:0; z-index:-2; background:url('./assets/lounge.svg') center top / cover; opacity:.68; pointer-events:none; }
.stage::after { content:""; position:absolute; inset:-25%; z-index:-1; background:conic-gradient(from 175deg at 50% 2%,transparent 0deg,#f6dfb614 20deg,transparent 42deg,transparent 310deg,#d1c9a60f 335deg,transparent 360deg); pointer-events:none; transform-origin:50% 0; }
.felt { box-shadow:0 0 0 1px var(--rail-edge),0 17px 28px #0009,inset 0 0 38px #050e11,inset 0 3px 6px #d6ebd215; }
.seat { backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); background:color-mix(in srgb,var(--room-seat,#17221b) 92%,transparent); }
.seat.acting { border-color:#f1d296; box-shadow:0 0 0 2px #edcd8c22,0 0 22px #eec78c24; }
.pot { box-shadow:0 3px 12px #0005; border-color:#a4a27d; }
.pot strong { font-family:system-ui,sans-serif; font-size:20px; }
.pot .casino-chips { width:34px; }
.pot .casino-chip { width:14px; height:14px; }
.card.face { position:relative; box-shadow:0 4px 7px #0005,inset 0 1px #fff; }
.hero-cards { gap:8px; }
.hero-cards .card { width:58px; height:78px; font-size:29px; }
.hero-cards .card span:nth-child(2) { font-size:25px; }
.hero-cards .card:first-child { rotate:-3deg; }
.hero-cards .card:last-child { rotate:3deg; }
.hero-id { background:#12241dea; border-color:#82937b; border-radius:9px; }
.hero-active .card { box-shadow:0 7px 12px #0005,0 0 17px #f0cb8d38; }
.turn-status { min-height:30px; font-size:13px; }
.turn-status.your-turn { background:linear-gradient(135deg,#544c30,#293b2b); color:#fff1c4; }
.action-dock { background:linear-gradient(165deg,#1e2b22,#17231e); }
.button { border-radius:12px; min-height:48px; transition:filter .16s,background .16s,transform .16s; }
.button.primary { background:linear-gradient(145deg,#f7deab,#d8b778); box-shadow:inset 0 1px #fff6,0 4px 12px #0003; }
.button.secondary,.button.fold { background:linear-gradient(145deg,#29382e,#202d26); border-color:#526555; }
.button.call { background:linear-gradient(145deg,#3c6850,#284f3e); border-color:#83a78e; }
.button:disabled { opacity:.5; }
.move-button { flex-direction:column; gap:3px; min-height:57px; }
.move-button > span { white-space:nowrap; }
.move-term { font-size:10px; font-weight:550; opacity:.8; }
.raise-line { gap:10px; }
.raise-line input[type=number],.mini-button { min-height:44px; border-radius:10px; }
.text-button,.odds-details { min-height:44px; }
.odds-details { font-size:11px; }
.course-hero { position:relative; background:radial-gradient(ellipse at 3% 0,#5c765238,transparent 70%),linear-gradient(120deg,#263d30,#17261f); border-color:#57705a; }
.course-main h2 { font-size:36px; letter-spacing:-.035em; }
.course-main p { max-width:50ch; }
.lesson-duration { display:inline-flex; align-items:center; gap:6px; color:var(--gold); font-size:12px; margin:3px 0 9px; }
.course-progress { background:#07100b1a; }
.progress-number strong { font-family:system-ui,sans-serif; font-weight:650; letter-spacing:-.06em; }
.study-path { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); list-style:none; gap:10px; padding:0; margin:18px 0 22px; }
.study-path li { display:flex; align-items:center; gap:10px; min-width:0; padding:13px; border:1px solid #3c5145; border-radius:12px; background:#16231d; color:#aebdb2; }
.study-path li > span { display:grid; place-items:center; width:31px; height:31px; flex:none; border:1px solid #506353; border-radius:50%; font-size:13px; font-weight:700; }
.study-path li.current { border-color:#a28f65; background:linear-gradient(145deg,#344631,#213327); color:#f6e5c5; }
.study-path li.current > span { border-color:#edcd91; background:#dec18a; color:#243024; }
.study-path li.complete > span { background:#254c38; color:#b5e8b8; }
.study-path small,.study-path strong { display:block; }
.study-path small { font-size:9px; letter-spacing:.1em; margin-bottom:4px; }
.study-path strong { font-size:14px; line-height:1.25; }
.lesson-row { min-height:76px; border-radius:12px; background:linear-gradient(125deg,#203127,#18271f); }
.lesson-name strong { line-height:1.35; }
.lesson-section p { line-height:1.8; }
.quiz-option { min-height:56px; border-radius:12px; padding:12px; line-height:1.45; }
.feedback { border-radius:12px; }
.online-mode { border-radius:12px; }
.online-mode button { min-height:44px; border-radius:9px; }
.online-avatar-picker label > span { width:44px; height:44px; border-radius:12px; }
.online-fields input,.online-fields select { min-height:48px; border-radius:10px; }
.online-tool-actions .button { min-height:44px; }
.online-voice { border-color:#506454; }
body[data-motion=true] .stage::after { animation:salon-light 18s ease-in-out infinite alternate; }
body[data-motion=true] .seat.acting { animation:turn-glow 2.8s ease-in-out infinite; }
body[data-motion=true] .pot .casino-chip { animation:chip-glint 2.2s ease-in-out infinite; }
body[data-motion=true] .pot .casino-chip:nth-child(2) { animation-delay:.22s; }
body[data-motion=true] .pot .casino-chip:nth-child(3) { animation-delay:.44s; }
body[data-motion=true] .learn-shell .page-heading,body[data-motion=true] .course-hero { animation:page-arrival .38s ease-out; }
body[data-motion=false] *,body[data-motion=false] *::before,body[data-motion=false] *::after { animation:none!important; transition:none!important; }
@keyframes salon-light { from{transform:rotate(-5deg);opacity:.6} to{transform:rotate(5deg);opacity:1} }
@keyframes turn-glow { 50%{box-shadow:0 0 0 2px #edcd8c35,0 0 24px #eec78c38} }
@keyframes chip-glint { 50%{filter:brightness(1.35);box-shadow:0 0 10px #f4d28b55,inset 0 0 0 2px #12130f} }
@keyframes page-arrival { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@media(max-width:730px) {
  .top-inner { min-height:62px; }
  .brand small { font-size:8px; }
  .tabs { border-radius:0; gap:6px; padding-top:7px; padding-bottom:calc(7px + env(safe-area-inset-bottom)); background:#111e19f7; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
  .tabs a { flex-direction:column; gap:4px; min-height:49px; font-size:11px; padding:5px 10px; border-radius:12px; }
  .nav-icon svg { width:21px; height:21px; }
  .shell { padding-bottom:calc(86px + env(safe-area-inset-bottom)); }
  .game-shell { padding-top:14px; }
  .game-shell h1 { font-size:37px; }
  .stage { height:371px; }
  .hero-cards .card { width:54px; height:70px; }
  .hero { bottom:10px; }
  .hero-id { margin-top:8px; }
  .community { top:112px; }
  .board .card { height:57px; }
  .action-dock { padding:10px 9px; }
  .action-line { gap:7px; }
  .action-line .button { padding-inline:5px; font-size:13px; }
  .help-button { font-size:12px; min-height:40px; }
  .course-main h2 { font-size:31px; }
  .course-main p { font-size:15px; }
  .study-path { gap:6px; margin-block:13px 18px; }
  .study-path li { display:grid; align-content:start; gap:8px; padding:10px; }
  .study-path strong { font-size:12px; }
  .study-path small { font-size:8px; }
  .lesson-section p { font-size:16px; }
  .online-tool-actions .button { min-height:44px; }
}
@media(max-width:730px) and (max-height:760px) {
  .stage { height:316px; }
  .community { top:96px; }
  .hero-cards .card { width:49px; height:59px; }
  .hero-id { margin-top:4px; }
  .turn-status { min-height:26px; }
  .board .card { height:46px; }
  .game-shell h1 { font-size:32px; }
  .game-shell .page-heading { margin-bottom:10px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }