/* GameArena, tournament-hall felt & brass */ :root{ --felt-900:#0A2B21; --felt-800:#0E3B2E; --felt-700:#155040; --felt-600:#1E6350; --brass:#C9A227; --brass-soft:#E3C567; --ivory:#F2EDDF; --ink:#171512; --walnut:#2A1F17; --danger:#B3402E; --pos:#3E8E5A; --radius:14px; --display:'Bricolage Grotesque',sans-serif; --body:'IBM Plex Sans',sans-serif; --mono:'IBM Plex Mono',monospace; } html[data-theme="light"]{ --felt-900:#E9E4D4; --felt-800:#F2EDDF; --felt-700:#fff; --ivory:#1B2B24; --walnut:#D8CFBB; } html[data-theme="dark"]{ --felt-900:#101312; --felt-800:#161B19; --felt-700:#1F2624; } *{box-sizing:border-box} html{max-width:100%;overflow-x:hidden} body{margin:0;max-width:100%;background: radial-gradient(1200px 600px at 50% -10%, var(--felt-700), transparent 60%), var(--felt-900); color:var(--ivory);font-family:var(--body);font-size:16px;line-height:1.55;min-height:100vh} h1,h2,h3{font-family:var(--display);line-height:1.12;letter-spacing:-.01em} h1{font-size:clamp(1.7rem,4.5vw,2.9rem);font-weight:800} h2{font-size:1.25rem;font-weight:600} a{color:var(--brass-soft)} code{font-family:var(--mono);background:var(--walnut);color:var(--brass-soft); padding:.15em .5em;border-radius:6px} /* brass rail header/footer, the room's trim */ .rail{display:flex;justify-content:space-between;align-items:center;gap:1rem; padding:.8rem 1.4rem;border-bottom:2px solid var(--brass); background:linear-gradient(var(--felt-800),var(--felt-900))} .rail.foot{border-bottom:0;border-top:2px solid var(--brass);margin-top:3rem; font-size:.82rem;opacity:.75;justify-content:center} .brand{font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--ivory); text-decoration:none} .brand span{color:var(--brass)} nav{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap} nav a{color:var(--ivory);text-decoration:none;font-size:.93rem} nav a b{color:var(--brass-soft)} .inline{display:inline} button,.cta{font-family:var(--body);font-weight:600;font-size:.95rem;cursor:pointer; border:1px solid var(--brass);border-radius:10px;padding:.6rem 1.1rem; background:transparent;color:var(--ivory);text-decoration:none;display:inline-block} .cta{background:linear-gradient(180deg,var(--brass-soft),var(--brass));color:var(--ink); border:0;box-shadow:0 2px 0 #7d651a} .cta.small{padding:.3rem .8rem;font-size:.82rem} button.danger{border-color:var(--danger);color:#E8A79A} button.link{border:0;background:none;color:var(--ivory);padding:0;font-size:.93rem} button.link.copy-link{display:inline-flex;align-items:center;gap:.35rem;background:rgba(227,197,103,.16); border:1px solid var(--brass);color:var(--brass-soft);padding:.3rem .7rem;border-radius:999px; font-weight:700;font-size:.82rem;letter-spacing:.01em;transition:background .15s,transform .1s} button.link.copy-link::before{content:"\1F517";font-size:.85em} button.link.copy-link:hover{background:rgba(227,197,103,.3);transform:translateY(-1px)} button.link.copy-link:active{transform:translateY(0)} main{max-width:1060px;margin:0 auto;padding:1.4rem} .hero{padding:2.2rem 0 1rem} .hero .sub{opacity:.8;max-width:46ch} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:1.2rem 0} @media(max-width:760px){.grid2{grid-template-columns:1fr}} .card{background:var(--felt-800);border:1px solid rgba(201,162,39,.28); border-radius:var(--radius);padding:1.3rem;margin-bottom:1.2rem;min-width:0} .card.narrow{max-width:430px;margin:2rem auto} .stack{display:flex;flex-direction:column;gap:.8rem} .stack label{display:flex;flex-direction:column;gap:.3rem;font-size:.9rem} .row{display:flex;gap:.6rem;margin:.6rem 0} input,select,textarea{background:var(--felt-900);border:1px solid rgba(201,162,39,.4); color:var(--ivory);border-radius:8px;padding:.6rem .8rem;font-size:.95rem; font-family:var(--body);box-shadow:inset 0 1px 4px rgba(0,0,0,.3); transition:border-color .18s,box-shadow .18s,background .18s} textarea{resize:vertical;min-height:5em} input::placeholder,textarea::placeholder{color:rgba(242,237,223,.4)} input:hover,select:hover,textarea:hover{border-color:rgba(201,162,39,.65)} input:disabled,select:disabled,textarea:disabled{opacity:.5;cursor:not-allowed} select{appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23E3C567'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke='%23E3C567' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right .7rem center;background-size:16px; padding-right:2.3rem} input[type=checkbox],input[type=radio]{box-shadow:none;width:auto} input[type=number]{font-variant-numeric:tabular-nums} .hint{font-size:.85rem;opacity:.75} .big-number{font-family:var(--display);font-size:2.4rem;font-weight:800;color:var(--brass-soft);margin:.2rem 0} .ledger{width:100%;border-collapse:collapse;font-size:.9rem} .ledger td{padding:.45rem .5rem;border-bottom:1px solid rgba(242,237,223,.08)} .neg{color:#E8A79A}.pos{color:#9BD8B0} .flashes{max-width:1060px;margin:0 auto;padding:0 1.4rem} .flash{margin-top:.8rem;padding:.7rem 1rem;border-radius:10px;background:var(--felt-700); border-left:4px solid var(--brass)} .flash.error{border-left-color:var(--danger)} ul.plain{list-style:none;padding:0} /* ---- table room ---- */ .table-head{display:flex;justify-content:space-between;align-items:start;gap:1rem;flex-wrap:wrap} .mode-chip{font-family:var(--body);font-size:.68rem;font-weight:600;vertical-align:middle; background:var(--felt-700);border:1px solid rgba(201,162,39,.4);border-radius:99px; padding:.2rem .7rem;margin-left:.5rem;letter-spacing:.04em;text-transform:uppercase} .mode-chip.gold{background:var(--brass);color:var(--ink);border:0} .table-status{font-family:var(--mono);font-size:.85rem;background:var(--walnut); padding:.5rem .9rem;border-radius:10px} .table-controls{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;margin:1rem 0} .toggle-3d{font-size:.85rem;display:flex;gap:.4rem;align-items:center;margin-left:auto} .movelist ol{font-family:var(--mono);font-size:.85rem;columns:2;margin:.4rem 0;padding-left:1.4rem} .seat-chip{display:inline-block;border-radius:99px;padding:.15rem .7rem;margin-right:.4rem; font-size:.8rem;background:var(--felt-700);border:1px solid rgba(255,255,255,.2)} .c-r{border-color:#D6533C}.c-g{border-color:#4FA35C}.c-y{border-color:#E0B62E}.c-b{border-color:#3E7BB5} .dice-face{font-size:2rem;line-height:1} /* ---- the signature: felt stage + 3D perspective board ---- */ .board-stage{display:flex;justify-content:center;padding:2rem 0;perspective:1100px} .board{--cell:min(11vw,62px);transform-style:preserve-3d;transition:transform .6s ease; transform:scale(calc(var(--board-scale,100)/100))} .board-stage.threed .board{transform:rotateX(28deg) scale(calc(var(--board-scale,100)/100)); box-shadow:0 40px 60px -30px rgba(0,0,0,.7)} @media (prefers-reduced-motion:reduce){.board{transition:none}} /* chess & checkers grid */ .board.grid8{display:grid;grid-template-columns:repeat(8,var(--cell)); border:10px solid var(--walnut);border-radius:8px} .sq{width:var(--cell);height:var(--cell);display:flex;align-items:center;justify-content:center; font-size:calc(var(--cell)*.72);user-select:none;cursor:pointer;position:relative} .sq.light{background:#E7D9B8}.sq.dark{background:#7A5C3E} html[data-theme="felt"] .sq.dark{background:#276A52} .sq.sel{outline:3px solid var(--brass);outline-offset:-3px;z-index:1} .sq.hint::after{content:"";position:absolute;width:26%;height:26%;border-radius:50%; background:rgba(201,162,39,.85)} .sq.cap::after{width:88%;height:88%;background:none;border:4px solid rgba(201,162,39,.85)} .piece-w{color:#FBF6E8;text-shadow:0 2px 2px rgba(0,0,0,.55)} .piece-b{color:#1D1A16;text-shadow:0 1px 1px rgba(255,255,255,.25)} /* staunton3d piece set: extruded look */ .board[data-piece-set="staunton3d"] .sq span{ filter:drop-shadow(0 4px 2px rgba(0,0,0,.5));transform:translateZ(14px)} .board[data-piece-set="minimal"] .sq{font-size:calc(var(--cell)*.55)} /* checkers discs */ .disc{width:72%;height:72%;border-radius:50%; background:radial-gradient(circle at 35% 30%,#f4e6c9,#B9924E 60%,#8a6a33); box-shadow:0 3px 4px rgba(0,0,0,.5), inset 0 -3px 5px rgba(0,0,0,.35)} .disc.dark{background:radial-gradient(circle at 35% 30%,#5b5b5b,#232323 60%,#0d0d0d)} .disc.king::after{content:"♛";display:block;text-align:center;color:var(--brass-soft); font-size:calc(var(--cell)*.42);line-height:calc(var(--cell)*.68)} /* ludo 15x15 */ .board.grid15{display:grid;grid-template-columns:repeat(15,calc(var(--cell)*.55)); border:10px solid var(--walnut);border-radius:8px;background:#F5F0E1} .lsq{width:calc(var(--cell)*.55);height:calc(var(--cell)*.55);border:1px solid rgba(0,0,0,.12); display:flex;align-items:center;justify-content:center;position:relative;background:#F5F0E1} .lsq.base-r{background:#E8B3A9}.lsq.base-g{background:#B9DCC0} .lsq.base-y{background:#F2E3AE}.lsq.base-b{background:#B4CCE4} .lsq.path-r{background:#D6533C}.lsq.path-g{background:#4FA35C} .lsq.path-y{background:#E0B62E}.lsq.path-b{background:#3E7BB5} .lsq.safe::before{content:"★";position:absolute;font-size:.7em;opacity:.4} .tok{width:70%;height:70%;border-radius:50%;border:2px solid #fff;cursor:pointer; box-shadow:0 2px 3px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center; font-size:.6em;color:#fff;font-weight:700} .tok.movable{outline:3px solid var(--brass);animation:pulse 1s infinite alternate} @keyframes pulse{to{transform:scale(1.12)}} @media (prefers-reduced-motion:reduce){.tok.movable{animation:none}} .tok-r{background:#C2452F}.tok-g{background:#3E8E4C}.tok-y{background:#C7A11F}.tok-b{background:#31689C} /* snakes 10x10 */ .board.grid10{display:grid;grid-template-columns:repeat(10,calc(var(--cell)*.75)); border:10px solid var(--walnut);border-radius:8px;position:relative} .ssq{width:calc(var(--cell)*.75);height:calc(var(--cell)*.75);border:1px solid rgba(0,0,0,.15); font-size:.6rem;padding:2px;position:relative;background:#F5F0E1;color:#5c5443} .ssq:nth-child(odd){background:#EBE2C9} .ssq .num{position:absolute;top:2px;left:4px;opacity:.6} .ssq .jump{position:absolute;bottom:1px;right:3px;font-size:1.15em;text-shadow:0 0 2px #fff,0 0 2px #fff} .pawns{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-items:center; justify-content:center;gap:2px} .snl-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible} .snl-snake{stroke:#3E8E4C;stroke-width:.1;opacity:.8;fill:none;stroke-linecap:round} .snl-ladder{stroke:#A9702C;stroke-width:.08;opacity:.85;fill:none;stroke-linecap:round;stroke-dasharray:.05 .09} .snl-head{fill:#3E8E4C;opacity:.9} .snl-tail{fill:#A9702C;opacity:.9} .pawn{width:30%;height:30%;border-radius:50%;border:1.5px solid #fff; box-shadow:0 1px 2px rgba(0,0,0,.4)} .pawn.s0{background:#C2452F}.pawn.s1{background:#31689C}.pawn.s2{background:#3E8E4C} .pawn.s3{background:#C7A11F}.pawn.s4{background:#7B4FA0}.pawn.s5{background:#31A39A} /* bracket */ .bracket{display:flex;gap:1.4rem;overflow-x:auto;padding:1rem 0} .round{min-width:230px} .pairing{background:var(--felt-800);border:1px solid rgba(201,162,39,.3);border-radius:10px; padding:.6rem .8rem;margin-bottom:.7rem;display:flex;gap:.5rem;align-items:center; flex-wrap:wrap;font-size:.9rem} .pairing .vs{opacity:.5;font-size:.75rem} .pairing.decided{border-color:var(--pos)} :focus-visible{outline:3px solid var(--brass-soft);outline-offset:2px} /* ================= POLISH PASS ================= */ /* SVG pieces */ .pwrap{width:86%;height:86%;display:flex;align-items:center;justify-content:center;will-change:transform} .pwrap svg.pc{width:100%;height:100%;filter:drop-shadow(0 3px 3px rgba(0,0,0,.45))} .board[data-piece-set="staunton3d"] .pwrap svg.pc{filter:drop-shadow(0 6px 4px rgba(0,0,0,.55))} .board[data-piece-set="minimal"] .pwrap{width:66%;height:66%} .sq{transition:background .15s} .sq.lastmv{box-shadow:inset 0 0 0 999px rgba(201,162,39,.22)} .sq.sel{outline:3px solid var(--brass);outline-offset:-3px;z-index:2} .sq.hint::after{content:"";position:absolute;width:30%;height:30%;border-radius:50%; background:radial-gradient(circle,var(--brass-soft),var(--brass));opacity:.9; animation:hintpulse 1.2s ease-in-out infinite alternate} @keyframes hintpulse{to{transform:scale(1.25);opacity:.6}} @media (prefers-reduced-motion:reduce){.sq.hint::after{animation:none}} .ghost{position:fixed;z-index:50;width:52px;height:52px;pointer-events:none; transform:translate(-50%,-50%)} .ghost svg,.ghost .tok{width:100%;height:100%} /* turn glow on status chip */ .table-status.yours{background:linear-gradient(180deg,#3b6b2e,#274a1e); box-shadow:0 0 0 2px var(--brass),0 0 18px rgba(201,162,39,.5);color:#F5F0DF} /* ludo center + token depth */ .lsq.center{background:conic-gradient(#D6533C 0 90deg,#4FA35C 90deg 180deg, #E0B62E 180deg 270deg,#3E7BB5 270deg 360deg)} .tok{box-shadow:0 3px 4px rgba(0,0,0,.5), inset 0 -4px 4px rgba(0,0,0,.3), inset 0 3px 3px rgba(255,255,255,.35)} /* ---- 3D dice cube ---- */ .dice-face{display:inline-block} .dice3d{width:56px;height:56px;perspective:420px} .cube{width:100%;height:100%;position:relative;transform-style:preserve-3d; transform:rotateX(0) rotateY(0)} .face{position:absolute;inset:0;background:linear-gradient(160deg,#FBF6E8,#D9CDB0); border:1.5px solid #8a6f3a;border-radius:10px;display:grid;place-items:center; grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:8px} .face i{width:9px;height:9px;border-radius:50%;background:#1D1A16;justify-self:center;align-self:center} .face.f1 i{grid-area:2/2} .face.f2 i:nth-child(1){grid-area:1/1}.face.f2 i:nth-child(2){grid-area:3/3} .face.f3 i:nth-child(1){grid-area:1/1}.face.f3 i:nth-child(2){grid-area:2/2}.face.f3 i:nth-child(3){grid-area:3/3} .face.f4 i:nth-child(1){grid-area:1/1}.face.f4 i:nth-child(2){grid-area:1/3} .face.f4 i:nth-child(3){grid-area:3/1}.face.f4 i:nth-child(4){grid-area:3/3} .face.f5 i:nth-child(1){grid-area:1/1}.face.f5 i:nth-child(2){grid-area:1/3} .face.f5 i:nth-child(3){grid-area:2/2}.face.f5 i:nth-child(4){grid-area:3/1}.face.f5 i:nth-child(5){grid-area:3/3} .face.f6 i:nth-child(1){grid-area:1/1}.face.f6 i:nth-child(2){grid-area:2/1}.face.f6 i:nth-child(3){grid-area:3/1} .face.f6 i:nth-child(4){grid-area:1/3}.face.f6 i:nth-child(5){grid-area:2/3}.face.f6 i:nth-child(6){grid-area:3/3} .face.f1{transform:translateZ(28px)}.face.f2{transform:rotateY(90deg) translateZ(28px)} .face.f3{transform:rotateX(90deg) translateZ(28px)}.face.f4{transform:rotateX(-90deg) translateZ(28px)} .face.f5{transform:rotateY(-90deg) translateZ(28px)}.face.f6{transform:rotateY(180deg) translateZ(28px)} /* ---- overlay + confetti ---- */ .overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center; background:rgba(10,25,18,.78);backdrop-filter:blur(3px);animation:fadein .3s ease} @keyframes fadein{from{opacity:0}} .overlay-card{background:var(--felt-800);border:2px solid var(--brass);border-radius:18px; padding:2.2rem 3rem;text-align:center;animation:cardpop .45s cubic-bezier(.2,.9,.3,1.3)} @keyframes cardpop{from{transform:scale(.7);opacity:0}} @media (prefers-reduced-motion:reduce){.overlay,.overlay-card{animation:none}} .overlay-card h2{font-size:2rem;margin:.2rem 0 .4rem;color:var(--brass-soft)} .confetti{position:fixed;top:-12px;z-index:70;border-radius:2px;pointer-events:none; animation:confall linear forwards} @keyframes confall{to{transform:translateY(105vh) rotate(720deg);opacity:.8}} /* ---- landing page ---- */ .landing-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:2.5rem;align-items:center; padding:3rem 0 2rem} @media(max-width:820px){.landing-hero{grid-template-columns:1fr}} .landing-hero h1{font-size:clamp(2.1rem,5.5vw,3.6rem)} .landing-hero .cta{font-size:1.05rem;padding:.8rem 1.6rem} .hero-board{perspective:900px} .hero-board .demo{width:min(380px,80vw);aspect-ratio:1;margin:auto; display:grid;grid-template-columns:repeat(8,1fr);border:12px solid var(--walnut); border-radius:10px;transform:rotateX(26deg) rotateZ(-6deg); box-shadow:0 50px 70px -35px rgba(0,0,0,.8);animation:heroFloat 7s ease-in-out infinite alternate} @keyframes heroFloat{to{transform:rotateX(22deg) rotateZ(-3deg) translateY(-10px)}} @media (prefers-reduced-motion:reduce){.hero-board .demo{animation:none}} .hero-board .demo div{aspect-ratio:1;display:flex;align-items:center;justify-content:center} .hero-board .demo div svg{width:82%;height:82%;filter:drop-shadow(0 4px 3px rgba(0,0,0,.5))} .feature-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1rem;margin:2rem 0} .feature-row .card{margin:0} .feature-row h3{margin:.1rem 0 .4rem;color:var(--brass-soft)} /* ================= KADI / CARDS ================= */ .kadi-table,.dom-table,.pitch{display:flex;flex-direction:column;align-items:center; gap:1rem;width:min(680px,94vw)} .opps{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center} .opp{background:var(--felt-800);border:1px solid rgba(201,162,39,.3);border-radius:12px; padding:.4rem .9rem;font-size:.85rem;display:flex;flex-direction:column;align-items:center} .opp.active{border-color:var(--brass);box-shadow:0 0 12px rgba(201,162,39,.4)} .opp b{color:var(--brass-soft)} .niko-badge{color:#E8A79A;font-style:normal;font-size:.7rem;font-weight:700; animation:hintpulse 1s infinite alternate} .kadi-mid{display:flex;gap:1.4rem;align-items:center} .kadi-flags{display:flex;flex-direction:column;gap:.4rem} .flag{background:var(--felt-700);border:1px solid var(--brass);border-radius:8px; padding:.25rem .7rem;font-size:.85rem} .flag.danger{border-color:var(--danger);color:#E8A79A;font-weight:700} .kadi-anchor{display:flex;flex-direction:column;align-items:center;gap:.3rem} .kadi-anchor span{font-size:.7rem;color:var(--brass-soft);text-transform:uppercase;letter-spacing:.04em} .pcard.sm{width:38px;height:55px;cursor:default} .pcard.sm b{font-size:.85rem} .pcard.sm i{font-size:.8rem} .pcard.sm.joker{font-size:1rem} .pcard{width:64px;height:92px;border-radius:9px;background:linear-gradient(160deg,#FDFAF0,#E4DAC0); color:#1D1A16;border:1.5px solid #9c8c66;position:relative;cursor:pointer;user-select:none; box-shadow:0 3px 6px rgba(0,0,0,.4);display:flex;flex-direction:column; align-items:center;justify-content:center;transition:transform .15s} .pcard b{font-family:var(--display);font-size:1.3rem} .pcard i{font-style:normal;font-size:1.5rem} .pcard.red{color:#B3402E} .pcard.sel{transform:translateY(-14px);outline:3px solid var(--brass)} .pcard.joker{color:#7B4FA0;font-size:1.6rem} .pcard.joker span{font-size:.55rem;letter-spacing:.15em} .pcard.back{background:repeating-linear-gradient(45deg,#155040,#155040 6px,#0E3B2E 6px,#0E3B2E 12px); border-color:var(--brass);color:var(--brass-soft);cursor:default} .pcard.back span{font-family:var(--mono);font-size:.9rem} .topcard .pcard{cursor:default;width:74px;height:106px} .hand{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;padding:.6rem; background:rgba(0,0,0,.18);border-radius:14px;min-height:104px} .hand .pcard:hover{transform:translateY(-8px)} .hand .pcard.sel:hover{transform:translateY(-14px)} .niko{display:flex;gap:.4rem;align-items:center;font-weight:700;color:#E8A79A} /* ================= DOMINOES ================= */ .dom-line{display:flex;gap:4px;align-items:center;max-width:94vw;overflow-x:auto; padding:.8rem;background:rgba(0,0,0,.18);border-radius:14px;min-height:60px} .dtile{display:flex;background:linear-gradient(160deg,#FDFAF0,#E0D6BC);border:1.5px solid #6b5c3c; border-radius:7px;box-shadow:0 2px 4px rgba(0,0,0,.4);flex:none} .dtile hr{border:none;border-left:1.5px solid #6b5c3c;margin:3px 0;align-self:stretch} .dtile.v{flex-direction:column} .dtile.v hr{border-left:none;border-top:1.5px solid #6b5c3c;margin:0 3px} .pips{width:30px;height:30px;display:grid;grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);padding:3px} .pips i{width:6px;height:6px;border-radius:50%;background:#1D1A16;place-self:center} .pips.p1 i{grid-area:2/2} .pips.p2 i:nth-child(1){grid-area:1/1}.pips.p2 i:nth-child(2){grid-area:3/3} .pips.p3 i:nth-child(1){grid-area:1/1}.pips.p3 i:nth-child(2){grid-area:2/2}.pips.p3 i:nth-child(3){grid-area:3/3} .pips.p4 i:nth-child(1){grid-area:1/1}.pips.p4 i:nth-child(2){grid-area:1/3} .pips.p4 i:nth-child(3){grid-area:3/1}.pips.p4 i:nth-child(4){grid-area:3/3} .pips.p5 i:nth-child(1){grid-area:1/1}.pips.p5 i:nth-child(2){grid-area:1/3}.pips.p5 i:nth-child(3){grid-area:2/2} .pips.p5 i:nth-child(4){grid-area:3/1}.pips.p5 i:nth-child(5){grid-area:3/3} .pips.p6 i:nth-child(1){grid-area:1/1}.pips.p6 i:nth-child(2){grid-area:2/1}.pips.p6 i:nth-child(3){grid-area:3/1} .pips.p6 i:nth-child(4){grid-area:1/3}.pips.p6 i:nth-child(5){grid-area:2/3}.pips.p6 i:nth-child(6){grid-area:3/3} .hand .dtile{opacity:.55;cursor:default} .hand .dtile.playable{opacity:1;cursor:pointer;transition:transform .15s} .hand .dtile.playable:hover{transform:translateY(-8px)} .dom-info{margin:-0.4rem 0 0} /* ================= PENALTY ================= */ .scoreboard{display:flex;gap:1.2rem;align-items:center;font-family:var(--display)} .scoreboard>div{display:flex;flex-direction:column;align-items:center;background:var(--felt-800); border:1px solid rgba(201,162,39,.3);border-radius:12px;padding:.5rem 1.3rem} .scoreboard>div.shooting{border-color:var(--brass);box-shadow:0 0 12px rgba(201,162,39,.4)} .scoreboard b{font-size:1.9rem;color:var(--brass-soft)} .scoreboard em{opacity:.5} .scoreboard small{letter-spacing:2px} .goal{position:relative;width:min(420px,90vw);height:220px;margin-top:.6rem; background:linear-gradient(#2c7a4b 0 62%,#3a8f5c 62%);border-radius:12px;overflow:hidden} .net{position:absolute;left:8%;right:8%;top:10%;height:52%; border:5px solid #F2EDDF;border-bottom:none;border-radius:8px 8px 0 0; background:repeating-linear-gradient(90deg,transparent 0 12px,rgba(242,237,223,.35) 12px 13px), repeating-linear-gradient(0deg,transparent 0 12px,rgba(242,237,223,.35) 12px 13px)} .keeper{position:absolute;left:50%;top:26%;transform:translateX(-50%);font-size:2.2rem; transition:transform .4s} .zones{position:absolute;left:8%;right:8%;top:12%;height:48%;display:grid; grid-template-columns:1fr 1fr 1fr;gap:6px;padding:6px} .zone{background:rgba(201,162,39,.12);border:2px dashed rgba(227,197,103,.6);border-radius:8px; font-size:1.5rem;color:var(--brass-soft)} .zone:not(:disabled):hover{background:rgba(201,162,39,.3)} .zone:disabled{opacity:.35;cursor:default} .ball{position:absolute;left:50%;bottom:8%;transform:translate(-50%,0);font-size:1.7rem} .pen-log{font-family:var(--mono);font-size:.8rem;opacity:.85;margin:0;padding-left:1.2rem} .role-line{font-weight:600;margin:0} /* ================= POOL ================= */ .pool-wrap{display:flex;flex-direction:column;align-items:center;gap:.6rem} .pool-table{border:14px solid var(--walnut);border-radius:16px;touch-action:none; box-shadow:0 24px 40px -20px rgba(0,0,0,.7);cursor:crosshair;max-width:94vw} #power{accent-color:var(--brass);width:140px} .pool-balls{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.2rem;font-size:.85rem;max-width:94vw} .pool-balls .grp{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem} .ball-chip{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px; border-radius:50%;background:var(--bc);color:#fff;font:700 10px/1 var(--mono); text-shadow:0 1px 1px rgba(0,0,0,.6);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)} .ball-chip.stripe{box-shadow:inset 0 0 0 3px #F5F0DF, inset 0 0 0 1px rgba(0,0,0,.35)} /* ================= WORDSMITH ================= */ .words-wrap{display:flex;flex-direction:column;align-items:center;gap:.8rem} .wboard{display:grid;grid-template-columns:repeat(15,min(5.8vw,32px));gap:1.5px; background:var(--walnut);padding:6px;border-radius:10px} .wsq{width:min(5.8vw,32px);height:min(5.8vw,32px);background:#DED3B8;border-radius:3px; display:flex;align-items:center;justify-content:center;position:relative; font-size:.55rem;color:#7a6f56;cursor:pointer;user-select:none} .wsq::after{content:attr(data-p);opacity:.8} .wsq.tw{background:#D6533C;color:#fff}.wsq.dw{background:#E8A79A;color:#7a2f22} .wsq.tl{background:#3E7BB5;color:#fff}.wsq.dl{background:#AECBE4;color:#274a68} .wsq.star{background:#E8A79A} .wsq.tile{background:linear-gradient(160deg,#FBF3DC,#E0D3AC);color:#1D1A16; box-shadow:0 2px 3px rgba(0,0,0,.4);border:1px solid #a6935f} .wsq.tile::after{content:""} .wsq.tile b{font-family:var(--display);font-size:.95rem} .wsq.tile i{position:absolute;bottom:1px;right:2px;font-size:.5rem;font-style:normal} .wsq.tile.fresh{outline:2px solid var(--brass);animation:cardpop .25s ease} .wrack{padding:.5rem .8rem} .wrack .racktile{width:40px;height:40px} .wrack .racktile b{font-size:1.2rem} .wrack .selr{transform:translateY(-8px);outline:3px solid var(--brass)} /* ================= COMMAND CENTRE ================= */ .dash-head{padding:1.4rem 0 .4rem} .stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1rem;margin:1rem 0} .scard{background:linear-gradient(180deg,var(--felt-800),var(--felt-900)); border:1px solid rgba(201,162,39,.35);border-radius:var(--radius);padding:1rem 1.2rem; display:flex;flex-direction:column;gap:.15rem} .scard span{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;opacity:.7} .scard b{font-family:var(--display);font-size:1.55rem;color:var(--brass-soft)} .scard small{font-size:.75rem;opacity:.65} .card canvas{max-height:260px} .toggle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.8rem;margin:.8rem 0} .gtoggle{width:100%;display:flex;flex-direction:column;gap:.2rem;align-items:flex-start; padding:.8rem 1rem;border-radius:12px;border:1.5px solid rgba(242,237,223,.25); background:var(--felt-900);opacity:.65} .gtoggle span{font-size:.7rem;letter-spacing:.12em;font-weight:700} .gtoggle.on{border-color:var(--brass);opacity:1; background:linear-gradient(180deg,var(--felt-700),var(--felt-800))} .gtoggle.on span{color:#9BD8B0} .gtoggle:not(.on) span{color:#E8A79A} .ledger th{text-align:left;padding:.45rem .5rem;font-size:.78rem;letter-spacing:.05em; text-transform:uppercase;opacity:.6;border-bottom:1px solid rgba(201,162,39,.3)} /* ═══════════════════ VISUAL REFRESH, modern casino polish ═══════════════════ */ :root{ --line:rgba(227,197,103,.22); --line-strong:rgba(227,197,103,.45); --glow:0 0 22px rgba(201,162,39,.35); --card-grad:linear-gradient(165deg, rgba(30,99,80,.38), rgba(10,43,33,.15) 55%); } /* deep layered felt with a table spotlight */ body{background: radial-gradient(1100px 540px at 18% -8%, rgba(30,99,80,.9), transparent 62%), radial-gradient(900px 480px at 86% -6%, rgba(21,80,64,.75), transparent 55%), radial-gradient(1600px 900px at 50% 118%, rgba(4,18,14,.95), transparent 70%), var(--felt-900)} /* sticky glass header */ .rail{position:sticky;top:0;z-index:40; background:linear-gradient(rgba(10,43,33,.94),rgba(10,43,33,.80)); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line-strong);box-shadow:0 10px 30px -18px rgba(0,0,0,.8)} .rail.foot{position:static;backdrop-filter:none;box-shadow:none; border-top:1px solid var(--line);background:transparent} .foot-inner{display:flex;flex-direction:column;gap:.25rem;align-items:center;text-align:center} .foot-fine{font-size:.75rem;opacity:.6} .brand{display:flex;align-items:center;gap:.45rem;letter-spacing:-.02em} .brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px; background:linear-gradient(160deg,#F3D677,#C9A227 60%,#A87F16);color:var(--ink); font-size:1.25rem;box-shadow:0 3px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.5)} nav a{padding:.42rem .8rem;border-radius:99px;transition:background .18s,color .18s} nav a:hover{background:rgba(227,197,103,.13);color:var(--brass-soft)} .wallet-chip{border:1px solid var(--line-strong);background:rgba(201,162,39,.1); font-weight:700;color:var(--brass-soft)!important} .wallet-chip:hover{box-shadow:var(--glow)} /* cards: layered glass with hover lift */ .card{background:var(--card-grad), var(--felt-800); border:1px solid var(--line); box-shadow:0 20px 44px -26px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.04); transition:border-color .2s, box-shadow .2s} .card:hover{border-color:var(--line-strong)} /* buttons */ button,.cta{transition:transform .15s, box-shadow .2s, background .2s, border-color .2s} .cta{background:linear-gradient(135deg,#F3D677 0%,#E3C567 30%,#C9A227 70%,#A87F16 100%); box-shadow:0 3px 0 #7d651a, 0 8px 22px -10px rgba(201,162,39,.55); text-shadow:0 1px 0 rgba(255,255,255,.35)} .cta:hover{transform:translateY(-1.5px);box-shadow:0 4px 0 #7d651a, var(--glow)} .cta:active{transform:translateY(1px);box-shadow:0 1px 0 #7d651a} button:not(.cta):not(.link):hover{border-color:var(--brass-soft);box-shadow:0 0 12px rgba(201,162,39,.25)} button.danger:hover{box-shadow:0 0 12px rgba(179,64,46,.4)} button:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none} /* inputs */ input,select{transition:border-color .18s, box-shadow .18s} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brass-soft); background:var(--felt-800); box-shadow:inset 0 1px 4px rgba(0,0,0,.3), 0 0 0 3px rgba(201,162,39,.22)} /* flashes slide in */ .flash{animation:flashin .35s cubic-bezier(.2,.9,.3,1.2);box-shadow:0 10px 24px -14px rgba(0,0,0,.6)} @keyframes flashin{from{transform:translateY(-8px);opacity:0}} @media (prefers-reduced-motion:reduce){.flash{animation:none}} /* lobby game picker */ .game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:.55rem;margin:.2rem 0 .4rem} .gpick{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.65rem .3rem .55rem; border:1.5px solid var(--line);border-radius:12px;background:rgba(10,43,33,.5);cursor:pointer; user-select:none;transition:transform .15s, border-color .15s, box-shadow .15s, background .15s; text-align:center} .gpick:hover{transform:translateY(-2px);border-color:var(--line-strong)} .gpick .gi{font-size:1.6rem;line-height:1.1;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))} .gpick .gn{font-size:.72rem;font-weight:600;letter-spacing:.02em} .gpick .gp{font-size:.62rem;opacity:.6} .gpick.sel{border-color:var(--brass);background:rgba(201,162,39,.14);box-shadow:var(--glow)} .gpick.sel .gn{color:var(--brass-soft)} .visually-hidden-row{position:absolute!important;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap} /* rules panel */ .rules{padding:0;overflow:hidden} .rules summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6rem; font-family:var(--display);font-weight:700;font-size:1.02rem;padding:1rem 1.3rem; transition:background .18s} .rules summary::-webkit-details-marker{display:none} .rules summary::after{content:"▾";margin-left:auto;color:var(--brass-soft); transition:transform .25s} .rules[open] summary::after{transform:rotate(180deg)} .rules summary:hover{background:rgba(227,197,103,.07)} .rules-icon{font-size:1.15rem} .rules-body{padding:0 1.4rem 1.2rem;border-top:1px solid var(--line); animation:rulesin .25s ease} @keyframes rulesin{from{opacity:0;transform:translateY(-6px)}} .rules-body ul{margin:.9rem 0 .6rem;padding-left:1.2rem;display:flex;flex-direction:column;gap:.45rem; font-size:.92rem} .rules-body li::marker{color:var(--brass)} .rules-body b{color:var(--brass-soft)} /* room polish */ .table-room h1{margin:.2rem 0 .3rem} .table-controls{background:rgba(10,43,33,.55);border:1px solid var(--line);border-radius:14px; padding:.7rem .9rem;backdrop-filter:blur(8px)} .board-stage{background: radial-gradient(60% 70% at 50% 42%, rgba(227,197,103,.07), transparent 70%); border-radius:24px} .movelist ol:empty::after{content:"No moves yet, game on!";font-family:var(--body); opacity:.5;font-size:.85rem} .table-status{border:1px solid var(--line)} .seat-chip{background:rgba(10,43,33,.7);font-weight:600} /* tables & scrollbars */ .ledger tr{transition:background .15s} .ledger tr:hover{background:rgba(227,197,103,.05)} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(201,162,39,.35);border-radius:99px} ::-webkit-scrollbar-thumb:hover{background:rgba(201,162,39,.6)} /* landing stats strip */ .stat-strip{display:flex;gap:1rem;flex-wrap:wrap;margin:1.4rem 0 .4rem} .stat-pill{display:flex;flex-direction:column;padding:.6rem 1.2rem;border-radius:14px; border:1px solid var(--line);background:rgba(10,43,33,.55)} .stat-pill b{font-family:var(--display);font-size:1.25rem;color:var(--brass-soft)} .stat-pill span{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;opacity:.65} .feature-row .card{position:relative;overflow:hidden} .feature-row .card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px; background:linear-gradient(90deg,transparent,var(--brass),transparent);opacity:.5} .feature-ico{font-size:1.5rem;display:block;margin-bottom:.3rem; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))} /* light theme readability for the new layers */ html[data-theme="light"] body{background:var(--felt-900)} html[data-theme="light"] .rail{background:rgba(242,237,223,.9)} html[data-theme="light"] .card{background:var(--felt-700)} html[data-theme="light"] .table-controls, html[data-theme="light"] .gpick, html[data-theme="light"] .stat-pill{background:rgba(255,255,255,.65)} /* the hidden attribute must always win, even over display:flex rules */ [hidden]{display:none!important} /* ═══════════════════ MOBILE RESPONSIVE ═══════════════════ */ /* forms: stretch every real field to the container width, whether it's the site's hand-rolled `.stack` markup or Django's `{{ form.as_p }}` output */ form input:not([type=checkbox]):not([type=radio]):not([type=range]), form select, form textarea { width: 100%; } form p { margin: 0 0 .9rem; } form p label { display: block; margin-bottom: .35rem; font-size: .9rem; opacity: .9; } form p input[type=checkbox], form p input[type=radio] { margin-right: .4rem; } /* input+button rows (wallet top-up/withdraw): let the input flex, button keeps its natural width until there's truly no room, then stack */ .row { flex-wrap: wrap; min-width: 0; } .row input { flex: 1 1 auto; min-width: 0; } .row button, .row .cta { flex: 1 1 auto; min-width: 0; white-space: normal; text-align: center; } @media (max-width: 480px) { .row { flex-direction: column; align-items: stretch; } } /* any ledger-style table scrolls inside its own box instead of the page */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -0.2rem; } .table-scroll table { min-width: 480px; } .pager{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:.8rem;flex-wrap:wrap} .pager-btn{color:var(--brass-soft);text-decoration:none;font-size:.85rem;font-weight:600; padding:.3rem .7rem;border:1px solid rgba(227,197,103,.35);border-radius:999px;transition:background .15s} .pager-btn:hover{background:rgba(227,197,103,.14)} .pager-btn.disabled{opacity:.35;pointer-events:none} .pager-info{font-size:.8rem;opacity:.7} .bracket, .dom-line { -webkit-overflow-scrolling: touch; } /* hamburger nav toggle, hidden on desktop, shown once the header can't comfortably fit every link on one line */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 36px; padding: 0; background: transparent; border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer; } .nav-toggle span { display: block; width: 18px; height: 2px; margin: 0 auto; background: var(--brass-soft); border-radius: 2px; transition: transform .2s, opacity .2s; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 760px) { .rail { flex-wrap: nowrap; padding: .7rem 1rem; } .nav-toggle { display: flex; } nav#siteNav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--felt-900); border-bottom: 1px solid var(--line-strong); box-shadow: 0 16px 30px -20px rgba(0,0,0,.9); padding: .4rem; } nav#siteNav.open { display: flex; } header.rail { position: relative; } nav#siteNav a, nav#siteNav form, nav#siteNav button.link { width: 100%; box-sizing: border-box; text-align: left; padding: .8rem .9rem; border-radius: 10px; margin: 0; } nav#siteNav form.inline { display: block; } nav#siteNav button.link { width: 100%; text-align: left; font-size: .93rem; } nav#siteNav a:hover, nav#siteNav button.link:hover { background: rgba(227,197,103,.1); } nav#siteNav .wallet-chip { border-color: var(--line); } } @media (max-width: 640px) { main { padding: 1rem .9rem; } .flashes { padding: 0 .9rem; } h1 { font-size: clamp(1.5rem, 6vw, 2rem); } .card { padding: 1rem; } .board-stage { padding: 1rem 0; } .table-head { flex-direction: column; align-items: flex-start; gap: .5rem; } .table-status { align-self: stretch; text-align: center; } .movelist ol { columns: 1; } .cta.small { padding: .5rem 1rem; } .table-controls { gap: .55rem; } .table-controls button, .table-controls .cta { flex: 1 1 auto; min-width: 44%; } .toggle-3d { margin-left: 0; flex-basis: 100%; justify-content: flex-start; } .landing-hero { padding: 1.6rem 0 1rem; } .stat-strip { gap: .6rem; } .stat-pill { padding: .5rem 1rem; flex: 1 1 40%; } .kadi-mid { gap: .7rem; } .scoreboard { gap: .6rem; } .scoreboard > div { padding: .4rem .8rem; } .goal { width: 100%; } } @media (max-width: 420px) { .pcard { width: 54px; height: 78px; } .pcard b { font-size: 1.05rem; } .topcard .pcard { width: 62px; height: 90px; } .wrack .racktile { width: 34px; height: 34px; } .wrack .racktile b { font-size: 1rem; } } /* the decorative hero board's rotateZ tilt projects a slightly wider bounding box than its layout width, give it room on narrow phones */ .hero-board { overflow: hidden; padding: 0 .5rem; } @media (max-width: 420px) { .hero-board .demo { width: min(380px, 68vw); } } /* checkbox + label row (e.g. "stake against the computer") */ .checkline{display:flex;gap:.5rem;align-items:flex-start;font-size:.88rem; line-height:1.4;cursor:pointer} .checkline input[type=checkbox]{margin-top:.2rem;width:auto;accent-color:var(--brass);flex:none} /* ================= SETTINGS / PROFILE ================= */ .settings-hero{padding:1.6rem 0 1rem} html{scroll-behavior:smooth} .settings-card{scroll-margin-top:5.5rem} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} .settings-nav{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.2rem; padding:.4rem;background:rgba(10,43,33,.5);border:1px solid var(--line); border-radius:14px;width:fit-content} .settings-nav a{display:flex;align-items:center;gap:.4rem;padding:.5rem 1rem; border-radius:10px;font-size:.88rem;font-weight:600;color:var(--ivory); text-decoration:none;transition:background .15s,color .15s} .settings-nav a span{font-size:1rem} .settings-nav a:hover{background:rgba(227,197,103,.12);color:var(--brass-soft)} .settings-card h2{display:flex;align-items:center;gap:.6rem;margin-bottom:.3rem} .sec-ico{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px; background:linear-gradient(160deg,rgba(227,197,103,.28),rgba(201,162,39,.12)); font-size:1.05rem;flex:none} .settings-card{position:relative;overflow:hidden} .settings-card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px; background:linear-gradient(90deg,var(--brass),transparent 70%);opacity:.7} .profile-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.7rem;margin:1rem 0 1.1rem} .pstat{display:flex;flex-direction:column;gap:.2rem;padding:.7rem .9rem;border-radius:12px; border:1px solid var(--line);background:rgba(10,43,33,.5);transition:border-color .15s,transform .15s} .pstat:hover{border-color:var(--line-strong);transform:translateY(-1px)} .pstat span{font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;opacity:.6} .pstat b{font-family:var(--display);font-size:1.2rem;color:var(--brass-soft)} .verified-badge{font-family:var(--body)!important;font-size:.76rem!important; font-weight:700!important;letter-spacing:.02em;padding:.2rem .55rem!important; border-radius:99px;width:fit-content;margin-top:.1rem} .verified-badge.yes{color:#9BD8B0;background:rgba(79,163,92,.16);border:1px solid rgba(79,163,92,.4)} .verified-badge.no{color:#E8A79A;background:rgba(214,83,60,.14);border:1px solid rgba(214,83,60,.4)} .resend-link{color:var(--brass-soft);font-weight:600;margin-bottom:.4rem;display:inline-block} .profile-form{margin-top:.6rem} .stack-row{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap} /* ================= AUTH PAGES ================= */ /* Django's default per-field help text (password rules, username charset notes, etc.), validation itself is untouched server-side, we just don't surface the boilerplate instructions; real errors still render via .errorlist and stay fully visible. The password-rules text is a