:root { --ink:#03111f; --panel:rgba(6,24,42,.86); --line:rgba(166,222,255,.2); --white:#f4fbff; --muted:#90a8bc; --pink:#ff263f; --red:#ff263f; --yellow:#ffd329; --green:#2df08a; --blue:#0b9dff; --violet:#04d9ff; --arcade-background:url("assets/ono-arcade-symbol-background.png"); }
* { box-sizing:border-box; }
main[hidden] { display:none !important; }
html { background:var(--ink); }
body { min-width:320px; min-height:100vh; margin:0; overflow-x:hidden; color:var(--white); background:linear-gradient(90deg,rgba(8,4,23,.6),rgba(18,8,43,.12) 28%,rgba(18,8,43,.12) 72%,rgba(8,4,23,.6)),radial-gradient(ellipse at 50% 49%,rgba(34,12,65,.05),rgba(8,4,24,.38) 82%),var(--arcade-background) center / cover fixed,#0c0820; font-family:"Space Grotesk",sans-serif; }
body.alt-arcade-background { --arcade-background:url("assets/ono-arcade-symbol-background-2.png"); }
body::before, body::after { content:""; position:fixed; inset:0; pointer-events:none; }
body::before { z-index:0; opacity:.72; background:radial-gradient(circle at 16% 17%,rgba(244,46,110,.18),transparent 23%),radial-gradient(circle at 83% 29%,rgba(77,142,255,.2),transparent 24%),radial-gradient(circle at 51% 92%,rgba(252,202,68,.1),transparent 29%); }
body::after { z-index:0; background:linear-gradient(90deg,rgba(7,5,19,.35),transparent 19% 81%,rgba(7,5,19,.35)); }
button { font:inherit; } button:focus-visible { outline:2px solid var(--yellow); outline-offset:3px; }
.stars { position:fixed; z-index:0; inset:0; opacity:.38; background-image:radial-gradient(circle,rgba(255,255,255,.82) 0 1px,transparent 1.4px),radial-gradient(circle,rgba(255,255,255,.47) 0 1px,transparent 1.5px); background-size:97px 91px,149px 141px; background-position:14px 21px,61px 70px; animation:star-drift 18s linear infinite alternate; }
.scanlines { position:fixed; z-index:1; inset:0; opacity:.05; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(255,255,255,.8) 3px 4px); }
.arcade-shell { position:relative; z-index:2; width:min(1450px,100%); min-height:100vh; margin:auto; padding:18px clamp(16px,3vw,42px) 14px; }
.topbar { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:22px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; line-height:.78; }.brand strong { display:block; font:400 clamp(19px,2.2vw,27px)/.73 "Archivo Black",sans-serif; letter-spacing:-.08em; transform:skew(-8deg); }.brand small { display:block; margin-top:9px; color:var(--yellow); font:500 9px/1 "DM Mono",monospace; letter-spacing:.18em; }
.brand-mark { position:relative; display:flex; align-items:center; justify-content:center; width:49px; height:37px; overflow:hidden; transform:rotate(-11deg); border:3px solid var(--white); border-radius:50%; background:var(--red); box-shadow:0 0 18px rgba(255,71,126,.62); }.brand-mark::before { content:""; position:absolute; width:74px; height:15px; transform:rotate(-15deg); background:var(--yellow); }.brand-mark i { position:relative; z-index:1; margin-left:-3px; color:#14102b; font:400 18px/1 "Archivo Black",sans-serif; letter-spacing:-.15em; }.brand-mark i:first-child { margin-left:0; }
.topbar-message { display:grid; justify-items:center; gap:6px; color:#c3badc; font:500 10px/1 "DM Mono",monospace; letter-spacing:.11em; text-align:center; }.eyebrow { color:var(--yellow); font:500 10px/1 "DM Mono",monospace; letter-spacing:.18em; }
.top-actions { display:flex; align-items:center; gap:9px; }.icon-button,.new-game { min-height:38px; cursor:pointer; border:1px solid rgba(202,192,255,.25); color:var(--white); background:rgba(44,31,81,.72); font:500 10px "DM Mono",monospace; letter-spacing:.09em; transition:transform .18s ease,filter .18s ease,background .18s ease; }.icon-button:hover,.new-game:hover { transform:translateY(-2px); filter:brightness(1.18); }.icon-button { display:inline-flex; align-items:center; gap:7px; padding:0 11px; }.icon-button > span:first-child { color:var(--yellow); font-size:14px; letter-spacing:-4px; }.new-game { padding:0 14px; color:#25152c; border:0; background:var(--yellow); box-shadow:0 0 17px rgba(248,207,76,.24); font-weight:700; }
.score-strip { display:flex; align-items:center; justify-content:center; gap:26px; padding:16px 0 12px; }.score-player { display:grid; grid-template-columns:auto auto; align-items:baseline; column-gap:9px; min-width:142px; }.score-player--you { justify-content:end; text-align:right; }.score-player--bot { text-align:left; }.score-label { grid-column:1/-1; display:flex; align-items:center; gap:6px; margin-bottom:2px; color:var(--muted); font:500 9px/1 "DM Mono",monospace; letter-spacing:.13em; }.score-player--you .score-label { justify-content:end; }.score-label i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }.score-player--bot .score-label i { background:var(--pink); box-shadow:0 0 8px var(--pink); }.score-player strong { color:var(--white); font:400 31px/.9 "Archivo Black",sans-serif; letter-spacing:-.07em; }.score-player small { color:var(--muted); font:500 8px/1 "DM Mono",monospace; letter-spacing:.09em; }.round-chip { display:grid; justify-items:center; min-width:92px; padding:5px 18px 4px; border-right:1px solid var(--line); border-left:1px solid var(--line); color:var(--muted); font:500 8px/1 "DM Mono",monospace; letter-spacing:.12em; }.round-chip strong { margin:2px 0; color:var(--yellow); font:400 23px/1 "Archivo Black",sans-serif; }.round-chip em { font-style:normal; font-size:7px; }
.game-layout { display:grid; grid-template-columns:205px minmax(480px,690px) 220px; align-items:center; justify-content:center; gap:clamp(17px,2.8vw,39px); padding:9px 0 13px; }.left-panel,.right-panel { display:grid; gap:13px; }.intel-card { overflow:hidden; border:1px solid var(--line); background:linear-gradient(135deg,rgba(51,36,88,.7),rgba(21,15,46,.75)); box-shadow:0 13px 31px rgba(0,0,0,.2); }.bot-card { padding:16px; border-left:3px solid var(--pink); }.bot-heading { display:flex; align-items:center; gap:9px; }.bot-heading b { display:block; color:var(--white); font:400 15px/1 "Archivo Black",sans-serif; letter-spacing:-.04em; }.bot-heading small { display:block; margin-top:4px; color:var(--pink); font:500 8px/1 "DM Mono",monospace; letter-spacing:.14em; }.bot-orb { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; color:#fff; background:radial-gradient(circle at 36% 31%,#fff 0 4%,#ff9cba 8%,var(--pink) 42%,#691246 100%); box-shadow:0 0 14px rgba(255,71,126,.6); }.bot-card p { min-height:23px; margin:15px 0 12px; color:#f6bfd0; font:500 9px/1.35 "DM Mono",monospace; letter-spacing:.09em; }.bot-stat { display:flex; justify-content:space-between; align-items:end; color:var(--muted); font:500 8px/1 "DM Mono",monospace; letter-spacing:.11em; }.bot-stat strong { color:var(--white); font:400 23px/.8 "Archivo Black",sans-serif; }.signal-bars { display:flex; align-items:end; gap:3px; height:13px; margin-top:10px; }.signal-bars i { width:9px; height:5px; background:var(--pink); box-shadow:0 0 7px var(--pink); }.signal-bars i:nth-child(2){height:8px}.signal-bars i:nth-child(3){height:12px}.signal-bars i:nth-child(4){height:8px}.signal-bars i:nth-child(5){height:5px}
.objective-card { padding:16px; border-left:2px solid var(--violet); }.objective-card p { margin:11px 0 14px; font:600 13px/1.37 "DM Mono",monospace; letter-spacing:.01em; }.objective-card em { color:var(--violet); font-style:normal; }.rule-line { display:flex; align-items:flex-start; gap:8px; margin-top:8px; color:#c9c1de; font:500 8px/1.42 "DM Mono",monospace; letter-spacing:.08em; }.rule-line span { min-width:30px; color:var(--yellow); font:500 11px/1 "Archivo Black",sans-serif; }.streak-card { display:grid; gap:9px; padding:14px 16px; }.streak-card strong { min-height:19px; color:#cfcae4; font:500 9px/1.35 "DM Mono",monospace; letter-spacing:.07em; }
.table-area { min-width:0; }.turn-banner { display:flex; align-items:center; justify-content:space-between; min-height:51px; padding:0 4px 10px; }.turn-banner > div:first-child { display:grid; gap:6px; }.turn-banner strong { font:400 clamp(15px,2vw,19px)/1 "Archivo Black",sans-serif; letter-spacing:-.04em; }.turn-dial { position:relative; display:grid; place-items:center; width:35px; height:35px; border:2px solid var(--green); border-radius:50%; color:var(--green); box-shadow:0 0 12px rgba(81,213,144,.44),inset 0 0 8px rgba(81,213,144,.18); font:500 6px/1 "DM Mono",monospace; letter-spacing:.07em; }.turn-dial i { position:absolute; inset:4px; border-top:2px solid var(--yellow); border-radius:50%; animation:spin 2.5s linear infinite; }.turn-dial.bot-turn { border-color:var(--pink); color:var(--pink); box-shadow:0 0 12px rgba(255,71,126,.44),inset 0 0 8px rgba(255,71,126,.18); }.turn-dial.bot-turn i { border-top-color:var(--blue); }
.table-frame { position:relative; min-height:402px; overflow:hidden; padding:25px clamp(18px,3vw,37px) 18px; border:1px solid rgba(255,255,255,.26); border-radius:20px; background:radial-gradient(ellipse at 50% 48%,rgba(129,64,171,.42),rgba(46,25,86,.78) 53%,rgba(17,10,42,.9) 100%); box-shadow:inset 0 0 0 5px rgba(255,255,255,.035),inset 0 0 55px rgba(0,0,0,.48),0 19px 45px rgba(0,0,0,.42),0 0 39px rgba(120,70,255,.16); }.table-frame::before { content:""; position:absolute; inset:13px; border:1px dashed rgba(244,229,255,.14); border-radius:13px; pointer-events:none; }.table-frame::after { content:""; position:absolute; inset:0; pointer-events:none; background:repeating-radial-gradient(ellipse at center,transparent 0 43px,rgba(255,255,255,.018) 44px 45px); }
.table-corner { position:absolute; z-index:2; width:27px; height:27px; border-color:var(--yellow); pointer-events:none; }.corner-tl { top:9px; left:9px; border-top:2px solid;border-left:2px solid }.corner-tr { top:9px; right:9px; border-top:2px solid;border-right:2px solid }.corner-bl { bottom:9px; left:9px; border-bottom:2px solid;border-left:2px solid }.corner-br { bottom:9px; right:9px; border-bottom:2px solid;border-right:2px solid }
.opponent-zone { position:relative; z-index:1; }.hand-caption { display:flex; justify-content:space-between; padding:0 4px 6px; color:#d8cfe9; font:500 8px/1 "DM Mono",monospace; letter-spacing:.11em; }.hand-caption b { color:var(--pink); font-weight:500; }.bot-hand { display:flex; justify-content:center; height:91px; padding-top:11px; }.bot-hand .card-back { flex:0 0 57px; width:57px; height:80px; margin-left:-27px; transform:rotate(var(--tilt)) translateY(var(--rise)); box-shadow:-3px 5px 10px rgba(0,0,0,.39); animation:deal-in .42s both; animation-delay:var(--delay); }.bot-hand .card-back:first-child { margin-left:0; }
.center-table { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:clamp(43px,8vw,93px); padding-top:11px; }.pile-wrap,.discard-wrap { position:relative; display:grid; justify-items:center; gap:9px; }.pile-wrap small,.discard-wrap small { color:#c8bddc; font:500 8px/1 "DM Mono",monospace; letter-spacing:.11em; }.draw-pile { position:relative; width:91px; height:120px; padding:0; cursor:pointer; border:0; background:none; transition:transform .17s ease; }.draw-pile:hover:not(:disabled) { transform:translateY(-4px) rotate(-2deg); }.draw-pile:disabled { cursor:not-allowed; opacity:.63; }.card-back { position:relative; display:grid; place-items:center; overflow:hidden; border:2px solid #f7f0ff; border-radius:9px; background:linear-gradient(135deg,#30317d,#16113c); box-shadow:inset 0 0 0 4px #ee3f60,inset 0 0 0 7px #f8c947,0 7px 12px rgba(0,0,0,.38); }.card-back::before { content:""; position:absolute; width:145%; height:44%; transform:rotate(-22deg); background:#ec3d59; box-shadow:0 0 0 4px #f9cd4c; }.card-back b { position:relative; z-index:1; color:#fff; font:400 24px/1 "Archivo Black",sans-serif; letter-spacing:-.15em; transform:rotate(-22deg); text-shadow:1px 2px 0 #1e1643; }.card-back i { position:absolute; z-index:1; bottom:7px; right:8px; width:10px; height:10px; border-radius:50%; background:var(--blue); box-shadow:0 0 9px var(--blue); }.draw-pile::before,.draw-pile::after { content:""; position:absolute; inset:4px -4px -4px 4px; border-radius:9px; background:#493475; transform:rotate(4deg); box-shadow:0 4px 8px rgba(0,0,0,.28); }.draw-pile::after { inset:8px -8px -8px 8px; transform:rotate(7deg); background:#2e2457; }.draw-pile .card-back { position:relative; z-index:2; width:91px; height:120px; }.draw-pile em { position:absolute; z-index:3; right:-13px; bottom:-5px; display:grid; place-items:center; min-width:26px; height:26px; padding:0 5px; border:2px solid var(--ink); border-radius:50%; color:#1c1336; background:var(--yellow); font:500 10px/1 "DM Mono",monospace; font-style:normal; }
.discard-wrap { width:91px; min-height:151px; }.discard-pile { width:91px; height:120px; }.ono-card { --card-color:var(--red); position:relative; display:block; width:91px; height:120px; overflow:hidden; padding:0; border:2px solid rgba(255,255,255,.87); border-radius:9px; color:var(--white); background:var(--card-color); box-shadow:0 9px 14px rgba(0,0,0,.43),inset 0 0 0 2px rgba(0,0,0,.11); }.ono-card::before { content:""; position:absolute; width:139%; height:54%; top:24%; left:-20%; transform:rotate(-28deg); border:3px solid rgba(255,255,255,.83); border-radius:50%; background:rgba(255,255,255,.14); }.ono-card::after { content:""; position:absolute; inset:5px; border:1px solid rgba(255,255,255,.39); border-radius:5px; }.ono-card.wild { background:linear-gradient(135deg,var(--red) 0 25%,var(--yellow) 25% 50%,var(--green) 50% 75%,var(--blue) 75%); }.card-corner { position:absolute; z-index:2; top:6px; left:7px; display:grid; justify-items:center; color:#fff; font:400 16px/.76 "Archivo Black",sans-serif; letter-spacing:-.08em; text-shadow:1px 1px 1px rgba(0,0,0,.38); }.card-corner small { margin-top:3px; font:500 5px/1 "DM Mono",monospace; letter-spacing:.02em; }.card-corner--bottom { top:auto; right:7px; bottom:6px; left:auto; transform:rotate(180deg); }.card-main { position:absolute; z-index:1; top:50%; left:50%; display:grid; place-items:center; min-width:54px; transform:translate(-50%,-50%) rotate(-27deg); color:#fff; font:400 43px/.8 "Archivo Black",sans-serif; letter-spacing:-.14em; text-shadow:2px 3px 1px rgba(0,0,0,.21); }.ono-card.action .card-main { font-size:28px; }.ono-card.wild .card-main { font-size:18px; letter-spacing:-.08em; }.ono-card.wild .card-main::before { content:""; position:absolute; z-index:-1; width:66px; height:47px; border-radius:50%; background:rgba(11,7,31,.89); box-shadow:0 0 0 4px rgba(255,255,255,.87); }.discard-pile .ono-card { animation:discard-land .26s both; }
.action-flash { position:absolute; z-index:0; left:50%; top:29px; width:270px; height:170px; transform:translateX(-50%); opacity:0; background:radial-gradient(ellipse,rgba(255,210,71,.43),transparent 65%); pointer-events:none; }.action-flash.flash { animation:flash .5s ease-out; }
.color-console { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:10px; margin-top:6px; color:#cfc5dd; font:500 8px/1 "DM Mono",monospace; letter-spacing:.11em; }.color-console b { min-width:36px; color:var(--yellow); font-size:9px; }.color-lights { display:flex; gap:5px; }.color-lights i { width:10px; height:10px; border:1px solid rgba(255,255,255,.3); border-radius:50%; opacity:.28; background:var(--color); }.color-lights i[data-color="red"]{--color:var(--red)}.color-lights i[data-color="yellow"]{--color:var(--yellow)}.color-lights i[data-color="green"]{--color:var(--green)}.color-lights i[data-color="blue"]{--color:var(--blue)}.color-lights i.active { opacity:1; box-shadow:0 0 10px var(--color); transform:scale(1.25); }
.table-footer { display:flex; justify-content:space-between; gap:16px; padding:9px 3px 0; color:#bbb0d0; font:500 8px/1 "DM Mono",monospace; letter-spacing:.1em; }.table-footer b { color:var(--green); }
.playbook-card { padding:14px; }.draw-button { display:grid; grid-template-columns:32px 1fr; align-items:center; width:100%; min-height:52px; margin:11px 0 8px; cursor:pointer; border:1px solid rgba(139,178,255,.45); color:var(--white); background:linear-gradient(135deg,rgba(59,74,150,.82),rgba(33,34,88,.86)); text-align:left; transition:transform .18s ease,filter .18s ease; }.draw-button:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.16); }.draw-button:disabled { cursor:not-allowed; opacity:.45; }.draw-button > span { display:grid; place-items:center; align-self:stretch; color:#172045; background:var(--blue); font:400 25px/1 "Archivo Black",sans-serif; }.draw-button b,.draw-button small { margin-left:10px; }.draw-button b { align-self:end; font:400 12px/1 "Archivo Black",sans-serif; letter-spacing:-.04em; }.draw-button small { align-self:start; margin-top:3px; color:#b9c7fd; font:500 7px/1 "DM Mono",monospace; letter-spacing:.1em; }.ono-button { display:flex; align-items:center; gap:8px; width:100%; min-height:38px; cursor:pointer; border:1px solid rgba(248,207,76,.36); color:var(--yellow); background:rgba(82,56,65,.43); text-align:left; transition:transform .18s ease,background .18s ease; }.ono-button:hover:not(:disabled) { transform:translateY(-2px); background:rgba(123,82,57,.5); }.ono-button:disabled { cursor:not-allowed; opacity:.4; }.ono-button b { padding-left:10px; font:400 16px/1 "Archivo Black",sans-serif; letter-spacing:-.05em; }.ono-button span { color:#dfcad1; font:500 7px/1.25 "DM Mono",monospace; letter-spacing:.09em; }.ono-button.ready { animation:ono-pulse .8s ease-in-out infinite; }
.log-card { min-height:119px; padding:14px; }.log-card ol { display:grid; gap:7px; margin:11px 0 0; padding:0; list-style:none; }.log-card li { position:relative; padding-left:11px; color:#d3c9e3; font:500 8px/1.35 "DM Mono",monospace; letter-spacing:.03em; }.log-card li::before { content:""; position:absolute; top:3px; left:0; width:4px; height:4px; border-radius:50%; background:var(--violet); box-shadow:0 0 5px var(--violet); }.log-card li:first-child { color:#fff; }.log-card li:first-child::before { background:var(--yellow); box-shadow:0 0 5px var(--yellow); }.legend { display:flex; flex-wrap:wrap; gap:8px 10px; padding:2px 3px; color:#b7accb; font:500 7px/1 "DM Mono",monospace; letter-spacing:.07em; }.legend span { display:flex; align-items:center; gap:4px; }.legend i { width:6px; height:6px; border-radius:50%; }.red-dot{background:var(--red)}.yellow-dot{background:var(--yellow)}.green-dot{background:var(--green)}.blue-dot{background:var(--blue)}
.your-hand-panel { position:relative; padding:13px clamp(12px,2vw,25px) 4px; border-top:1px solid var(--line); }.your-hand-heading { display:flex; align-items:end; justify-content:space-between; gap:12px; padding:0 4px 9px; }.your-hand-heading > div { display:grid; gap:6px; }.your-hand-heading strong { font:400 17px/1 "Archivo Black",sans-serif; letter-spacing:-.04em; }.your-hand-heading strong b { margin-left:5px; color:var(--green); font-size:13px; }.your-hand-heading > span { color:#c0b6d2; font:500 8px/1 "DM Mono",monospace; letter-spacing:.1em; }.player-hand { display:flex; align-items:flex-end; justify-content:center; min-height:137px; padding:9px 8px 4px; overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--violet) transparent; }.player-hand .ono-card { flex:0 0 86px; width:86px; height:114px; margin-left:-22px; cursor:pointer; transform:rotate(var(--tilt)) translateY(var(--rise)); transition:transform .18s ease,filter .18s ease,box-shadow .18s ease; animation:deal-in .36s both; animation-delay:var(--delay); }.player-hand .ono-card:first-child { margin-left:0; }.player-hand .ono-card:hover:not(.blocked) { position:relative; z-index:4; transform:rotate(0deg) translateY(-23px) scale(1.06); box-shadow:0 15px 22px rgba(0,0,0,.52),0 0 18px rgba(255,255,255,.25); }.player-hand .ono-card.playable { box-shadow:0 9px 14px rgba(0,0,0,.43),0 0 0 2px rgba(255,255,255,.14),0 0 17px color-mix(in srgb,var(--card-color) 55%,transparent); }.player-hand .ono-card.blocked { cursor:not-allowed; filter:saturate(.55) brightness(.62); }.player-hand .ono-card.drawn { animation:drawn-card .8s ease-in-out infinite; }
.modal { position:fixed; z-index:20; display:grid; place-items:center; inset:0; padding:20px; background:rgba(7,4,19,.75); backdrop-filter:blur(8px); }.modal[hidden] { display:none; }.modal-card { width:min(420px,100%); padding:29px; border:1px solid rgba(255,255,255,.36); background:linear-gradient(145deg,rgba(67,40,100,.97),rgba(23,14,49,.98)); box-shadow:0 24px 70px rgba(0,0,0,.65),0 0 45px rgba(153,112,255,.24); text-align:center; animation:modal-in .25s ease-out; }.modal-card h1 { margin:13px 0 17px; font:400 clamp(28px,6vw,42px)/.88 "Archivo Black",sans-serif; letter-spacing:-.07em; }.modal-card h1 em { color:var(--yellow); font-style:normal; }.color-choice-row { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-top:23px; }.color-choice-row button { height:70px; cursor:pointer; border:2px solid rgba(255,255,255,.64); color:#fff; font:400 28px/1 "Archivo Black",sans-serif; text-shadow:1px 2px 1px rgba(0,0,0,.28); transition:transform .16s ease,filter .16s ease; }.color-choice-row button:hover { transform:translateY(-5px) rotate(-3deg); filter:brightness(1.18); }.color-choice-row button[data-color-choice="red"]{background:var(--red)}.color-choice-row button[data-color-choice="yellow"]{background:var(--yellow);color:#443116}.color-choice-row button[data-color-choice="green"]{background:var(--green);color:#12372d}.color-choice-row button[data-color-choice="blue"]{background:var(--blue)}
.result-card p { margin:0; color:#d7cce7; font:500 12px/1.45 "DM Mono",monospace; }.points-readout { display:grid; gap:5px; margin:21px auto 15px; padding:12px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.points-readout span,.final-scores span { color:var(--muted); font:500 8px/1 "DM Mono",monospace; letter-spacing:.14em; }.points-readout strong { color:var(--yellow); font:400 37px/1 "Archivo Black",sans-serif; letter-spacing:-.08em; }.final-scores { display:flex; align-items:center; justify-content:center; gap:16px; }.final-scores div { display:grid; gap:5px; }.final-scores b { font:400 24px/1 "Archivo Black",sans-serif; letter-spacing:-.07em; }.final-scores i { color:var(--violet); font:400 28px/1 "Archivo Black",sans-serif; }.modal-actions { display:grid; gap:10px; margin-top:22px; }.modal-button { width:100%; }.text-button { cursor:pointer; border:0; color:#cabfdf; background:none; font:500 9px "DM Mono",monospace; letter-spacing:.1em; text-decoration:underline; text-underline-offset:3px; }
.toast { position:fixed; z-index:30; bottom:24px; left:50%; max-width:calc(100vw - 32px); padding:10px 15px; transform:translate(-50%,20px); opacity:0; border:1px solid rgba(255,255,255,.3); color:#fff; background:#27194c; box-shadow:0 8px 27px rgba(0,0,0,.42); font:500 10px/1.2 "DM Mono",monospace; letter-spacing:.08em; pointer-events:none; transition:opacity .2s ease,transform .2s ease; }.toast.show { transform:translate(-50%,0); opacity:1; }.confetti { position:fixed; z-index:21; inset:0; overflow:hidden; pointer-events:none; }.confetti i { position:absolute; top:-20px; width:9px; height:17px; background:var(--piece); transform:rotate(var(--rotation)); animation:confetti-fall var(--duration) linear forwards; }
@keyframes spin { to { transform:rotate(360deg); } } @keyframes star-drift { to { background-position:91px 73px,5px 8px; } } @keyframes deal-in { from { opacity:0; transform:rotate(var(--tilt)) translate(0,-20px) scale(.75); } to { opacity:1; transform:rotate(var(--tilt)) translateY(var(--rise)) scale(1); } } @keyframes discard-land { from { opacity:0; transform:translate(-90px,25px) rotate(-20deg) scale(.6); } to { opacity:1; transform:rotate(0) scale(1); } } @keyframes flash { 0%{opacity:0;transform:translateX(-50%) scale(.45)}25%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(1.32)}} @keyframes ono-pulse { 50% { box-shadow:0 0 0 4px rgba(248,207,76,.12),0 0 21px rgba(248,207,76,.6); } } @keyframes drawn-card { 50% { transform:rotate(var(--tilt)) translateY(calc(var(--rise) - 10px)); } } @keyframes modal-in { from{opacity:0;transform:translateY(13px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes confetti-fall { to { transform:translate(var(--drift),110vh) rotate(calc(var(--rotation) + 600deg)); } }
@media (max-width:1100px) { .game-layout { grid-template-columns:185px minmax(460px,1fr) 192px; gap:17px; }.arcade-shell{padding-inline:20px}.topbar-message{display:none}.objective-card{display:none} }
@media (max-width:825px) { .game-layout { grid-template-columns:1fr 180px; }.left-panel { display:none; }.table-area { grid-column:1; }.right-panel{grid-column:2;}.score-strip{padding-top:13px}.table-frame{min-height:391px}.your-hand-panel{margin-top:5px} }
@media (max-width:640px) { .arcade-shell{padding:12px 12px 10px}.topbar{min-height:59px}.brand-mark{width:42px;height:32px}.brand strong{font-size:20px}.icon-button .top-actions span:last-child{display:none}.icon-button{min-width:36px;padding:0 8px}.new-game{padding:0 9px;font-size:8px}.score-strip{gap:12px}.score-player{min-width:94px}.score-player strong{font-size:25px}.round-chip{min-width:72px;padding-inline:7px}.game-layout{display:block;padding-top:5px}.right-panel{grid-template-columns:1fr 1fr; margin-top:12px;gap:9px}.playbook-card{padding:12px}.log-card{min-height:0;padding:12px}.legend{grid-column:1/-1;justify-content:center}.table-frame{min-height:367px;padding:22px 13px 15px}.bot-hand{height:84px}.bot-hand .card-back{flex-basis:49px;width:49px;height:70px;margin-left:-24px}.center-table{gap:clamp(33px,12vw,70px);padding-top:7px}.draw-pile,.discard-pile,.discard-wrap{width:79px}.draw-pile{height:105px}.draw-pile .card-back,.ono-card{width:79px;height:105px}.discard-wrap{min-height:134px}.card-main{font-size:37px}.ono-card.action .card-main{font-size:24px}.your-hand-heading{padding-inline:0}.your-hand-heading>span{font-size:7px;text-align:right}.player-hand{justify-content:flex-start;min-height:127px;padding-left:0}.player-hand .ono-card{flex-basis:76px;width:76px;height:101px;margin-left:-22px}.player-hand .ono-card:first-child{margin-left:0}.table-footer{font-size:7px}.footer-bar{font-size:6px!important}.footer-bar span:last-child{display:none}.modal-card{padding:24px 18px} }
.footer-bar { display:flex; justify-content:space-between; gap:20px; padding-top:9px; border-top:1px solid var(--line); color:#a99fc2; font:500 7px/1.4 "DM Mono",monospace; letter-spacing:.08em; }.footer-bar b { color:var(--violet); }

/* Multiplayer lobby and room-table additions. */
.lobby-screen { display:flex; flex-direction:column; }.lobby-hero { display:grid; grid-template-columns:minmax(260px,1.1fr) minmax(260px,.9fr); align-items:center; gap:28px; width:min(940px,100%); margin:clamp(26px,6vw,66px) auto 31px; }.lobby-intro h1 { margin:13px 0; font:400 clamp(42px,7vw,78px)/.78 "Archivo Black",sans-serif; letter-spacing:-.09em; }.lobby-intro h1 em { color:var(--yellow); font-style:normal; text-shadow:0 0 24px rgba(248,207,76,.24); }.lobby-intro p { max-width:470px; margin:0; color:#d1c7e3; font:500 13px/1.6 "DM Mono",monospace; }.lobby-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }.lobby-tags span { padding:6px 8px; border:1px solid rgba(255,255,255,.18); color:#d9d0e8; background:rgba(42,25,79,.45); font:500 8px/1 "DM Mono",monospace; letter-spacing:.1em; }.lobby-art-card { position:relative; min-height:262px; overflow:hidden; border:1px solid rgba(255,255,255,.26); border-radius:23px; background:radial-gradient(circle at 50% 54%,rgba(157,72,220,.73),rgba(45,20,88,.74) 46%,rgba(11,6,35,.91)); box-shadow:inset 0 0 42px rgba(0,0,0,.39),0 20px 38px rgba(0,0,0,.28); }.lobby-art-card::after { content:""; position:absolute; inset:13px; border:1px dashed rgba(255,255,255,.16); border-radius:15px; }.lobby-art-card > b { position:absolute; z-index:2; top:50%; left:50%; color:#fff; font:400 55px/1 "Archivo Black",sans-serif; letter-spacing:-.15em; text-shadow:0 4px 0 #20134a,0 0 20px rgba(255,255,255,.25); transform:translate(-50%,-50%) rotate(-10deg); }.lobby-card { position:absolute; z-index:1; display:grid; place-items:center; width:91px; height:123px; border:3px solid rgba(255,255,255,.87); border-radius:12px; color:#fff; box-shadow:0 13px 19px rgba(0,0,0,.42); font:400 43px/1 "Archivo Black",sans-serif; text-shadow:2px 3px 1px rgba(0,0,0,.22); }.lobby-card::before { content:""; position:absolute; width:132%; height:49%; transform:rotate(-30deg); border:3px solid rgba(255,255,255,.83); border-radius:50%; background:rgba(255,255,255,.15); }.lobby-card--red { top:29px; left:27px; background:var(--red); transform:rotate(-23deg); }.lobby-card--yellow { top:22px; right:36px; color:#443116; background:var(--yellow); transform:rotate(22deg); }.lobby-card--green { bottom:17px; left:67px; color:#173c2c; background:var(--green); transform:rotate(16deg); }.lobby-card--blue { right:45px; bottom:17px; background:var(--blue); transform:rotate(-14deg); }.orbit { position:absolute; top:50%; left:50%; width:305px; height:133px; border:2px solid rgba(255,255,255,.16); border-radius:50%; transform:translate(-50%,-50%) rotate(-14deg); }.orbit-two { width:224px; height:290px; border-color:rgba(248,207,76,.18); transform:translate(-50%,-50%) rotate(43deg); }.lobby-grid { display:grid; grid-template-columns:minmax(275px,.94fr) minmax(275px,1.06fr); gap:17px; width:min(940px,100%); margin:0 auto auto; }.lobby-panel { min-height:332px; padding:23px; border:1px solid var(--line); background:linear-gradient(135deg,rgba(55,35,94,.8),rgba(19,13,47,.83)); box-shadow:0 16px 34px rgba(0,0,0,.21); }.lobby-panel h2 { margin:10px 0 18px; font:400 20px/1 "Archivo Black",sans-serif; letter-spacing:-.055em; }.create-panel { border-top:3px solid var(--green); }.join-panel { border-top:3px solid var(--blue); }.lobby-panel label:not(.check-label) { display:grid; gap:7px; margin-top:12px; color:#c4bad7; font:500 8px/1 "DM Mono",monospace; letter-spacing:.11em; }.lobby-panel input { width:100%; min-height:42px; padding:0 12px; border:1px solid rgba(255,255,255,.2); border-radius:0; outline:none; color:var(--white); background:rgba(10,6,31,.55); font:600 12px "Space Grotesk",sans-serif; }.lobby-panel input:focus { border-color:var(--yellow); box-shadow:0 0 0 3px rgba(248,207,76,.1); }.check-label { display:flex; align-items:center; gap:8px; margin:15px 0; color:#c8bdd8; font:500 8px/1.4 "DM Mono",monospace; letter-spacing:.08em; }.check-label input { width:14px; min-height:auto; accent-color:var(--green); }.lobby-button { width:100%; margin-top:2px; }.join-panel > p { margin:0 0 14px; color:#c5bad6; font:500 10px/1.5 "DM Mono",monospace; }.join-code-row { display:grid; grid-template-columns:1fr 86px; gap:7px; }.join-code-row input { color:var(--yellow); font:500 17px "DM Mono",monospace; letter-spacing:.13em; text-transform:uppercase; }.join-button,.start-button { cursor:pointer; border:0; color:#171434; background:var(--blue); font:400 11px "Archivo Black",sans-serif; letter-spacing:-.03em; transition:transform .18s ease,filter .18s ease; }.join-button:hover,.start-button:hover:not(:disabled) { transform:translateY(-2px); filter:brightness(1.16); }.lobby-divider { display:grid; place-items:center; height:31px; margin-top:7px; color:#82769e; font:500 8px "DM Mono",monospace; }.lobby-divider::before,.lobby-divider::after { content:""; position:absolute; width:36%; height:1px; background:var(--line); }.lobby-divider::before { margin-left:-58%; }.lobby-divider::after { margin-left:58%; }.open-rooms-head { display:flex; justify-content:space-between; align-items:center; color:#c9c0d9; font:500 8px/1 "DM Mono",monospace; letter-spacing:.1em; }.open-rooms-head .text-button { font-size:8px; }.join-panel output { display:block; min-height:17px; margin-top:9px; color:#9e91b9; font:500 8px/1.35 "DM Mono",monospace; }.room-list { display:grid; gap:6px; max-height:135px; margin:5px 0 0; padding:0; overflow:auto; list-style:none; }.room-list li { display:flex; justify-content:space-between; align-items:center; gap:9px; padding:8px 9px; border:1px solid rgba(255,255,255,.12); background:rgba(13,8,37,.47); }.room-list b { display:block; overflow:hidden; max-width:220px; color:#f5effd; font:600 10px/1.15 "Space Grotesk",sans-serif; text-overflow:ellipsis; white-space:nowrap; }.room-list span { display:block; margin-top:3px; color:#a89cbd; font:500 7px/1 "DM Mono",monospace; }.room-list button { min-width:45px; min-height:27px; cursor:pointer; border:1px solid rgba(78,144,255,.7); color:#dce7ff; background:rgba(49,77,151,.48); font:500 8px "DM Mono",monospace; letter-spacing:.08em; }
.room-readout { display:grid; grid-template-columns:auto auto; align-items:center; gap:4px 8px; color:#c5bad7; font:500 8px/1 "DM Mono",monospace; letter-spacing:.12em; }.room-readout .eyebrow { grid-column:1/-1; text-align:center; }.room-readout strong { color:var(--yellow); font:500 15px/1 "DM Mono",monospace; letter-spacing:.13em; }.copy-code { cursor:pointer; border:0; color:#bfceff; background:none; font:500 8px "DM Mono",monospace; letter-spacing:.09em; text-decoration:underline; text-underline-offset:3px; }.leave-button { color:#fff; background:var(--pink); }.match-strip { display:flex; justify-content:center; gap:0; margin:13px 0 3px; }.match-strip > div { display:grid; justify-items:center; gap:4px; min-width:126px; padding:0 17px; border-left:1px solid var(--line); }.match-strip > div:last-child { border-right:1px solid var(--line); }.match-strip span { color:#a99fbd; font:500 7px/1 "DM Mono",monospace; letter-spacing:.13em; }.match-strip strong { max-width:175px; overflow:hidden; color:var(--white); font:400 13px/1 "Archivo Black",sans-serif; letter-spacing:-.04em; text-overflow:ellipsis; white-space:nowrap; }.match-strip div:nth-child(2) strong { color:var(--yellow); }.match-strip div:nth-child(3) strong { color:var(--green); font-size:10px; letter-spacing:.04em; }.match-strip .offline { color:var(--pink)!important; }.players-card { padding:15px; border-left:3px solid var(--green); }.players-panel { display:grid; gap:6px; margin-top:12px; }.player-row { display:grid; grid-template-columns:7px 1fr auto; align-items:center; gap:7px; min-height:38px; padding:5px 6px; border:1px solid rgba(255,255,255,.08); background:rgba(16,9,41,.37); }.player-row.you { border-color:rgba(81,213,144,.35); }.player-row.current { background:rgba(67,125,107,.3); box-shadow:inset 2px 0 var(--yellow); }.player-row b,.player-row span { display:block; max-width:107px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.player-row b { color:#f7f3ff; font:600 10px/1.1 "Space Grotesk",sans-serif; }.player-row span { margin-top:3px; color:#ada0c3; font:500 7px/1 "DM Mono",monospace; letter-spacing:.07em; }.player-row strong { color:var(--yellow); font:400 15px/1 "Archivo Black",sans-serif; letter-spacing:-.05em; }.player-light { width:6px; height:6px; border-radius:50%; background:#655d7a; }.player-light.online { background:var(--green); box-shadow:0 0 7px var(--green); }.opponent-hands { display:flex; justify-content:center; align-items:flex-start; gap:11px; min-height:87px; padding:0 0 4px; }.rival-hand { display:grid; justify-items:center; gap:2px; max-width:135px; }.rival-hand > span { overflow:hidden; max-width:130px; color:#d9d0e7; font:500 6px/1 "DM Mono",monospace; letter-spacing:.07em; text-overflow:ellipsis; white-space:nowrap; }.rival-hand.current > span { color:var(--yellow); }.mini-backs { display:flex; justify-content:center; padding-top:7px; }.mini-backs .card-back { flex:0 0 38px; width:38px; height:55px; margin-left:-20px; transform:rotate(var(--tilt)) translateY(var(--rise)); box-shadow:-2px 4px 8px rgba(0,0,0,.4); }.mini-backs .card-back:first-child { margin-left:0; }.mini-backs .card-back b { font-size:13px; }.mini-backs .card-back i { bottom:4px; right:4px; width:5px; height:5px; }.start-button { width:100%; min-height:40px; margin:10px 0 7px; }.start-button:disabled { cursor:not-allowed; opacity:.45; }.catch-list { display:grid; gap:5px; margin-top:8px; }.catch-list:empty { display:none; }.catch-list button { min-height:29px; cursor:pointer; border:1px solid rgba(255,71,126,.55); color:#ffc6d9; background:rgba(117,24,73,.42); font:500 8px "DM Mono",monospace; letter-spacing:.07em; }.catch-list button:disabled { cursor:not-allowed; opacity:.5; }
@media (max-width:825px) { .lobby-hero { grid-template-columns:1fr; margin-top:31px; }.lobby-art-card { min-height:190px; }.lobby-card { transform:scale(.75)!important; }.lobby-grid { grid-template-columns:1fr; }.lobby-panel { min-height:0; }.room-readout { display:none; }.multiplayer-layout .left-panel { display:block; grid-column:1/-1; }.multiplayer-layout .right-panel { grid-column:1/-1; grid-template-columns:1fr 1fr; }.players-card { margin-bottom:10px; }.players-panel { grid-template-columns:repeat(2,1fr); }.objective-card { display:none; } }
@media (max-width:640px) { .lobby-hero { margin-top:28px; }.lobby-intro h1 { font-size:49px; }.lobby-intro p { font-size:11px; }.lobby-art-card { min-height:162px; }.lobby-art-card > b { font-size:44px; }.lobby-grid { gap:10px; }.lobby-panel { padding:18px; }.topbar-message { display:none; }.match-strip > div { min-width:0; flex:1; padding-inline:8px; }.match-strip strong { max-width:95px; font-size:10px; }.multiplayer-layout .left-panel { display:block; }.multiplayer-layout .right-panel { display:grid; }.players-panel { grid-template-columns:1fr 1fr; }.player-row b,.player-row span { max-width:84px; }.opponent-hands { gap:4px; }.mini-backs .card-back { flex-basis:30px; width:30px; height:44px; margin-left:-18px; }.mini-backs .card-back b { font-size:10px; }.mini-backs .card-back i { display:none; }.rival-hand > span { max-width:86px; }.lobby-screen .footer-bar span:last-child { display:none; } }

/* The live table: a layered neon felt surface with arcade-machine chrome. */
.multiplayer-layout .table-area { filter:drop-shadow(0 25px 34px rgba(3,1,14,.45)); }
.multiplayer-layout .table-frame { isolation:isolate; min-height:430px; padding:28px clamp(22px,3.4vw,43px) 21px; border:4px solid transparent; border-radius:31px; background:linear-gradient(143deg,rgba(255,255,255,.58),rgba(190,136,255,.08) 8%,rgba(255,255,255,.17) 22%,rgba(0,0,0,.28) 48%,rgba(255,94,174,.27) 100%) border-box,radial-gradient(ellipse at 50% 41%,rgba(133,73,192,.93) 0%,rgba(83,39,142,.92) 36%,rgba(45,20,91,.98) 75%,rgba(16,9,44,1) 100%) padding-box; box-shadow:inset 0 0 0 2px rgba(255,255,255,.15),inset 0 0 0 8px rgba(17,7,51,.48),inset 0 0 50px rgba(4,1,21,.82),0 0 0 1px rgba(255,255,255,.2),0 0 30px rgba(152,90,255,.34),0 24px 46px rgba(0,0,0,.53); }
.multiplayer-layout .table-frame::before { z-index:0; inset:15px; border:1px solid rgba(255,236,255,.32); border-radius:22px; background:repeating-radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.035) 0 1px,transparent 1px 11px),repeating-linear-gradient(39deg,rgba(255,255,255,.018) 0 1px,transparent 1px 9px); box-shadow:inset 0 0 0 4px rgba(26,10,68,.38),inset 0 0 31px rgba(3,1,17,.72),0 0 11px rgba(216,158,255,.2); }
.multiplayer-layout .table-frame::after { z-index:0; inset:-14% -24%; opacity:.68; background:linear-gradient(112deg,transparent 32%,rgba(255,255,255,.11) 47%,rgba(255,207,94,.14) 50%,transparent 63%); mix-blend-mode:screen; animation:table-sheen 8.5s ease-in-out infinite; }
.multiplayer-layout .table-corner { z-index:3; width:39px; height:39px; border-width:0; border-color:transparent; filter:drop-shadow(0 0 7px rgba(248,207,76,.78)); }.multiplayer-layout .corner-tl { top:14px; left:14px; border-top:3px solid var(--yellow); border-left:3px solid var(--yellow); border-radius:12px 0 0; }.multiplayer-layout .corner-tr { top:14px; right:14px; border-top:3px solid var(--yellow); border-right:3px solid var(--yellow); border-radius:0 12px 0 0; }.multiplayer-layout .corner-bl { bottom:14px; left:14px; border-bottom:3px solid var(--yellow); border-left:3px solid var(--yellow); border-radius:0 0 0 12px; }.multiplayer-layout .corner-br { right:14px; bottom:14px; border-right:3px solid var(--yellow); border-bottom:3px solid var(--yellow); border-radius:0 0 12px 0; }
.multiplayer-layout .opponent-zone { padding:0 8px 3px; }.multiplayer-layout .hand-caption { padding-bottom:9px; color:#f4eaff; text-shadow:0 0 8px rgba(255,255,255,.26); }.multiplayer-layout .hand-caption b { color:#ffcce1; }.multiplayer-layout .opponent-hands { min-height:96px; gap:18px; }.multiplayer-layout .rival-hand { position:relative; min-width:101px; padding:4px 7px 1px; border-radius:10px; background:linear-gradient(180deg,rgba(10,3,35,.34),transparent); transition:transform .2s ease; }.multiplayer-layout .rival-hand.current { transform:translateY(-4px); box-shadow:0 0 0 1px rgba(248,207,76,.5),0 0 18px rgba(248,207,76,.2); }.multiplayer-layout .rival-hand.current::before { content:""; position:absolute; top:-5px; left:50%; width:7px; height:7px; border-radius:50%; background:var(--yellow); box-shadow:0 0 9px var(--yellow); transform:translateX(-50%); animation:table-pip .78s ease-in-out infinite alternate; }.multiplayer-layout .rival-hand > span { max-width:137px; color:#f5e8ff; font-size:7px; text-shadow:0 1px 2px #16032f; }.multiplayer-layout .mini-backs .card-back { border-width:1px; box-shadow:-3px 5px 10px rgba(0,0,0,.55),0 0 5px rgba(255,255,255,.12); }
.multiplayer-layout .center-table { z-index:2; min-height:164px; gap:clamp(63px,10.5vw,121px); padding:17px 19px 6px; }.multiplayer-layout .center-table::before { content:""; position:absolute; z-index:-1; width:min(510px,95%); height:156px; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:radial-gradient(ellipse,rgba(10,3,39,.58) 0 26%,rgba(108,45,177,.12) 57%,transparent 72%); box-shadow:inset 0 0 24px rgba(2,0,14,.65),0 0 19px rgba(124,70,255,.15); }.multiplayer-layout .pile-wrap,.multiplayer-layout .discard-wrap { gap:11px; }.multiplayer-layout .pile-wrap small,.multiplayer-layout .discard-wrap small { color:#f0d9ff; text-shadow:0 1px 2px #13052c; }.multiplayer-layout .draw-pile { width:99px; height:129px; filter:drop-shadow(0 0 9px rgba(78,144,255,.24)); }.multiplayer-layout .draw-pile .card-back { width:99px; height:129px; }.multiplayer-layout .draw-pile::before { background:#6e459e; }.multiplayer-layout .draw-pile::after { background:#302059; }.multiplayer-layout .discard-wrap { width:99px; min-height:160px; }.multiplayer-layout .discard-pile { width:99px; height:129px; }.multiplayer-layout .discard-pile .ono-card { width:99px; height:129px; box-shadow:0 11px 20px rgba(0,0,0,.54),0 0 23px color-mix(in srgb,var(--card-color) 50%,transparent); }.multiplayer-layout .draw-pile:hover:not(:disabled) { filter:drop-shadow(0 0 19px rgba(78,144,255,.8)); }.multiplayer-layout .color-console { position:relative; z-index:3; margin-top:10px; padding:6px 13px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(12,5,39,.46); box-shadow:inset 0 0 13px rgba(0,0,0,.38),0 0 12px rgba(162,91,255,.12); }.multiplayer-layout .color-console b { min-width:42px; text-shadow:0 0 7px currentColor; }.multiplayer-layout .color-lights i { width:12px; height:12px; transition:transform .2s ease,opacity .2s ease,box-shadow .2s ease; }.multiplayer-layout .color-lights i.active { transform:scale(1.32); }
.multiplayer-layout .table-footer { padding:11px 6px 0; color:#e1d4ee; }.multiplayer-layout .table-footer span:last-child { color:#c8b6ea; }.multiplayer-layout .turn-banner { padding-bottom:13px; }.multiplayer-layout .turn-banner strong { font-size:clamp(17px,2.2vw,22px); text-shadow:0 3px 9px rgba(0,0,0,.35); }.multiplayer-layout .turn-dial { width:42px; height:42px; border-width:2px; background:rgba(9,4,30,.52); }.multiplayer-layout .players-card,.multiplayer-layout .playbook-card,.multiplayer-layout .log-card { border-radius:13px; backdrop-filter:blur(7px); }.multiplayer-layout .playbook-card { box-shadow:0 14px 28px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.12); }.multiplayer-layout .draw-button { border-radius:9px; overflow:hidden; }.multiplayer-layout .ono-button { border-radius:9px; overflow:hidden; }.multiplayer-layout .start-button { border-radius:8px; box-shadow:0 7px 15px rgba(0,0,0,.27),0 0 15px rgba(78,144,255,.24); }.multiplayer-layout + .your-hand-panel { margin-top:4px; border:1px solid rgba(255,255,255,.13); border-radius:18px 18px 0 0; background:linear-gradient(180deg,rgba(40,22,74,.5),rgba(8,4,25,.32)); box-shadow:inset 0 1px rgba(255,255,255,.09),0 -11px 30px rgba(4,1,17,.18); }
.your-hand-panel { position:relative; isolation:isolate; }.your-hand-panel::before { content:""; position:absolute; z-index:-1; top:-1px; left:50%; width:min(510px,75%); height:2px; background:linear-gradient(90deg,transparent,var(--blue),var(--pink),var(--yellow),transparent); box-shadow:0 0 11px rgba(140,96,255,.82); transform:translateX(-50%); }.player-hand .ono-card { border-radius:11px; box-shadow:0 11px 18px rgba(0,0,0,.53),inset 0 1px rgba(255,255,255,.28); }.player-hand .ono-card.playable { box-shadow:0 11px 18px rgba(0,0,0,.53),0 0 0 2px rgba(255,255,255,.18),0 0 22px color-mix(in srgb,var(--card-color) 72%,transparent); }.player-hand .ono-card:hover:not(.blocked) { box-shadow:0 17px 25px rgba(0,0,0,.62),0 0 0 2px rgba(255,255,255,.38),0 0 30px color-mix(in srgb,var(--card-color) 90%,transparent); }
@keyframes table-sheen { 0%,20% { transform:translateX(-29%) rotate(-3deg); opacity:0; } 34% { opacity:.85; } 54%,100% { transform:translateX(29%) rotate(-3deg); opacity:0; } } @keyframes table-pip { to { transform:translateX(-50%) scale(1.38); box-shadow:0 0 14px var(--yellow); } }
@media (max-width:640px) { .multiplayer-layout .table-frame { min-height:389px; padding:23px 13px 14px; border-radius:22px; }.multiplayer-layout .table-corner { width:29px; height:29px; }.multiplayer-layout .center-table { min-height:141px; gap:clamp(38px,12vw,70px); padding-inline:8px; }.multiplayer-layout .draw-pile { width:83px; height:109px; }.multiplayer-layout .draw-pile .card-back,.multiplayer-layout .discard-pile .ono-card { width:83px; height:109px; }.multiplayer-layout .discard-wrap,.multiplayer-layout .discard-pile { width:83px; }.multiplayer-layout .discard-wrap { min-height:139px; }.multiplayer-layout .opponent-hands { min-height:75px; }.multiplayer-layout .rival-hand { min-width:72px; padding-inline:2px; }.multiplayer-layout .color-console { margin-top:3px; }.multiplayer-layout .table-footer { font-size:6px; }.multiplayer-layout .center-table::before { height:132px; } }

.card-corner,.card-main { text-shadow:1px 2px 1px rgba(0,0,0,.45),0 0 6px rgba(255,255,255,.28); }

/* Shared multi-page arcade shell: matching the ThaiChess Play / Match / Score / Player / How To flow. */
.site-nav { min-width:0; flex:1; }.site-nav-links { display:flex; justify-content:center; gap:4px; }.site-nav-link { display:flex; align-items:center; gap:5px; min-width:0; padding:7px 8px; border:1px solid transparent; color:#bdb1d4; text-decoration:none; transition:transform .18s ease,border-color .18s ease,background .18s ease,color .18s ease; }.site-nav-link:hover { color:var(--white); border-color:rgba(255,255,255,.2); background:rgba(80,53,132,.29); transform:translateY(-2px); }.site-nav-link[aria-current="page"] { color:var(--yellow); border-color:rgba(255,218,36,.48); background:rgba(109,74,41,.3); box-shadow:0 0 12px rgba(255,218,36,.09); }.site-nav-icon { display:grid; place-items:center; width:17px; height:17px; border:1px solid currentColor; border-radius:50%; font:600 9px/1 "DM Mono",monospace; }.site-nav-copy { display:grid; gap:2px; }.site-nav-copy b { font:600 8px/1 "DM Mono",monospace; letter-spacing:.11em; }.site-nav-copy small { color:#9186aa; font:500 6px/1 "DM Mono",monospace; letter-spacing:.07em; }.site-nav-link[aria-current="page"] small { color:#f3d788; }
.page-shell { display:flex; flex-direction:column; }.page-topbar { flex-wrap:nowrap; }.page-signal { display:flex; align-items:center; gap:7px; color:#a99fc0; font:500 8px/1 "DM Mono",monospace; letter-spacing:.1em; white-space:nowrap; }.page-signal i { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); animation:status-pulse 1.2s ease-in-out infinite alternate; }.page-hero { display:flex; align-items:center; justify-content:space-between; gap:36px; min-height:250px; padding:45px clamp(8px,4.5vw,68px) 29px; border-bottom:1px solid var(--line); }.page-hero > div:first-child { max-width:720px; }.page-hero h1 { margin:9px 0 13px; font:400 clamp(43px,7vw,88px)/.86 "Archivo Black",sans-serif; letter-spacing:-.08em; }.page-hero h1 em { color:var(--yellow); font-style:normal; text-shadow:0 0 24px rgba(255,218,36,.25); }.page-hero p { max-width:590px; margin:0; color:#d0c5de; font:500 clamp(10px,1.2vw,13px)/1.55 "DM Mono",monospace; letter-spacing:.03em; }.page-emblem { position:relative; display:grid; place-items:center; flex:0 0 155px; width:155px; height:155px; overflow:hidden; border:3px solid rgba(255,255,255,.73); border-radius:37px; transform:rotate(-8deg); background:linear-gradient(135deg,#ff2a59,#70173f 51%,#251042); box-shadow:inset 0 0 0 8px rgba(255,255,255,.12),0 0 38px rgba(255,61,130,.37),18px 25px 26px rgba(0,0,0,.3); }.page-emblem::before { content:""; position:absolute; width:220px; height:54px; transform:rotate(-28deg); background:var(--yellow); box-shadow:0 0 0 8px rgba(255,255,255,.82); }.page-emblem b { position:relative; z-index:1; color:#1b102c; font:400 84px/.8 "Archivo Black",sans-serif; letter-spacing:-.13em; }.page-emblem span { position:absolute; right:13px; bottom:12px; color:var(--white); font:500 11px/1 "DM Mono",monospace; letter-spacing:.13em; }.score-emblem { background:linear-gradient(135deg,#1c96ff,#2a315e 53%,#691946); }.score-emblem b { color:var(--yellow); text-shadow:0 0 16px rgba(255,218,36,.62); }.rules-emblem { background:linear-gradient(135deg,#26e88a,#166792 55%,#30215f); }.rules-emblem b { color:#fff; }.compact-hero { min-height:212px; padding-block:31px 22px; }.page-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:26px 0; }.page-panel { border:1px solid var(--line); background:linear-gradient(135deg,rgba(60,42,101,.74),rgba(17,10,45,.83)); box-shadow:0 17px 35px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.09); }.page-panel h2 { margin:8px 0 19px; font:400 23px/.95 "Archivo Black",sans-serif; letter-spacing:-.06em; }.identity-panel { display:grid; align-content:start; padding:25px; border-left:3px solid var(--yellow); }.identity-panel label { display:grid; gap:8px; color:#bdb2d1; font:500 8px/1 "DM Mono",monospace; letter-spacing:.12em; }.identity-panel input { width:100%; min-height:46px; padding:0 12px; border:1px solid rgba(255,255,255,.2); color:var(--white); background:rgba(9,4,30,.53); font:600 13px "Space Grotesk",sans-serif; outline:none; }.identity-panel input:focus { border-color:var(--yellow); box-shadow:0 0 0 3px rgba(255,218,36,.12); }.identity-panel .new-game { justify-self:start; margin-top:14px; }.page-status { display:block; min-height:20px; margin-top:15px; color:#c4b9d8; font:500 9px/1.4 "DM Mono",monospace; letter-spacing:.04em; }.record-panel { padding:25px; border-left:3px solid var(--green); }.profile-stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0; }.profile-stats div { min-height:93px; padding:13px; border:1px solid rgba(255,255,255,.11); background:rgba(8,4,28,.38); }.profile-stats dt { color:#a99fbd; font:500 7px/1.2 "DM Mono",monospace; letter-spacing:.11em; }.profile-stats dd { margin:8px 0 0; color:var(--yellow); font:400 30px/.8 "Archivo Black",sans-serif; letter-spacing:-.08em; }.small-copy { margin:16px 0 0; color:#c3b9d1; font:500 8px/1.45 "DM Mono",monospace; letter-spacing:.05em; }.leaderboard-panel { margin:0 auto 26px; width:min(940px,100%); padding:25px; border-left:3px solid var(--pink); }.scoreboard-head { display:flex; align-items:end; justify-content:space-between; gap:16px; }.scoreboard-head h2 { margin-bottom:0; }.leaderboard-list { display:grid; gap:7px; margin:13px 0 0; padding:0; list-style:none; }.leaderboard-list li { display:grid; grid-template-columns:48px minmax(0,1fr) 100px 74px; align-items:center; min-height:58px; padding:7px 13px; border:1px solid rgba(255,255,255,.12); background:linear-gradient(90deg,rgba(37,23,73,.76),rgba(16,9,42,.44)); }.leaderboard-list li:first-child { border-color:rgba(255,218,36,.46); box-shadow:0 0 21px rgba(255,218,36,.11); }.rank-place { color:#bfb0d7; font:400 19px/1 "Archivo Black",sans-serif; letter-spacing:-.07em; }.leaderboard-list li:first-child .rank-place { color:var(--yellow); }.rank-name { overflow:hidden; color:#fff; font:600 14px/1 "Space Grotesk",sans-serif; text-overflow:ellipsis; white-space:nowrap; }.rank-record { color:#aaa0c5; font:500 8px/1 "DM Mono",monospace; letter-spacing:.06em; }.rank-points { color:var(--green); font:400 24px/1 "Archivo Black",sans-serif; letter-spacing:-.08em; text-align:right; }.rules-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; padding:28px 0; }.rule-module { min-height:177px; padding:21px; border:1px solid var(--line); background:linear-gradient(150deg,rgba(59,40,101,.75),rgba(19,10,46,.84)); box-shadow:0 14px 27px rgba(0,0,0,.2); }.rule-module > span { display:block; color:var(--yellow); font:500 9px/1 "DM Mono",monospace; letter-spacing:.14em; }.rule-module h2 { margin:11px 0 9px; color:var(--white); font:400 18px/1 "Archivo Black",sans-serif; letter-spacing:-.06em; }.rule-module p { margin:0; color:#cbc0d9; font:500 9px/1.55 "DM Mono",monospace; letter-spacing:.03em; }.rule-module b { color:var(--yellow); }.rule-module a { color:var(--green); font-weight:700; }.callout-panel { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:23px 27px; margin-bottom:22px; border-left:3px solid var(--green); }.callout-panel h2 { max-width:590px; margin:8px 0 0; font-size:22px; }.rules-cta { display:inline-flex; align-items:center; min-height:41px; text-decoration:none; white-space:nowrap; }.rules-cta span { margin-left:8px; font-size:18px; }
@keyframes status-pulse { to { opacity:.45; box-shadow:0 0 16px var(--green); } }
@media (max-width:1050px) { .topbar-message { display:none; }.site-nav-link { padding-inline:6px; }.site-nav-copy small { display:none; }.page-hero { padding-inline:20px; }.rules-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px) { .topbar { gap:10px; }.site-nav { order:3; flex-basis:100%; }.page-topbar { flex-wrap:wrap; padding-bottom:10px; }.site-nav-links { justify-content:space-between; }.site-nav-link { flex:1; justify-content:center; padding:7px 3px; }.site-nav-copy b { font-size:7px; }.site-nav-icon { width:15px; height:15px; }.page-signal { margin-left:auto; }.page-hero { min-height:0; padding:30px 5px 26px; }.page-hero h1 { font-size:50px; }.page-emblem { flex-basis:94px; width:94px; height:94px; border-radius:23px; }.page-emblem::before { width:150px; height:35px; }.page-emblem b { font-size:49px; }.page-emblem span { right:7px; bottom:7px; font-size:7px; }.page-grid { grid-template-columns:1fr; }.rules-grid { grid-template-columns:1fr; }.rule-module { min-height:0; }.callout-panel { align-items:flex-start; flex-direction:column; }.leaderboard-list li { grid-template-columns:38px minmax(0,1fr) 66px; gap:6px; padding-inline:9px; }.rank-record { grid-column:2; }.rank-points { grid-column:3; grid-row:1 / span 2; }.scoreboard-head { align-items:flex-start; flex-direction:column; }.profile-stats div { min-height:81px; }.page-shell .footer-bar { margin-top:auto; } }
@media (max-width:420px) { .brand { gap:7px; }.brand-mark { width:40px; height:31px; }.brand strong { font-size:18px; }.page-signal { font-size:7px; }.site-nav-copy b { font-size:6px; }.site-nav-link { gap:2px; }.site-nav-icon { display:none; }.page-hero h1 { font-size:42px; }.profile-stats { grid-template-columns:1fr 1fr; }.profile-stats dd { font-size:25px; } }

/* Navy arcade palette — deliberately limited to blue, red, green, and gold. */
html { background:#03111f; }
body { background:linear-gradient(90deg,rgba(2,11,21,.78),rgba(3,21,38,.18) 28%,rgba(3,21,38,.18) 72%,rgba(2,11,21,.78)),radial-gradient(ellipse at 50% 49%,rgba(0,157,255,.09),rgba(3,12,23,.52) 82%),var(--arcade-background) center / cover fixed,#03111f; }
body::before { opacity:.68; background:radial-gradient(circle at 16% 17%,rgba(255,38,63,.16),transparent 23%),radial-gradient(circle at 83% 29%,rgba(11,157,255,.21),transparent 24%),radial-gradient(circle at 51% 92%,rgba(255,211,41,.1),transparent 29%); }
.topbar-message,.page-signal,.footer-bar,.match-strip span,.table-footer,.your-hand-heading > span,.page-status,.small-copy { color:#a7bbca; }
.icon-button,.new-game { border-color:rgba(86,191,255,.32); background:rgba(5,30,53,.86); }.new-game { color:#16202a; background:var(--yellow); }
.intel-card,.lobby-panel,.page-panel,.rule-module { border-color:rgba(112,204,255,.2); background:linear-gradient(135deg,rgba(8,39,68,.84),rgba(3,17,32,.89)); }
.objective-card { border-left-color:var(--blue); }.objective-card em { color:var(--blue); }
.card-back { background:linear-gradient(135deg,#076ec8,#031d3c); box-shadow:inset 0 0 0 4px #f33b35,inset 0 0 0 7px #ffd329,0 7px 12px rgba(0,0,0,.38); }.card-back b { text-shadow:1px 2px 0 #03111f; }.draw-pile::before { background:#075a9d; }.draw-pile::after { background:#042e55; }
.log-card li::before,.footer-bar b { background:var(--blue); color:var(--blue); box-shadow:0 0 5px var(--blue); }.player-hand { scrollbar-color:var(--blue) transparent; }
.modal { background:rgba(1,10,19,.82); }.modal-card { background:linear-gradient(145deg,rgba(5,50,84,.98),rgba(2,19,37,.99)); box-shadow:0 24px 70px rgba(0,0,0,.65),0 0 45px rgba(11,157,255,.22); }.modal-card .final-scores i { color:var(--blue); }.toast { background:#062946; border-color:rgba(105,211,255,.38); }
.lobby-tags span { color:#d0e6f4; background:rgba(5,41,70,.62); }.lobby-art-card { background:radial-gradient(circle at 50% 54%,rgba(0,126,221,.68),rgba(4,37,68,.83) 46%,rgba(2,15,29,.94)); }.lobby-art-card > b { text-shadow:0 4px 0 #062d51,0 0 20px rgba(255,255,255,.25); }.lobby-panel input,.identity-panel input { background:rgba(2,17,31,.72); }.room-list li { background:rgba(3,21,38,.7); }.join-button,.start-button { color:#061827; background:var(--blue); }
.multiplayer-layout .table-frame { background:linear-gradient(143deg,rgba(255,255,255,.45),rgba(0,157,255,.18) 8%,rgba(255,255,255,.13) 22%,rgba(0,0,0,.32) 48%,rgba(255,38,63,.2) 100%) border-box,radial-gradient(ellipse at 50% 41%,rgba(6,86,137,.95) 0%,rgba(4,54,93,.96) 36%,rgba(3,29,57,.99) 75%,rgba(2,13,29,1) 100%) padding-box; box-shadow:inset 0 0 0 2px rgba(255,255,255,.15),inset 0 0 0 8px rgba(2,22,45,.52),inset 0 0 50px rgba(0,5,14,.82),0 0 0 1px rgba(255,255,255,.2),0 0 30px rgba(11,157,255,.34),0 24px 46px rgba(0,0,0,.53); }
.multiplayer-layout .table-frame::before { border-color:rgba(195,235,255,.34); background:repeating-radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.035) 0 1px,transparent 1px 11px),repeating-linear-gradient(39deg,rgba(255,255,255,.018) 0 1px,transparent 1px 9px); box-shadow:inset 0 0 0 4px rgba(3,32,64,.48),inset 0 0 31px rgba(0,5,16,.72),0 0 11px rgba(11,157,255,.2); }
.multiplayer-layout .table-frame::after { background:linear-gradient(112deg,transparent 32%,rgba(255,255,255,.11) 47%,rgba(255,211,41,.14) 50%,transparent 63%); }.multiplayer-layout .center-table::before { background:radial-gradient(ellipse,rgba(2,16,36,.66) 0 26%,rgba(0,128,214,.14) 57%,transparent 72%); box-shadow:inset 0 0 24px rgba(0,3,12,.72),0 0 19px rgba(11,157,255,.18); }.multiplayer-layout .draw-pile::before { background:#0a5f9e; }.multiplayer-layout .draw-pile::after { background:#032f58; }.multiplayer-layout .color-console { background:rgba(2,20,38,.62); box-shadow:inset 0 0 13px rgba(0,0,0,.48),0 0 12px rgba(11,157,255,.18); }.multiplayer-layout + .your-hand-panel { background:linear-gradient(180deg,rgba(4,40,72,.6),rgba(2,15,31,.52)); }
.site-nav-link { color:#b6cbd9; }.site-nav-link:hover { background:rgba(5,58,96,.38); }.page-emblem { background:linear-gradient(135deg,#ff263f,#7b2725 51%,#082946); }.score-emblem { background:linear-gradient(135deg,#0b9dff,#073967 53%,#7d2624); }.rules-emblem { background:linear-gradient(135deg,#2df08a,#087267 55%,#073968); }.page-panel,.rule-module { background:linear-gradient(135deg,rgba(7,42,73,.84),rgba(2,17,33,.91)); }.leaderboard-list li { background:linear-gradient(90deg,rgba(5,42,73,.78),rgba(2,20,38,.58)); }.site-nav-link:hover { border-color:rgba(99,204,255,.3); }.page-emblem b { color:#061b2f; }
.footer-bar b { background:none; color:var(--blue); box-shadow:none; }

/* Keep one identical navigation strip on every screen and let the artwork stay fully bright. */
body { background:var(--arcade-background) center / cover fixed,#03111f; }
body::before,body::after { display:none; }
.stars { opacity:.15; mix-blend-mode:screen; }.scanlines { opacity:.018; }
.topbar { position:sticky; z-index:15; top:0; min-height:76px; padding:2px 0; background:rgba(3,17,31,.94); box-shadow:0 10px 22px rgba(0,0,0,.28); backdrop-filter:blur(10px); }
.site-nav { align-self:stretch; display:flex; align-items:center; }.site-nav-links { width:100%; }.site-nav-link { min-height:43px; }.page-topbar { background:rgba(3,17,31,.94); }
ono-top-menu { display:contents; }.top-menu-extra { display:flex; align-items:center; justify-content:flex-end; gap:9px; }.top-menu-extra .page-signal { margin-left:0; }.top-menu-extra .room-readout { flex:0 0 auto; }
@media (max-width:1050px) { .top-menu-extra .room-readout { display:none; } }
@media (max-width:720px) { .top-menu-extra { margin-left:auto; }.top-menu-extra .icon-button { min-height:32px; padding-inline:8px; }.top-menu-extra .icon-button span:last-child,.top-menu-extra .leave-button { display:none; } }

/* The shared menu uses a centered grid, so its position never shifts with page-specific controls. */
html { scrollbar-gutter:stable; }
.shared-topbar { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; justify-content:normal; gap:16px; }
.shared-topbar .brand { justify-self:start; }
.shared-topbar .site-nav { grid-column:2; flex:initial; width:max-content; align-self:center; }
.shared-topbar .site-nav-links { width:max-content; }
.top-menu-utility { grid-column:3; display:flex; align-items:center; justify-self:end; min-width:0; gap:18px; }
@media (max-width:720px) { .shared-topbar { grid-template-columns:minmax(0,1fr) auto; gap:8px 10px; }.shared-topbar .site-nav { grid-column:1 / -1; grid-row:2; width:100%; order:initial; flex-basis:auto; }.shared-topbar .site-nav-links { width:100%; }.top-menu-utility { grid-column:2; }.top-menu-extra { margin-left:0; } }

/* Original ONO card language: angular pulse tracks and gate icons, not oval bands. */
.ono-card { border:2px solid rgba(255,255,255,.96); border-radius:12px; background:linear-gradient(148deg,color-mix(in srgb,var(--card-color) 88%,white),var(--card-color) 36%,color-mix(in srgb,var(--card-color) 68%,#03111f) 100%); box-shadow:0 10px 18px rgba(0,0,0,.47),inset 0 2px 7px rgba(255,255,255,.34),inset 0 0 0 2px rgba(2,17,31,.17); }
.ono-card::before { top:13%; left:-6%; width:112%; height:73%; border:0; border-radius:0; background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.36)); clip-path:polygon(0 27%,71% 0,100% 24%,29% 100%,0 78%); box-shadow:none; transform:rotate(-17deg); }
.ono-card::after { inset:6px; border:1px solid rgba(255,255,255,.58); border-radius:0; clip-path:polygon(7% 0,100% 8%,93% 100%,0 92%); }
.ono-card .card-main { min-width:0; padding:5px 9px; transform:translate(-50%,-50%) rotate(-17deg); font-size:40px; text-shadow:1px 3px 1px rgba(0,0,0,.35); }
.ono-card.action .card-main { font-size:27px; letter-spacing:-.1em; }.ono-card.wild .card-main { font-size:37px; letter-spacing:0; }.ono-card.wild .card-main::before { display:none; }
.ono-card .card-core { position:absolute; z-index:-1; width:59px; height:48px; border:3px solid rgba(255,255,255,.9); background:rgba(2,17,31,.64); clip-path:polygon(23% 0,100% 18%,77% 100%,0 82%); box-shadow:0 0 0 3px rgba(2,17,31,.18),inset 0 0 10px rgba(255,255,255,.16); }.ono-card.wild .card-core { width:57px; height:57px; border:0; background:rgba(2,17,31,.84); clip-path:polygon(50% 0,63% 36%,100% 50%,63% 63%,50% 100%,37% 63%,0 50%,37% 36%); }
.ono-card .card-corner { text-shadow:1px 2px 1px rgba(0,0,0,.48); }.ono-card .card-corner small { font-size:4px; letter-spacing:.08em; }
.card-back { overflow:hidden; border:2px solid #eaf8ff; border-radius:12px; background:linear-gradient(145deg,#06335b,#021426); box-shadow:inset 0 0 0 4px #0b9dff,inset 0 0 0 7px #ffd329,0 7px 12px rgba(0,0,0,.42); }.card-back::before { width:108%; height:72%; transform:rotate(-17deg); border-radius:0; background:linear-gradient(135deg,#ff263f 0 43%,#ffd329 43% 50%,#0b9dff 50% 100%); clip-path:polygon(0 29%,72% 0,100% 23%,28% 100%,0 79%); box-shadow:none; }.card-back b { letter-spacing:-.1em; transform:rotate(-17deg); text-shadow:1px 2px 0 #03111f; }.card-back i { width:9px; height:9px; border-radius:0; background:var(--green); box-shadow:0 0 9px var(--green); transform:rotate(45deg); }
.lobby-card::before { width:106%; height:65%; border:0; border-radius:0; background:rgba(255,255,255,.2); clip-path:polygon(0 27%,72% 0,100% 24%,28% 100%,0 79%); transform:rotate(-17deg); }
.lobby-art-card > b { letter-spacing:-.09em; transform:translate(-50%,-50%) rotate(-8deg); }

/* Instant solo route: one player with three visible server-controlled arcade bots. */
.solo-play-button { display:grid; grid-template-columns:39px minmax(0,1fr) auto; align-items:center; gap:11px; width:min(100%,478px); min-height:59px; margin-top:20px; padding:9px 12px; cursor:pointer; border:1px solid rgba(255,221,80,.75); color:#18212a; background:linear-gradient(135deg,#ffe66d,#ffd329 57%,#eeb124); box-shadow:0 10px 20px rgba(255,211,41,.2),inset 0 1px rgba(255,255,255,.78); text-align:left; transition:transform .18s ease,filter .18s ease; }.solo-play-button:hover:not(:disabled) { transform:translateY(-3px); filter:brightness(1.07); }.solo-play-button:disabled { cursor:wait; opacity:.65; }.solo-play-icon { display:grid; place-items:center; width:35px; height:35px; color:#fff; background:#0b9dff; clip-path:polygon(16% 0,100% 14%,84% 100%,0 86%); font:400 21px/.8 "Archivo Black",sans-serif; }.solo-play-button b,.solo-play-button small { display:block; }.solo-play-button b { font:400 18px/.9 "Archivo Black",sans-serif; letter-spacing:-.06em; }.solo-play-button small { margin-top:5px; color:#38422a; font:600 6px/1.25 "DM Mono",monospace; letter-spacing:.1em; }.solo-play-button > i { color:#6f5114; font:400 22px/1 "Archivo Black",sans-serif; font-style:normal; }.player-row.bot { border-color:rgba(11,157,255,.22); }.player-row.bot .player-light { background:var(--blue); box-shadow:0 0 7px var(--blue); }.rival-hand.bot > span { color:#a7e5ff; }
@media (max-width:640px) { .solo-play-button { width:100%; min-height:55px; }.solo-play-button small { font-size:5.5px; } }

/* Final table accents stay in the ONO navy / red / gold palette. */
.multiplayer-layout .table-area { filter:drop-shadow(0 25px 34px rgba(0,21,40,.48)); }
.multiplayer-layout .hand-caption { color:#d5efff; }.multiplayer-layout .hand-caption b { color:#ffd329; }
.multiplayer-layout .rival-hand { background:linear-gradient(180deg,rgba(2,25,48,.48),transparent); }.multiplayer-layout .rival-hand > span { color:#eaf8ff; text-shadow:0 1px 2px #03111f; }
.multiplayer-layout .center-table::before { background:radial-gradient(ellipse,rgba(2,16,36,.66) 0 26%,rgba(0,128,214,.14) 57%,transparent 72%); box-shadow:inset 0 0 24px rgba(0,3,12,.72),0 0 19px rgba(11,157,255,.18); }
.multiplayer-layout .pile-wrap small,.multiplayer-layout .discard-wrap small { color:#d5efff; text-shadow:0 1px 2px #03111f; }
.multiplayer-layout .color-console { background:rgba(2,20,38,.62); box-shadow:inset 0 0 13px rgba(0,0,0,.48),0 0 12px rgba(11,157,255,.18); }
.multiplayer-layout .table-footer { color:#c8e9fb; }.multiplayer-layout .table-footer span:last-child { color:#9bc7df; }
.multiplayer-layout .turn-dial { background:rgba(2,20,38,.66); }.multiplayer-layout + .your-hand-panel { background:linear-gradient(180deg,rgba(4,40,72,.6),rgba(2,15,31,.52)); box-shadow:inset 0 1px rgba(255,255,255,.09),0 -11px 30px rgba(0,9,20,.24); }
.your-hand-panel::before { box-shadow:0 0 11px rgba(11,157,255,.72); }

/* ONO rulebook: a dedicated, bright card-and-symbol guide. */
.rules-screen { --rule-surface:rgba(3,26,47,.9); --rule-line:rgba(132,219,255,.25); }
.rules-hero { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 330px; align-items:center; gap:36px; min-height:292px; margin-top:20px; padding:36px clamp(22px,4vw,58px); overflow:hidden; border:1px solid var(--rule-line); background:linear-gradient(112deg,rgba(3,26,47,.94),rgba(4,63,103,.76) 55%,rgba(3,24,45,.92)); box-shadow:inset 0 1px rgba(255,255,255,.17),0 18px 38px rgba(0,9,20,.28); }.rules-hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.72; background:linear-gradient(120deg,transparent 0 50%,rgba(255,255,255,.12) 50.2% 50.7%,transparent 51%),repeating-linear-gradient(0deg,transparent 0 24px,rgba(102,210,255,.06) 25px 26px); }.rules-hero-copy { position:relative; z-index:1; }.rules-hero h1 { margin:10px 0 13px; font:400 clamp(48px,7vw,90px)/.8 "Archivo Black",sans-serif; letter-spacing:-.09em; }.rules-hero h1 em,.rules-section-heading em,.rules-ready h2 em { color:var(--yellow); font-style:normal; text-shadow:0 0 22px rgba(255,211,41,.25); }.rules-hero p { max-width:570px; margin:0; color:#d4edff; font:500 12px/1.58 "DM Mono",monospace; letter-spacing:.025em; }.rules-hero-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }.rules-hero-tags span { padding:6px 8px; border:1px solid rgba(159,224,255,.25); color:#c9e9fa; background:rgba(2,18,33,.4); font:600 7px/1 "DM Mono",monospace; letter-spacing:.11em; }
.rules-hero-deck { position:relative; z-index:1; width:300px; height:214px; justify-self:end; }.rules-deck-orbit { position:absolute; inset:18px 8px; border:1px solid rgba(144,225,255,.36); border-radius:50%; transform:rotate(-14deg); box-shadow:0 0 34px rgba(11,157,255,.2),inset 0 0 28px rgba(11,157,255,.1); }.rules-card { position:absolute; display:grid; place-items:center; width:117px; height:158px; overflow:hidden; border:3px solid rgba(255,255,255,.9); border-radius:15px; color:#fff; box-shadow:0 16px 23px rgba(0,4,12,.38),inset 0 2px rgba(255,255,255,.35); }.rules-card::before { content:""; position:absolute; width:128%; height:65%; transform:rotate(-17deg); background:rgba(255,255,255,.15); clip-path:polygon(0 27%,71% 0,100% 24%,29% 100%,0 78%); }.rules-card b { position:relative; z-index:1; font:400 55px/.8 "Archivo Black",sans-serif; letter-spacing:-.14em; text-shadow:2px 3px 0 rgba(0,0,0,.3); }.rules-card small { position:absolute; z-index:1; bottom:13px; color:#fff; font:600 8px/1 "DM Mono",monospace; letter-spacing:.15em; }.rules-card--lock { top:21px; left:19px; transform:rotate(-17deg); background:linear-gradient(145deg,#ff4a3e,#bd171e); }.rules-card--pull { top:10px; right:21px; transform:rotate(15deg); background:linear-gradient(145deg,#ffd93c,#e79316); }.rules-card--flux { bottom:4px; left:99px; transform:rotate(-2deg); background:linear-gradient(135deg,#11bdf9 0 46%,#0b5bb8 46% 100%); }.rules-card--flux b { font-size:51px; }
.rules-quick,.symbol-manual,.rules-ready { margin-top:18px; border:1px solid var(--rule-line); background:var(--rule-surface); box-shadow:inset 0 1px rgba(255,255,255,.1),0 14px 32px rgba(0,9,20,.22); }.rules-quick { padding:25px 28px 0; }.rules-section-heading h2 { margin:8px 0 0; font:400 clamp(26px,3vw,38px)/.88 "Archivo Black",sans-serif; letter-spacing:-.07em; }.rule-steps { display:grid; grid-template-columns:repeat(3,1fr); margin:23px -28px 0; padding:0; list-style:none; border-top:1px solid var(--rule-line); }.rule-steps li { display:grid; grid-template-columns:37px minmax(0,1fr); gap:11px; min-height:121px; padding:21px 28px; border-right:1px solid var(--rule-line); }.rule-steps li:last-child { border-right:0; }.rule-steps li > span { color:var(--yellow); font:400 22px/.9 "Archivo Black",sans-serif; letter-spacing:-.08em; }.rule-steps b { color:#f5fbff; font:600 10px/1 "DM Mono",monospace; letter-spacing:.14em; }.rule-steps p { margin:9px 0 0; color:#b8d8ea; font:500 9px/1.5 "DM Mono",monospace; }.rule-steps strong { color:var(--yellow); }
.symbol-manual { padding:28px; }.symbol-manual .rules-section-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,.72fr); column-gap:30px; align-items:end; }.symbol-manual .rules-section-heading .eyebrow,.symbol-manual .rules-section-heading h2 { grid-column:1; }.symbol-manual .rules-section-heading p { grid-column:2; grid-row:1 / span 2; margin:0 0 3px; color:#b8d8ea; font:500 9px/1.55 "DM Mono",monospace; }.symbol-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:24px; }.symbol-tile { position:relative; min-height:235px; padding:13px; overflow:hidden; border:1px solid rgba(159,224,255,.19); background:linear-gradient(165deg,rgba(9,52,84,.86),rgba(2,19,36,.93)); }.symbol-tile::before { content:""; position:absolute; top:-24px; right:-29px; width:102px; height:102px; opacity:.42; border:1px solid currentColor; clip-path:polygon(23% 0,100% 18%,77% 100%,0 82%); transform:rotate(-18deg); }.symbol-glyph { position:relative; display:grid; place-items:center; width:72px; height:72px; margin-bottom:18px; border:2px solid currentColor; color:#fff; background:rgba(3,17,31,.48); clip-path:polygon(16% 0,100% 14%,84% 100%,0 86%); font:400 36px/.8 "Archivo Black",sans-serif; letter-spacing:-.14em; text-shadow:2px 2px rgba(0,0,0,.35); }.symbol-tile span { color:#a9d5ec; font:600 7px/1 "DM Mono",monospace; letter-spacing:.13em; }.symbol-tile h3 { margin:8px 0 7px; color:#f4fbff; font:400 16px/.96 "Archivo Black",sans-serif; letter-spacing:-.06em; }.symbol-tile p { margin:0; color:#b8d8ea; font:500 8px/1.48 "DM Mono",monospace; }.symbol-tile--lock { color:#ff5249; }.symbol-tile--flow { color:#2df08a; }.symbol-tile--pull { color:#ffd329; }.symbol-tile--flux { color:#0b9dff; }.symbol-tile--draw4 { color:#a7edff; }
.rules-grid--notes { grid-template-columns:repeat(3,1fr); padding:18px 0 0; }.rules-grid--notes .rule-module { min-height:176px; padding:22px; border-color:var(--rule-line); border-top:3px solid var(--blue); background:linear-gradient(150deg,rgba(5,45,78,.9),rgba(2,18,34,.92)); }.rules-grid--notes .rule-module:nth-child(2) { border-top-color:var(--yellow); }.rules-grid--notes .rule-module:nth-child(3) { border-top-color:var(--green); }.rules-grid--notes .rule-module > span { color:#a7d7ee; }.rules-grid--notes .rule-module p { color:#c1dfef; }.rules-ready { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:25px 29px; margin-bottom:22px; border-left:4px solid var(--yellow); }.rules-ready h2 { margin:8px 0 0; font:400 clamp(21px,2.7vw,34px)/.91 "Archivo Black",sans-serif; letter-spacing:-.07em; }.rules-cta { flex:0 0 auto; }
@media (max-width:1050px) { .rules-hero { grid-template-columns:minmax(0,1fr) 270px; }.rules-hero-deck { transform:scale(.85); transform-origin:right center; }.symbol-grid { grid-template-columns:repeat(3,1fr); }.symbol-tile { min-height:200px; }.symbol-tile--draw4 { grid-column:span 2; }.rules-grid--notes { grid-template-columns:repeat(3,1fr); } }
@media (max-width:720px) { .rules-hero { grid-template-columns:1fr; min-height:0; padding:28px 20px 19px; }.rules-hero h1 { font-size:52px; }.rules-hero-deck { justify-self:center; width:260px; height:184px; transform:scale(.85); transform-origin:center top; margin-bottom:-23px; }.rules-quick,.symbol-manual { padding:21px 17px 0; }.rule-steps { grid-template-columns:1fr; margin-inline:-17px; }.rule-steps li { min-height:0; padding:16px 17px; border-right:0; border-bottom:1px solid var(--rule-line); }.rule-steps li:last-child { border-bottom:0; }.symbol-manual .rules-section-heading { display:block; }.symbol-manual .rules-section-heading p { margin-top:12px; }.symbol-grid { grid-template-columns:1fr 1fr; margin-top:18px; }.symbol-tile { min-height:191px; }.symbol-tile--draw4 { grid-column:auto; }.symbol-glyph { width:58px; height:58px; margin-bottom:13px; font-size:29px; }.symbol-tile h3 { font-size:14px; }.rules-grid--notes { grid-template-columns:1fr; padding-top:12px; }.rules-grid--notes .rule-module { min-height:0; }.rules-ready { align-items:flex-start; flex-direction:column; padding:23px 20px; }.rules-ready h2 { font-size:25px; } }