/* Tilt component styles — Midnight Lounge. Every value comes from tokens.css. */
.ph{font-family:var(--font-sans);color:var(--text);-webkit-font-smoothing:antialiased}
.ph-label{font-family:var(--font-mono);font-size:11px;line-height:14px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;color:var(--subtle)}
.ph-num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.ph-foil{background:linear-gradient(135deg,var(--gold-bright) 0%,var(--gold) 45%,var(--gold-deep) 100%)}
.ph-foil-text{color:var(--gold);background:linear-gradient(135deg,var(--gold-bright) 0%,var(--gold) 45%,var(--gold-deep) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ph-hairline{height:1px;background:linear-gradient(90deg,transparent,var(--gold-deep) 25%,var(--gold) 50%,var(--gold-deep) 75%,transparent);opacity:.55}

/* Lockup (mark-led) — the foil tile leads; wordmark always Tilt: Til in text, the last t in gold, leaning 10deg */
.ph-logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.ph-logo img{width:42px;height:42px;filter:drop-shadow(0 6px 16px rgba(232,196,122,.35))}
.ph-logo b{font-family:var(--font-sans);font-weight:700;font-size:20px;line-height:1;letter-spacing:-.6px;color:var(--text)}
.ph-logo b em{display:inline-block;font-style:normal;color:var(--gold);transform:rotate(10deg);transform-origin:0 100%;margin-left:-.03em}
.ph-logo--xl img{width:110px;height:110px;filter:drop-shadow(0 16px 40px rgba(232,196,122,.4))}
.ph-logo--xl b{font-size:44px;letter-spacing:-1.5px}
.ph-logo small{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:1.6px;color:var(--subtle);margin-top:4px;font-weight:500}

/* Buttons — pills */
.ph-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 22px;border-radius:var(--radius-pill);border:1px solid transparent;font-family:var(--font-sans);font-size:15px;font-weight:600;letter-spacing:-.1px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .25s cubic-bezier(.34,1.56,.64,1),filter .2s,background .2s,border-color .2s,color .2s}
.ph-btn:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.ph-btn:active{transform:translateY(1px) scale(.99)}
.ph-btn--gold{color:var(--on-gold);background:linear-gradient(135deg,var(--gold-bright) 0%,var(--gold) 45%,var(--gold-deep) 100%);box-shadow:var(--shadow-glow-gold)}
.ph-btn--gold:hover{filter:brightness(1.06);transform:translateY(-1px)}
.ph-btn--teal{background:var(--teal);color:var(--on-teal)}
.ph-btn--teal:hover{background:var(--teal-deep)}
.ph-btn--ghost{background:rgba(244,239,230,.03);color:var(--text);border-color:var(--line-strong)}
.ph-btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.ph-btn--lg{height:54px;padding:0 30px;font-size:16px}
.ph-btn--sm{height:34px;padding:0 14px;font-size:13px}
.ph-btn[disabled]{background:var(--input);color:var(--subtle);border-color:var(--line);box-shadow:none;filter:none;cursor:not-allowed}
.ph-iconbtn{width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--input);color:var(--muted);display:inline-grid;place-items:center;cursor:pointer}
.ph-iconbtn:hover{border-color:var(--gold);color:var(--gold)}

/* Balance pill */
.ph-balance{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 6px 0 16px;border-radius:var(--radius-pill);background:var(--input);border:1px solid var(--line)}
.ph-balance .amt{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:16px;font-weight:500;color:var(--gold)}
.ph-balance .amt b{font-weight:400;font-size:11px;color:var(--subtle);margin-left:5px;letter-spacing:1px}
.ph-balance .ph-btn{height:30px;padding:0 14px;font-size:13px}
.ph-balance--game .amt{color:var(--teal)}
.ph-delta{font-family:var(--font-mono);font-size:12px}
.ph-delta.up{color:var(--green)}.ph-delta.down{color:var(--red)}

/* Chips & badges */
.ph-chip{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12px;line-height:16px;font-weight:500;padding:4px 10px;border-radius:var(--radius-pill);border:1px solid var(--line);color:var(--muted);background:rgba(244,239,230,.02);animation:ph-chip-in .3s ease}
.ph-chip--win{color:var(--green);border-color:rgba(74,222,128,.4);background:var(--wash-green)}
.ph-chip--lose{color:var(--red);border-color:rgba(255,84,112,.4);background:var(--wash-red)}
.ph-chip--gold{color:var(--gold);border-color:rgba(232,196,122,.4);background:var(--wash-gold)}
@keyframes ph-chip-in{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.ph-strip{display:flex;gap:8px;align-items:center;padding:10px 18px;border-top:1px solid var(--line);min-height:44px;overflow:hidden}
.ph-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:1.6px;font-weight:500;color:var(--green);border:1px solid rgba(74,222,128,.35);border-radius:var(--radius-pill);padding:3px 10px;background:var(--wash-green)}
.ph-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:ph-blink 2.4s ease infinite}
@keyframes ph-blink{50%{opacity:.35}}

/* Cards */
.ph-card{background:linear-gradient(180deg,var(--panel-raised),var(--panel));border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden}
.ph-game{display:block;text-decoration:none;color:var(--text);transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .25s,box-shadow .25s}
.ph-game:hover{transform:translateY(-6px);border-color:var(--accent,var(--gold));box-shadow:var(--shadow-lift),0 0 40px var(--glow,var(--glow-gold))}
.ph-game .art{position:relative;height:200px;overflow:hidden;background:radial-gradient(90% 80% at 50% 100%,var(--glow,var(--glow-gold)),transparent 70%),var(--stage)}
.ph-game .art canvas,.ph-game .art svg{position:absolute;inset:0;width:100%;height:100%}
.ph-game .art .vig{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,var(--scrim) 100%)}
.ph-game .art .tag{position:absolute;top:14px;left:16px;z-index:2}
.ph-game .art .ph-live{position:absolute;top:12px;right:14px;z-index:2}
.ph-game .info{padding:18px 20px 20px;border-top:1px solid var(--line)}
.ph-game h3{font-family:var(--font-sans);font-size:18px;line-height:24px;font-weight:600;letter-spacing:-.2px;color:var(--text);margin:0;display:flex;align-items:center;gap:8px}
.ph-game h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent,var(--gold));box-shadow:0 0 10px var(--accent,var(--gold))}
.ph-game p{font-size:14px;line-height:22px;color:var(--muted);margin:6px 0 0}
.ph-game .meta{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.ph-game .go{font-size:13px;font-weight:600;color:var(--subtle);transition:color .2s}
.ph-game:hover .go{color:var(--accent,var(--gold))}

/* Live bets table — fintech-grade figures */
.ph-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.ph-table th{font-family:var(--font-mono);font-size:11px;letter-spacing:1.6px;font-weight:500;text-transform:uppercase;color:var(--subtle);text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
.ph-table td{padding:14px 16px;border-bottom:1px solid var(--line);color:var(--muted)}
.ph-table tr:hover td{background:var(--panel-hover)}
.ph-table .n{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text)}
.ph-table .win{color:var(--green)}.ph-table .loss{color:var(--red)}
.ph-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:var(--radius-pill);background:var(--input);border:1px solid var(--line)}
.ph-tabs button{height:32px;padding:0 14px;border-radius:var(--radius-pill);border:0;background:none;color:var(--muted);font:600 13px var(--font-sans);cursor:pointer}
.ph-tabs button[aria-selected="true"]{background:var(--panel-hover);color:var(--text);box-shadow:inset 0 1px 0 var(--sheen)}

/* Multiplier */
.ph-mult{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:96px;line-height:1;font-weight:600;letter-spacing:-2px;color:var(--text);text-shadow:0 2px 30px rgba(0,0,0,.8)}
.ph-mult .x{font-size:.42em;vertical-align:.5em;opacity:.7}
.ph-mult--warn{color:var(--gold);text-shadow:0 0 40px rgba(232,196,122,.45),0 2px 30px rgba(0,0,0,.8)}
.ph-mult--hot{color:var(--red);text-shadow:0 0 40px rgba(255,84,112,.5),0 2px 30px rgba(0,0,0,.8)}

/* Fair panel */
.ph-fair{padding:20px}
.ph-fair .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.ph-fair .seal{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;letter-spacing:1.6px;color:var(--teal)}
.ph-fair dl{margin:0;display:grid;gap:8px}
.ph-fair .row{background:var(--input);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px}
.ph-fair dd{margin:4px 0 0;font-family:var(--font-mono);font-size:12px;line-height:18px;color:var(--text);word-break:break-all}
.ph-fair dd.res{color:var(--gold)}

/* Bet input */
.ph-field{display:grid;gap:6px}
.ph-input{display:flex;align-items:center;height:46px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--input);padding:0 6px 0 14px;gap:6px}
.ph-input:focus-within{border-color:var(--teal);box-shadow:var(--shadow-glow-teal)}
.ph-input input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:16px}
.ph-input .unit{font-family:var(--font-mono);font-size:11px;color:var(--subtle);letter-spacing:1px}
.ph-input button{height:32px;min-width:38px;border-radius:8px;border:1px solid var(--line);background:var(--panel-raised);color:var(--muted);font-family:var(--font-mono);font-size:12px;cursor:pointer}
.ph-input button:hover{border-color:var(--gold);color:var(--gold)}

/* Banner */
.ph-banner{display:flex;gap:10px;align-items:flex-start;border:1px solid rgba(255,84,112,.5);border-radius:var(--radius-md);background:var(--wash-red);color:var(--text);padding:12px 16px;font-size:14px;line-height:22px}
.ph-banner strong{color:var(--red);font-family:var(--font-mono);font-size:11px;letter-spacing:1.6px;padding-top:3px;white-space:nowrap}

/* Win burst — the fun moment */
.ph-burst{position:relative;display:inline-block}
.ph-burst i{position:absolute;left:50%;top:50%;width:6px;height:10px;border-radius:2px;background:var(--gold);opacity:0;animation:ph-confetti 1.1s cubic-bezier(.2,.7,.3,1) forwards}
.ph-burst i:nth-child(3n){background:var(--gold-bright);width:5px;height:5px;border-radius:50%}
.ph-burst i:nth-child(4n){background:var(--teal)}
@keyframes ph-confetti{0%{opacity:1;transform:translate(-50%,-50%) rotate(0)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r))}}
.ph-shimmer{position:relative;overflow:hidden}
.ph-shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,246,220,.45) 50%,transparent 65%);transform:translateX(-100%);animation:ph-shine 1.6s ease .2s 1}
@keyframes ph-shine{to{transform:translateX(100%)}}

@media (prefers-reduced-motion:reduce){.ph-btn,.ph-game{transition:none}.ph-game:hover{transform:none}.ph-chip,.ph-live::before,.ph-burst i,.ph-shimmer::after{animation:none}}