/* PHONE ROULETTE on the shared engine: an art deco casino. Emerald felt, gold linework, red and black chips, a bright
   white ball of light. Limelight for the deco titles, Josefin Sans for reading. Scoped to html[data-game="pr"] and .pr
   (pr-prefixed classes). Every phone lies flat on the table, so screens stay dark felt with one bright ball. */
@import url('https://fonts.googleapis.com/css2?family=Limelight&family=Josefin+Sans:wght@500;600;700&display=swap');

html[data-game="pr"] {
  --felt: #0e4a2c; --felt-d: #08301c; --gold: #d8b25a; --gold-d: #9b7a2c; --cream: #f5ecd6; --red: #c3262e; --black: #121212;
  --deco: 'Limelight', 'Georgia', serif; --sans: 'Josefin Sans', system-ui, sans-serif;
  --ink-2: #0b3b23; --ink-3: #114f30; --paper: #f5ecd6; --paper-2: #e7d7b2; --paper-ink: #121212;
  --pink: #c3262e; --pink-deep: #861a20; --blue: #1f6b4a; --blue-deep: #134a32; --yellow: #d8b25a; --yellow-deep: #9b7a2c;
  --orange: #d8b25a; --mint: #3fbf86; --good: #3fbf86; --bad: #c3262e;
  --display: 'Limelight', 'Georgia', serif;
  background: var(--felt-d);
}
html[data-game="pr"] body { background: url('/pr/art/felt.webp') center / cover no-repeat fixed, var(--felt-d); }
html[data-game="pr"] .studio { background: transparent; }
html[data-game="pr"] .h1, html[data-game="pr"] .h2, html[data-game="pr"] .h3, html[data-game="pr"] .display { font-family: var(--deco); font-weight: 400; text-transform: none; }
html[data-game="pr"] .btn { font-family: var(--sans); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
html[data-game="pr"] .pr-homelogo { display: flex; flex-direction: column; align-items: center; gap: 4px; }
html[data-game="pr"] .pr-homelogo img { width: min(34vw, 170px); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)); animation: prSpin 6s linear infinite; }
html[data-game="pr"] .pr-homelogo.tv img { width: min(16vw, 240px); }
html[data-game="pr"] .pr-lobbycard { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; }
html[data-game="pr"] .pr-lobby-art { width: 84px; grid-row: span 2; }
html[data-game="pr"] .pr-lobby-plan { font-weight: 700; margin-top: 4px; }
@keyframes prSpin { to { transform: rotate(360deg); } }

.pr-logo { display: flex; flex-direction: column; align-items: center; line-height: .9; font-family: 'Limelight', serif; }
.pr-logo span { display: block; color: #f5ecd6; text-shadow: 0 0 18px rgba(216, 178, 90, .55), 3px 3px 0 #000; }
.pr-l1 { font-size: clamp(40px, 13vw, 70px); letter-spacing: .12em; }
.pr-l2 { font-size: clamp(46px, 15vw, 84px); color: #d8b25a !important; }
.tv .pr-l1 { font-size: clamp(54px, 6vw, 100px); } .tv .pr-l2 { font-size: clamp(64px, 7vw, 120px); }
.pr-logo.small .pr-l1 { font-size: 34px; } .pr-logo.small .pr-l2 { font-size: 40px; }

.pr { --felt: #0e4a2c; --felt-d: #08301c; --gold: #d8b25a; --cream: #f5ecd6; --red: #c3262e; --deco: 'Limelight', serif; --sans: 'Josefin Sans', system-ui, sans-serif;
  font: 600 16px/1.35 var(--sans); color: var(--cream); }
.pr button { font: inherit; color: inherit; cursor: pointer; }
.pr button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.pr h2 { margin: 0; font: 400 28px/1.1 var(--deco); }
.pr-center { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.pr-col { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.pr-chipimg { width: min(40vw, 190px); filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .6)); animation: prDrop .8s cubic-bezier(.2, 1.4, .4, 1) both, prSpin 8s 1s linear infinite; }
@keyframes prDrop { from { transform: translateY(-120px) rotate(-180deg); opacity: 0; } }
.pr-tag { font: 400 20px var(--deco); color: var(--gold); border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); padding: 6px 18px; letter-spacing: .08em; }
.pr-card { width: min(100%, 560px); background: rgba(8, 48, 28, .92); border: 2px solid var(--gold); outline: 1px solid var(--gold); outline-offset: -8px; padding: 22px 18px; display: grid; gap: 14px; text-align: center; justify-items: center; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.tv .pr-card { width: min(70vw, 980px); }

.pr-play { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px calc(14px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overflow-x: hidden; }
.pr-head { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
.pr-spin { font: 400 18px var(--deco); color: var(--gold); letter-spacing: .04em; }
.pr-chips { display: inline-flex; align-items: center; gap: 6px; font: 700 20px var(--sans); }
.pr-chips img { width: 26px; height: 26px; }
.pr-timer { grid-column: 1 / -1; height: 5px; background: rgba(245, 236, 214, .15); border-radius: 3px; overflow: hidden; }
.pr-timer i { display: block; height: 100%; background: var(--gold); transform-origin: left; }
.pr-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; }
.pr-big { margin: 0; font: 400 clamp(26px, 8vw, 38px)/1.1 var(--deco); }
.pr-sub { margin: 0; font-weight: 600; opacity: .88; max-width: 34ch; }
.pr-strong { font-weight: 700; opacity: 1; color: var(--gold); }
.tv .pr-big { font-size: 64px; } .tv .pr-sub { font-size: 26px; max-width: 50ch; }

/* seating */
.pr-tapme { width: min(62vw, 260px); aspect-ratio: 1; border-radius: 50%; border: 4px solid var(--gold); background: radial-gradient(circle at 40% 35%, #e33a42, #8e161c); color: #fff !important; display: grid; place-content: center; gap: 4px; box-shadow: 0 0 40px rgba(216, 178, 90, .45), inset 0 -10px 20px rgba(0, 0, 0, .3); animation: prPulse 1.6s ease-in-out infinite; }
.pr-tapme b { font: 400 56px var(--deco); } .pr-tapme span { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
@keyframes prPulse { 50% { transform: scale(1.05); box-shadow: 0 0 70px rgba(216, 178, 90, .7); } }
.pr-seatno { font: 400 min(42vw, 200px)/1 var(--deco); color: var(--gold); text-shadow: 0 0 30px rgba(216, 178, 90, .6); }
.pr-order { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-weight: 700; opacity: .85; }
.pr-ghost { min-height: 46px; padding: 0 18px; border: 2px solid var(--gold); background: none; font-weight: 700; }

/* the ring of seats */
.pr-ring { position: relative; width: min(84vw, 360px); aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(216, 178, 90, .5); background: radial-gradient(circle, rgba(8, 48, 28, .2), rgba(8, 48, 28, .7)); }
.pr-ring.big { width: min(52vh, 520px); }
.tv [data-phase="land"] .pr-ring.big, .tv .pr-hit ~ .pr-ring.big { width: min(24vh, 240px); }
.pr-seat { position: absolute; transform: translate(-50%, -50%); min-width: 66px; max-width: 96px; padding: 6px 8px; border-radius: 12px; border: 2px solid var(--gold); background: #0b0b0b; color: var(--cream) !important; display: grid; justify-items: center; gap: 0; }
.pr-seat b { font: 400 22px var(--deco); color: var(--gold); line-height: 1; }
.pr-seat span { font-size: 12px; font-weight: 700; max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-seat.me { background: var(--red); }
.pr-seat.picked { outline: 4px solid #fff; outline-offset: 2px; transform: translate(-50%, -50%) scale(1.12); z-index: 2; }
.pr-seat.hit { background: #fff; color: #000 !important; animation: prHit .5s ease-in-out 3; }
.pr-seat[disabled] { cursor: default; }
.pr-ring.big .pr-seat { min-width: 110px; max-width: 150px; padding: 10px; } .pr-ring.big .pr-seat b { font-size: 34px; } .pr-ring.big .pr-seat span { font-size: 18px; max-width: 140px; }
@keyframes prHit { 50% { transform: translate(-50%, -50%) scale(1.25); } }
.pr-ball { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 6px rgba(255, 255, 255, .8); opacity: 0; pointer-events: none; z-index: 3; }
.pr-ball.on { opacity: 1; }
.pr-ring.big .pr-ball { width: 30px; height: 30px; margin: -15px 0 0 -15px; }

/* betting */
.pr-amounts { display: flex; gap: 12px; }
.pr-amt { position: relative; width: 74px; height: 74px; border: 0; background: none; padding: 0; }
.pr-amt img { width: 100%; height: 100%; }
.pr-amt b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 26px var(--deco); color: #fff; text-shadow: 0 2px 0 #000; }
.pr-amt.on { filter: drop-shadow(0 0 10px #fff); transform: translateY(-6px); }
.pr-amt[disabled] { opacity: .3; }

/* the roll: the phone is one pocket of felt with the ball crossing it */
.pr-felt { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding-bottom: 150px; border-radius: 22px; transition: box-shadow .2s, background .2s; }
.pr-felt.coming { box-shadow: inset 0 0 60px rgba(255, 255, 255, .25); }
.pr-felt.here { box-shadow: inset 0 0 90px rgba(255, 255, 255, .45), 0 0 0 3px var(--gold); background: rgba(255, 255, 255, .04); }
.pr-mini .pr-ring { width: min(46vw, 190px); } .pr-mini .pr-seat { min-width: 34px; padding: 2px 4px; } .pr-mini .pr-seat span { display: none; } .pr-mini .pr-seat b { font-size: 15px; }
.pr-track { position: relative; width: 100%; height: 140px; }
.pr-bigball { position: absolute; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #f2f2f2 40%, #c9c9c9); box-shadow: 0 0 40px 18px rgba(255, 255, 255, .55); opacity: 0; transition: opacity .12s; }
.pr-bigball.on { opacity: 1; }
.pr-rollmsg { margin: 0; font: 400 clamp(24px, 7vw, 34px) var(--deco); color: var(--gold); text-align: center; }
.pr-pushlog { margin: 0; min-height: 22px; font-weight: 700; color: #ffd36b; }
.pr-pushlog.pop { animation: prPop .4s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes prPop { from { transform: scale(1.5); } }
.pr-myseat { font: 400 18px var(--deco); opacity: .6; }
.pr-push { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(84vw, 360px); min-height: 110px; border-radius: 28px; border: 4px solid #fff; background: radial-gradient(circle at 40% 30%, #ff4a52, #a2141b); color: #fff !important; display: grid; place-content: center; box-shadow: 0 0 50px rgba(255, 74, 82, .7); z-index: 4; animation: prPulse .7s ease-in-out infinite; }
.pr-push b { font: 400 48px/1 var(--deco); } .pr-push span { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pr-push[disabled] { filter: grayscale(.8); opacity: .5; animation: none; }
.pr-push[hidden] { display: none; }
.pr-push:active { transform: translateX(-50%) scale(.95); }

/* landing */
.pr-hit { display: grid; gap: 2px; justify-items: center; padding: 12px 26px; border: 3px solid var(--gold); background: #0b0b0b; animation: prPop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.pr-hit b { font: 400 64px/1 var(--deco); color: var(--red); text-shadow: 0 0 20px rgba(195, 38, 46, .6); }
.pr-hit span { font-weight: 700; font-size: 20px; }
.pr-hit.me { background: var(--red); } .pr-hit.me b { color: #fff; }
.tv .pr-hit b { font-size: 120px; } .tv .pr-hit span { font-size: 36px; }
.pr-drink { display: grid; gap: 2px; padding: 12px 22px; background: var(--red); border: 4px solid #fff; animation: prPop .5s .4s cubic-bezier(.2, 1.6, .4, 1) both; }
.pr-drink b { font: 400 48px/1 var(--deco); }
.pr-drink small, .pr-drinklist small { font-weight: 700; color: #ffd36b; font-size: 17px; }
.pr-drinklist { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; justify-content: center; padding: 8px 18px; background: var(--red); border: 2px solid #fff; font-size: 20px; }
.tv .pr-drinklist { font-size: 34px; }
.pr-win { display: inline-flex; align-items: center; gap: 8px; font: 400 30px var(--deco); color: var(--gold); animation: prPop .5s .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.pr-win img { width: 34px; }
.pr-winners { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-weight: 700; color: var(--gold); }
.pr-nextbtn { min-height: 56px; width: min(100%, 420px); border: 2px solid var(--gold); background: var(--gold); color: #121212 !important; font: 400 24px var(--deco) !important; box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }
.pr-nextbtn[disabled] { opacity: .55; }
.pr-lock-s { display: block; font: 700 13px var(--sans); }
.pr-lock-s:empty { display: none; }
.pr-wait-s { margin: 0; font-weight: 700; opacity: .8; }

/* the end */
.pr-bigh { font: 400 44px var(--deco) !important; color: var(--gold); }
.pr-board { display: grid; gap: 6px; width: min(100%, 420px); }
.pr-row { display: grid; grid-template-columns: 1fr auto 26px; gap: 8px; align-items: center; padding: 6px 12px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(216, 178, 90, .4); font-weight: 700; font-size: 18px; text-align: left; }
.pr-row.me { border-color: var(--gold); color: var(--gold); }
.pr-row img { width: 24px; }
.pr-awards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; width: min(100%, 640px); }
.pr-award { display: grid; gap: 2px; padding: 10px; border: 1px solid var(--gold); background: rgba(0, 0, 0, .35); animation: prPop .5s cubic-bezier(.2, 1.5, .4, 1) both; }
.pr-award b { font: 400 18px var(--deco); color: var(--gold); }
.pr-table { width: 100%; border-collapse: collapse; font-weight: 700; }
.pr-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; opacity: .7; text-align: right; }
.pr-table td { padding: 5px 4px; border-top: 1px solid rgba(216, 178, 90, .3); text-align: right; }
.pr-table td:first-child, .pr-table th:first-child { text-align: left; }
.pr-table tr.me td { color: var(--gold); }
.pr-awardline { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 14px; }
.pr-btns { display: grid; gap: 10px; width: 100%; justify-items: center; }
.pr-play.tv { padding: 3vh 4vw; } .tv .pr-spin { font-size: 32px; }
@media (prefers-reduced-motion: reduce) { .pr * { animation: none !important; } }