:root{--ink:#183d35;--muted:#738079;--cream:#f5f3e9;--paper:#fffef7;--green:#164e43;--yellow:#ead653;--line:#dcded3;--teal:#64c2b4;font-family:'Segoe UI',Arial,sans-serif;color:var(--ink);background:var(--cream);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #d3b72f;outline-offset:4px}input:focus,select:focus{outline:2px solid #8fae8b;outline-offset:1px}.topbar{height:92px;max-width:1500px;margin:auto;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:11px;font-weight:900;letter-spacing:1.2px;font-size:22px;line-height:1.02}.brand small{display:block;font-size:10px;letter-spacing:5px;margin-top:5px}.brand-icon{font-size:40px;transform:rotate(-12deg);line-height:1}.top-right{display:flex;align-items:center;gap:25px}.connection{font-size:11px;color:var(--muted);display:flex;gap:8px;align-items:center}.connection i,.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#79a678}.connection.offline i{background:#da954b}.icon-button{height:34px;width:34px;border:1px solid #bdc9bf;border-radius:50%;background:transparent;color:var(--ink);font-weight:600;font-size:18px}.home{max-width:1500px;margin:auto;padding:0 5%}.hero{display:grid;grid-template-columns:1fr 1fr;min-height:440px;align-items:center;gap:20px}.hero-copy{padding:45px 0 38px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:1.8px;display:block}.hero-copy .eyebrow{display:flex;align-items:center;gap:11px}.tiny-line{display:inline-block;width:25px;height:2px;background:var(--green)}h1,h2,h3,p{margin:0}h1{font-size:clamp(48px,5.2vw,76px);font-weight:750;line-height:1.02;letter-spacing:-3.5px;margin:23px 0}h1 em{font-family:Georgia,serif;font-weight:400}.hero-copy p{font-size:15px;line-height:1.8;color:#697a70}.hero-details{display:flex;gap:21px;font-size:10px;margin-top:28px;font-weight:600;color:#748477}.hero-art{height:370px;position:relative;overflow:hidden;display:grid;place-items:center}.orbit{position:absolute;border:1px solid #d9ddcf;border-radius:50%;height:310px;width:450px;transform:rotate(-23deg)}.orbit-two{height:220px;width:520px;transform:rotate(31deg)}.floating-card{position:absolute;width:260px;aspect-ratio:1.5;overflow:hidden;border-radius:10px;box-shadow:0 3px 0 #a2a897,0 5px 0 #e5e7de,0 8px 0 #8e9a85,0 20px 30px #183c3533;background:#1d2420}.floating-card img,.card-face img{position:absolute;width:106.6667%;height:110%;left:-3.3333%;top:-5%;max-width:none;object-fit:fill;user-select:none}.card-a{transform:translate(-84px,-25px) rotate(-22deg)}.card-b{transform:translate(74px,-30px) rotate(17deg)}.card-c{transform:translate(0,67px) rotate(-3deg);z-index:2}.spark{position:absolute;font-size:34px;color:#95a08a}.spark-one{left:7%;top:35px}.spark-two{right:7%;bottom:40px;color:#cbb747;font-size:48px}.art-label{position:absolute;right:12px;top:16px;font-size:9px;letter-spacing:2px;transform:rotate(8deg);color:#899680}.table-stamp{position:absolute;bottom:5px;left:20px;font-size:9px;letter-spacing:2px;line-height:1.6;transform:rotate(-12deg);color:#7f8f78;text-align:center}.table-stamp b{font-size:12px}.table-stamp small{display:block;font-size:7px}.setup{display:grid;grid-template-columns:1fr 270px;gap:36px;border-top:1px solid var(--line);padding-top:30px}.section-title{display:flex;align-items:center;gap:13px;margin-bottom:22px}.section-title h2{font-size:18px;font-weight:650;letter-spacing:-.4px}.step{font-size:10px;border:1px solid #b9c3af;border-radius:50%;padding:6px}.subtle{margin-left:auto;font-size:10px;color:var(--muted)}.mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.mode{min-height:188px;text-align:left;background:transparent;border:1px solid #d4d9ca;border-radius:12px;padding:16px 14px;color:var(--ink);transition:transform .2s,border-color .2s,background .2s}.mode:hover{transform:translateY(-4px);border-color:#6e9076}.mode.selected{border:1.5px solid #486c47;background:#e9eddd;box-shadow:0 3px 0 #d7dfc7}.mode-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.mode-icon{font-family:Georgia,serif;font-size:25px;line-height:1;width:38px;height:36px;display:grid;place-items:center;background:#ead653;border-radius:7px}.mode-icon.colors{background:#73c1b2}.mode-icon.practice{background:#d8ddc8}.mode-icon.challenge{background:#285447;color:#f5f1d6}.mode-check{font-size:13px}.mode .eyebrow{font-size:6.8px;letter-spacing:.9px}.mode strong{display:block;font-size:17px;margin-top:7px;font-weight:650;letter-spacing:-.4px}.mode-desc{display:block;font-size:10px;line-height:1.55;color:#70806f;margin-top:8px}.create-form{display:grid;grid-template-columns:1fr 150px 190px;gap:14px;align-items:end;margin:25px 0 30px}label{display:flex;flex-direction:column;gap:8px;font-size:10px;font-weight:650}input,select{width:100%;border:1px solid #cfd7c8;border-radius:7px;height:45px;padding:0 13px;background:#fffef8;color:var(--ink);font-size:13px}input::placeholder{color:#98a292}.primary,.secondary,.cream-button{border:0;border-radius:7px;padding:14px 18px;min-height:45px;font-weight:650;font-size:12px;display:inline-flex;align-items:center;justify-content:space-between;gap:20px}.primary{background:var(--green);color:white}.primary:hover:not(:disabled){background:#236653}.primary span,.secondary span{font-size:17px}.join-panel{border-left:1px solid var(--line);padding-left:30px}.join-panel .eyebrow{font-size:8px;letter-spacing:1.4px}.join-panel h2{font:italic 35px/1.1 Georgia,serif;letter-spacing:-1px;margin:13px 0}.join-panel p{font-size:11px;line-height:1.6;color:var(--muted);margin-bottom:17px}.join-panel form{display:grid;gap:12px}.code-input{font-weight:700;letter-spacing:4px;text-transform:uppercase}.secondary{border:1px solid #bfcbb5;color:var(--green);background:transparent;width:100%}.secondary:hover{background:#e6ebdc}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:23px 0;margin-top:12px;font-size:9px;color:#8a9685}footer>span:first-child{font-weight:700;letter-spacing:1px}footer button{border:0;background:none;font-size:10px;color:var(--ink)}.room-view{max-width:1500px;margin:auto;padding:0 5% 32px}.room-top{display:flex;align-items:center;gap:25px;padding:28px 0}.room-top h1{font-size:34px;letter-spacing:-1.3px;margin:7px 0 0;display:flex;align-items:center;gap:14px}.room-top .eyebrow{font-size:8px}.mode-dot{width:10px;height:10px;background:var(--yellow);border-radius:50%}.mode-dot.colors{background:var(--teal)}.room-code{margin-left:auto;display:flex;align-items:center;gap:13px;background:#e9ecdf;border-radius:8px;padding:8px 12px}.room-code small{font-size:8px;letter-spacing:1px}.room-code b{font-size:17px;letter-spacing:2px}.room-code .icon-button{border:0}.text-button{background:transparent;border:0;padding:10px 0;font-size:11px;color:var(--muted)}.lobby-layout{display:grid;grid-template-columns:1fr 310px;gap:25px}.lobby-table,.felt{background-color:#174c40;background-image:radial-gradient(ellipse at 50% 20%,#326c5333,transparent 70%),url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' opacity='.045' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");border:9px solid #254a3c;border-radius:23px;box-shadow:inset 0 0 0 2px #55715a,0 8px 0 #1b382e,0 17px 25px #1934261a;position:relative;overflow:hidden}.lobby-table{color:var(--cream);text-align:center;padding:42px 20px 30px;min-height:510px}.lobby-table:before{content:'';position:absolute;inset:20px;border:1px solid #c2d4a325;border-radius:12px;pointer-events:none}.lobby-emblem{font-size:54px;color:#ddcf7f;margin-bottom:20px}.lobby-table .eyebrow{font-size:8px;color:#a9c2a1}.lobby-table h2{font-family:Georgia,serif;font-weight:400;font-size:35px;margin:14px 0}.lobby-table p{color:#b1c3b0;font-size:12px}.invite-code{font-size:48px;letter-spacing:12px;font-weight:700;margin:25px 0 15px;color:#eee3a7}.cream-button{color:var(--ink);background:#f1ebcb;justify-content:center}.lobby-meta{display:flex;justify-content:center;gap:30px;margin-top:35px;font-size:10px;color:#b2c5ad}.players-panel{border:1px solid #d6ddcb;padding:22px;background:#fafaf1;border-radius:12px}.player{display:flex;align-items:center;gap:11px;padding:15px 0;border-bottom:1px solid #e4e8db}.avatar{width:38px;height:38px;position:relative;border-radius:50%;display:grid;place-items:center;background:var(--avatar);font-weight:700;color:#264739;font-size:14px;flex-shrink:0}.avatar i{position:absolute;width:9px;height:9px;border-radius:50%;right:0;bottom:0;background:#b6b8ab;border:2px solid #fafaf1}.avatar i.online{background:#43865a}.player-info{min-width:0}.player-info b{font-size:12px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:140px}.player-info b small{font-size:8px;font-weight:400;color:#829078}.player-info>span{display:block;font-size:9px;color:#89937e;margin-top:4px}.score{font-size:24px;font-weight:600;margin-left:auto;text-align:center}.score small{display:block;font-size:7px;font-weight:400;color:#8e9984}.player.self .player-info b{color:#337d57}.empty-seat{margin:25px 0;font-size:11px;color:#949e89;display:flex;gap:13px;align-items:center}.empty-seat span{border:1px dashed #bdc7b2;border-radius:50%;display:grid;place-items:center;width:35px;height:35px;font-size:20px}.lobby-start{margin-top:35px}.lobby-start .primary{width:100%}.lobby-start p{font-size:10px;color:#8a967e;line-height:1.6;margin-top:14px;text-align:center}.game-layout{display:grid;grid-template-columns:230px 1fr;gap:27px}.target-box{padding:24px 15px;text-align:center;border-radius:13px;background:#e9d760;min-height:215px;display:flex;flex-direction:column;align-items:center;justify-content:center}.target-box.colors{background:#97d0c1}.target-box.practice,.target-box.challenge{background:#dee5ce}.target-box>.eyebrow{font-size:8px;letter-spacing:1.3px}.target-letter{font:700 90px/1.2 Georgia,serif}.target-box>span:last-child{font-size:10px;line-height:1.5;max-width:150px;margin-top:7px}.target-swatch{height:65px;width:65px;border-radius:50%;margin:18px 0 10px;box-shadow:0 4px 0 #173c3420;border:3px solid #ffffff70}.target-box strong{font-size:26px;font-weight:650}.target-practice{font-size:55px;line-height:1.2;margin:15px 0}.compact{padding:18px 15px;margin-top:18px}.compact .player-info b{max-width:95px}.compact .avatar{width:30px;height:30px;font-size:12px}.compact .player{gap:8px}.compact .score{font-size:21px}.rules-link{display:block;margin:15px auto}.table-info{height:29px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.8px;color:#809078}.table-info .live-dot{margin-right:5px;width:6px;height:6px}.table-info b{margin:0 8px;font-weight:400}.felt{min-height:490px;display:flex;align-items:center;justify-content:center;padding:32px 35px}.felt-watermark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-15deg);font-size:45px;font-weight:800;text-align:center;letter-spacing:3px;line-height:1.1;color:#f3f4d60b;pointer-events:none}.felt-watermark small{font-size:24px;letter-spacing:8px}.board{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px;perspective:1200px;position:relative;z-index:1}.board.colors{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px;gap:35px}.board.practice,.board.challenge{grid-template-columns:1fr;max-width:420px}.game-card{padding:0;border:0;background:none;aspect-ratio:1.5;position:relative;transform:rotate(var(--tilt)) rotateX(7deg);perspective:1000px;transition:transform .2s;animation:deal .45s both;animation-delay:calc(var(--index)*.025s);isolation:isolate}.game-card:disabled{opacity:1}.card-inner{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.7,.2,1)}.game-card.flipped .card-inner{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;display:block;overflow:hidden;border-radius:7px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 2px 0 #deded0,0 4px 0 #8c9789,0 6px 0 #cacdbd,0 13px 15px #061c2860;background:#101613}.card-face.back{transform:rotateY(180deg)}.game-card:not(:disabled):hover{transform:rotate(0) translateY(-9px) scale(1.025);z-index:5}.game-card:not(:disabled):focus-visible{outline-offset:8px;border-radius:7px}.card-hover{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#f6f2d8;color:var(--ink);border-radius:4px;padding:5px 8px;font-size:8px;font-weight:650;opacity:0;transition:opacity .2s;pointer-events:none}.game-card:hover .card-hover{opacity:1}.game-card.highlight .card-face{box-shadow:0 0 0 3px #ead65d,0 12px 15px #061c2860}.round-status{display:flex;align-items:center;gap:12px;min-height:82px;padding-top:20px}.status-symbol{height:32px;width:32px;display:grid;place-items:center;flex-shrink:0;border:1px solid #d4dcc9;border-radius:50%;color:#6f8768}.round-status b{font-size:11px;line-height:1.6;display:block;font-weight:600}.round-status small{display:block;font-size:10px;color:#829078;margin-top:4px}.pass-button{margin-left:auto;white-space:nowrap;border:1px solid #b8c4ab;border-radius:6px;background:none;padding:10px 14px;font-size:11px;color:var(--green)}.countdown,.results{position:relative;z-index:4;color:#f5f0d6;text-align:center;padding:20px}.countdown>span{font-size:65px;color:#d9c768}.countdown h2,.results h2{font:40px Georgia,serif;margin:15px 0}.countdown p,.results p{color:#b5c9ad;font-size:12px;line-height:1.6}.loading-line{height:3px;width:180px;margin:25px auto;background:#ffffff22;border-radius:3px;overflow:hidden}.loading-line:after{content:'';display:block;background:#e7d575;width:100%;height:100%;animation:load 2s linear}.results .eyebrow{color:#c6d1ad;font-size:9px}.trophy{font-size:60px;color:#e7d575;margin-top:10px}.winner-count{font-size:45px;font-weight:650;margin:22px 0}.winner-count small{font-size:10px;display:block;font-weight:400;color:#b7cba9}.grade-actions{margin-left:auto;display:flex;gap:10px;flex-shrink:0}.grade-actions .primary,.miss-button{font-size:10px;padding:10px 13px;min-height:38px}.miss-button{border:1px solid #c6b8a7;background:transparent;color:#946547;border-radius:6px}dialog{border:0;border-radius:18px;max-width:560px;width:calc(100% - 30px);padding:35px;color:var(--ink);background:var(--paper);box-shadow:0 30px 80px #10261c50}dialog::backdrop{background:#152c25aa;backdrop-filter:blur(5px)}dialog h2{font:32px Georgia,serif;margin:15px 0 25px}dialog h3{font-size:14px;margin:20px 0 8px}dialog p{font-size:12px;line-height:1.8;color:#76816e}.dialog-close{position:absolute;right:18px;top:18px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:#153d33;color:#faf6dd;padding:14px 22px;font-size:12px;border-radius:10px;box-shadow:0 8px 30px #0002;z-index:100;opacity:0;pointer-events:none;transition:.2s;max-width:90vw;text-align:center}#toast.show{transform:translate(-50%,0);opacity:1}@keyframes deal{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}@keyframes load{from{transform:translateX(-100%)}to{transform:translateX(0)}}@media(min-width:1600px){.hero{min-height:470px}.mode{min-height:210px;padding:20px}.felt{min-height:550px}.mode-desc{font-size:12px}.mode strong{font-size:20px}}@media(max-width:1100px){.setup{grid-template-columns:1fr 235px;gap:22px}.mode-grid{grid-template-columns:repeat(2,1fr)}.mode{min-height:155px}.mode-top{margin-bottom:14px}.mode-desc{font-size:11px}.mode .eyebrow{font-size:7px}.create-form{grid-template-columns:1fr 120px}.create-form .primary{grid-column:1/-1}.hero-art{transform:scale(.9)}.game-layout{grid-template-columns:195px 1fr;gap:18px}.felt{padding:25px 20px;min-height:430px}.board{gap:24px 14px;grid-template-columns:repeat(3,minmax(0,1fr))}.board.colors{grid-template-columns:repeat(2,minmax(0,1fr))}.compact{padding:14px 10px}.hero-details{gap:13px;font-size:9px}}@media(max-width:760px){.topbar{height:75px;padding:0 6%}.brand{font-size:18px}.brand small{font-size:8px;letter-spacing:4px}.brand-icon{font-size:32px}.connection{font-size:9px;max-width:130px}.top-right{gap:12px}.home{padding:0 6%}.hero{grid-template-columns:1fr;gap:0}.hero-copy{padding:35px 0 0}.hero h1{font-size:58px}.hero-copy p{font-size:13px}.hero-art{height:270px;transform:scale(.9);margin-top:5px}.floating-card{width:210px}.hero-details{font-size:9px}.orbit{height:230px;width:310px}.orbit-two{width:350px;height:180px}.card-c{transform:translate(0,47px) rotate(-3deg)}.table-stamp{bottom:0}.art-label{top:0}.spark-one{left:1%;top:0}.spark-two{right:1%;bottom:5px}.setup{grid-template-columns:1fr;padding-top:25px;gap:8px}.subtle{display:none}.mode{min-height:185px;padding:16px}.mode strong{font-size:19px}.mode-desc{font-size:11px}.mode .eyebrow{font-size:7px}.mode-top{margin-bottom:19px}.join-panel{border-left:0;border-top:1px solid var(--line);padding:25px 0}.join-panel h2 br{display:none}.join-panel form{grid-template-columns:1fr 1fr}.join-panel .secondary{grid-column:1/-1}.join-panel h2{font-size:31px}.create-form{grid-template-columns:1fr 120px}.create-form .primary{grid-column:1/-1}footer{flex-wrap:wrap;gap:16px}footer>span:nth-child(2){display:none}.room-view{padding:0 4% 25px}.room-top{gap:12px;padding:22px 0}.room-top h1{font-size:28px}.room-top .eyebrow{font-size:6px}.room-code{padding:5px 7px;gap:6px}.room-code small{display:none}.room-code b{font-size:13px}.room-top>.text-button{font-size:10px}.lobby-layout{grid-template-columns:1fr}.lobby-table{min-height:450px}.lobby-table h2{font-size:29px}.lobby-table p{font-size:11px}.invite-code{font-size:39px}.lobby-meta{gap:18px;font-size:9px}.lobby-start{margin-top:20px}.game-layout{display:flex;flex-direction:column;gap:15px}.game-sidebar{display:grid;grid-template-columns:125px 1fr;gap:10px}.target-box{min-height:145px;padding:14px 8px}.target-box>.eyebrow{font-size:6px;letter-spacing:.7px}.target-letter{font-size:56px}.target-box>span:last-child{font-size:8px}.target-swatch{width:38px;height:38px;margin:10px 0 5px}.target-box strong{font-size:19px}.compact{margin:0;padding:12px;max-height:165px;overflow:auto}.compact>.eyebrow{font-size:7px}.compact .player{padding:8px 0}.compact .avatar{width:26px;height:26px}.compact .player-info b{max-width:120px}.compact .score{font-size:18px}.rules-link{display:none}.felt{padding:22px 16px;min-height:370px;border-width:7px;border-radius:15px}.board{gap:23px 13px}.board.colors{gap:22px 17px;grid-template-columns:repeat(2,minmax(0,1fr))}.board.practice,.board.challenge{max-width:310px;grid-template-columns:1fr}.felt.colors{min-height:280px}.round-status{gap:8px;flex-wrap:wrap;padding:22px 3px 0}.round-status b{font-size:10px}.round-status>div{flex:1}.grade-actions{flex-basis:100%!important;justify-content:flex-end}.round-status small{font-size:9px}.round-status .status-symbol{width:25px;height:25px}.pass-button{padding:10px;font-size:10px}.felt-watermark{font-size:28px}.felt-watermark small{font-size:16px}.countdown h2,.results h2{font-size:30px}.target-practice{font-size:36px;margin:5px 0}.board.colors:has(.game-card:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}.card-face{border-radius:5px}.card-hover{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
