/* Player site (www): big, thumb-friendly, one clear action */
.p-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px}
.p-hero{position:relative;overflow:hidden;padding-block:56px 72px}
.p-hero::before{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg at 50% 38%,rgba(242,181,43,.08) 0deg 6deg,rgba(0,0,0,0) 6deg 12deg);pointer-events:none}
.p-hero .wrap{position:relative}
.p-logo{width:min(300px,72vw);height:auto}
.p-hero h1{font-size:clamp(44px,9vw,84px)}
.btn-play{display:inline-flex;align-items:center;justify-content:center;min-height:84px;padding:0 clamp(40px,10vw,84px);background:var(--gold);color:var(--ink);font:400 clamp(36px,8vw,56px)/1 var(--display);letter-spacing:.05em;text-decoration:none;border:3px solid var(--ink);box-shadow:0 7px 0 #9A6D00;transition:transform .12s,box-shadow .12s}
.btn-play:hover{background:#FFC94D}
.btn-play:active{transform:translateY(5px);box-shadow:0 2px 0 #9A6D00}
.band-ink .btn-play{border-color:var(--gold)}
.p-title{padding-block:48px 40px}
.p-title h1{font-size:clamp(38px,7vw,72px)}
.p-title .lead{margin-top:14px;color:#E9E2D2}
.p-text{max-width:760px}
.big-p{font-size:clamp(22px,3.4vw,30px);line-height:1.4;font-weight:600;margin-bottom:18px}
/* how-to-play steps: a real sequence */
.hsteps{list-style:none;margin:0;padding:0;counter-reset:h;display:grid;gap:56px}
.hstep{counter-increment:h;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;border-top:4px solid var(--ink);padding-top:28px}
.hstep:nth-child(even) .vis{order:-1}
.hstep .n::before{content:counter(h);display:block;font-family:var(--display);font-size:72px;line-height:1;color:var(--gold-deep);margin-bottom:6px}
.hstep h2{font-size:clamp(30px,4vw,44px);margin-bottom:12px}
.hstep p{font-size:19px;color:var(--muted);max-width:42ch;margin:0}
.hstep .vis{display:flex;justify-content:center}
.bcard{width:min(420px,100%);height:auto;box-shadow:0 10px 28px rgba(20,17,13,.28);border-radius:14px}
/* phone illustrations */
.phone{width:210px;aspect-ratio:9/18.5;border:7px solid #000;border-radius:30px;background:var(--ink);box-shadow:0 10px 28px rgba(20,17,13,.35);overflow:hidden}
.scr{height:100%;padding:18px 14px;display:flex;flex-direction:column;gap:11px;background:linear-gradient(180deg,#2B1B12,#14110D);color:#F6EEDC}
.p-top{font:400 17px/1 var(--display);letter-spacing:.06em;color:var(--gold);text-align:center;padding:10px 0 6px}
.scr .fld{background:#fff;color:#14110D;padding:7px 10px;border-radius:6px}
.scr .fld i{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.1em;color:#5E564A}
.scr .fld b{font:600 15px 'IBM Plex Mono',ui-monospace,monospace}
.scr .go{margin-top:auto;background:var(--gold);color:var(--ink);text-align:center;font:400 22px/1 var(--display);letter-spacing:.05em;padding:12px 0;border-radius:6px;text-transform:uppercase}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:9px;flex:1;align-content:start}
.tile{aspect-ratio:1;border-radius:10px;display:grid;place-items:center;font-size:28px;color:rgba(255,255,255,.85)}
.t0{background:linear-gradient(135deg,#C8281F,#7A130E)}.t1{background:linear-gradient(135deg,#F2B52B,#9A6D00)}.t2{background:linear-gradient(135deg,#2F8F5B,#175236)}
.t3{background:linear-gradient(135deg,#3A6FD8,#1B3A80)}.t4{background:linear-gradient(135deg,#9B4FD1,#55228A)}.t5{background:linear-gradient(135deg,#E8742A,#8F3B0A)}
.tile.pick{outline:3px solid var(--gold);outline-offset:2px}
.bal{font:400 44px/1 var(--display);text-align:center;color:#fff;letter-spacing:.03em}
.reel{display:flex;gap:7px;justify-content:center;margin-top:8px}
.reel span{width:54px;height:70px;background:#fff;color:var(--red);font:400 46px/70px var(--display);text-align:center;border-radius:6px}
@media (max-width:760px){
  .hstep{grid-template-columns:minmax(0,1fr);gap:22px}
  .hstep:nth-child(even) .vis{order:0}
  .btn-play{width:100%}
}
@media (max-width:560px){
  .nav{flex-wrap:wrap;row-gap:4px;position:relative}
  .nav-right{flex-wrap:wrap;gap:0 16px;width:100%;justify-content:space-between}
  .nav-right .link{display:inline-block;font-size:14px;color:var(--on-ink);padding:10px 0}
  .nav-right .btn{position:absolute;top:18px;right:max(16px,env(safe-area-inset-right,0px));width:auto;min-height:44px}
}

.pform{display:grid;gap:8px;max-width:520px}
.pform label{font-weight:700;font-size:17px;margin-top:8px}
.pform input{font:500 20px var(--body);padding:14px;border:2px solid var(--ink);background:#fff;color:var(--text);min-height:54px;width:100%}
.pform input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.ferr{color:#B3261E;font-weight:600;min-height:1.4em;margin:6px 0 0}
.pform .btn-play{margin-top:12px}