:root{color:#f7f3df;font-synthesis:none;--bg0:#090d15;--bg1:#17202a;--panel:#101722;--panel2:#151d28;--line:#59606a;--gold:#f0b94a;--gold2:#ffdb72;--muted:#9ba5af;--ink:#070a10;background:#0a0e17;font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Courier New,monospace}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:radial-gradient(circle at 50% 12%,#27323c 0,#151d27 36%,#090d15 88%);min-width:320px;overflow-x:hidden}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.42;cursor:not-allowed}a{color:inherit}body:before{content:"";pointer-events:none;mix-blend-mode:overlay;opacity:.35;background:linear-gradient(#ffffff05 50%,#00000005 50%) 0 0/100% 4px;position:fixed;inset:0}.sound-toggle{z-index:80;color:#f8d46a;background:#0e151f;border:2px solid #5f6772;width:42px;height:42px;font-weight:900;position:fixed;bottom:12px;right:12px;box-shadow:3px 3px #05070b}.tiles-logo{letter-spacing:.02em;text-shadow:3px 3px #4c260f,0 0 14px #ffc2461f;justify-content:center;align-items:center;gap:2px;font-size:clamp(30px,5vw,58px);font-weight:1000;line-height:1;display:flex}.tiles-logo span:first-child{color:#f14e48}.tiles-logo span:nth-child(2){color:#f28b3c}.tiles-logo span:nth-child(3){color:#f0d04e}.tiles-logo span:nth-child(4){color:#5fc56e}.tiles-logo span:nth-child(5){color:#5c9de5}.arcade-button,.big-action{color:#fff2be;letter-spacing:.06em;text-transform:uppercase;background:#1b2430;border:2px solid #efc15b;min-height:44px;padding:11px 16px;font-weight:1000;box-shadow:3px 3px #05070b,inset 0 0 0 1px #6f5730}.arcade-button:hover,.big-action:hover{background:#25313e}.arcade-button.primary,.big-action{color:#1b1106;background:#d99836;border-color:#ffd36b}.arcade-button.ready{color:#a9f1b0;border-color:#78d384}.arcade-button.ghost{color:#c5ccd2;border-color:#59636f}.text-button,.invite-button{color:#d9b75f;background:0 0;border:0;padding:8px;font-weight:800;text-decoration:underline}.landing-screen{place-items:center;min-height:100vh;padding:26px;display:grid}.landing-panel{text-align:center;background:linear-gradient(#121a25f7,#0a0f17f7);border:3px solid #545d67;width:min(540px,94vw);padding:30px;box-shadow:8px 8px #05070c,inset 0 0 0 2px #252e38}.landing-rule{background:linear-gradient(90deg,#0000,#58616a 12% 88%,#0000);height:2px;margin:20px 0}.landing-tagline,.landing-foot{letter-spacing:.1em;color:#9aa5ae;font-size:11px}.arcade-label{text-align:left;color:#c5cbd0;letter-spacing:.08em;gap:8px;font-size:12px;font-weight:900;display:grid}.arcade-label input,.code-row input{color:#fff4d4;background:#070b11;border:2px solid #4c5662;outline:none;min-height:48px;padding:12px 14px;font-size:16px;box-shadow:inset 0 0 0 2px #121923}.arcade-label input:focus,.code-row input:focus{border-color:#efc15b}.big-action{width:100%;margin-top:14px}.or-line{color:#8c959e;letter-spacing:.12em;align-items:center;gap:10px;margin:18px 0;font-size:10px;display:flex}.or-line:before,.or-line:after{content:"";background:#3c4651;flex:1;height:1px}.code-row{grid-template-columns:1fr auto;gap:10px;display:grid}.code-row input{text-transform:uppercase;letter-spacing:.24em;text-align:center}.landing-error{color:#ff8e8e;font-size:12px}.apogee-link{letter-spacing:.09em;color:#7f8b95;margin-top:8px;font-size:10px;text-decoration:none;display:inline-block}.tutorial-backdrop{z-index:100;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:#03060beb;place-items:center;display:grid;position:fixed;inset:0}.tutorial-card{background:#111923;border:3px solid #6a7179;flex-direction:column;width:min(660px,96vw);max-height:calc(100dvh - 20px);display:flex;overflow:hidden;box-shadow:7px 7px #030507}.tutorial-scroll{min-height:0;padding:22px;overflow:auto}.pixel-kicker{color:#efbd4d;letter-spacing:.14em;font-size:11px;font-weight:1000}.tutorial-card h2{color:#fff0b2;text-shadow:2px 2px #5a3214;margin:8px 0 18px;font-size:clamp(22px,5vw,36px)}.tutorial-card p{color:#c2cad1;line-height:1.55}.tutorial-steps{gap:10px;display:grid}.tutorial-steps>div{background:#0a1018;border:2px solid #39434e;grid-template-columns:52px 1fr;align-items:center;gap:12px;padding:11px;display:grid}.tutorial-steps b{color:#f2bc4c;font-size:18px}.tutorial-power-grid{grid-template-columns:1fr 1fr;gap:10px;margin:16px 0;display:grid}.tutorial-power-grid span{text-align:center;color:#f6d774;background:#0b1119;border:2px solid #475362;padding:14px;font-weight:900}.tutorial-note{background:#0b1119;border-left:3px solid #efb944;padding:12px}.install-tip{background:#090e15;border:1px solid #4e5864;margin-top:8px;padding:11px;font-size:12px;line-height:1.5}.tutorial-actions{background:#0b1119;border-top:2px solid #38424d;flex:none;justify-content:flex-end;gap:10px;padding:12px 18px;display:flex}.game-screen{max-width:1600px;min-height:100vh;margin:0 auto;padding:8px 10px 12px}.rotate-hint{text-align:center;color:#b7c0c8;letter-spacing:.06em;background:#101821;border:1px solid #48525e;margin:0 auto 6px;padding:7px;font-size:10px;display:none}.arcade-header{background:linear-gradient(#151e29,#0c121a);border:3px solid #59616a;grid-template-columns:160px 1fr 160px;align-items:center;gap:10px;min-height:70px;padding:7px 15px;display:grid;box-shadow:4px 4px #05070b}.header-room,.header-round{gap:3px;display:grid}.header-round{text-align:right}.arcade-header small{letter-spacing:.13em;color:#8e99a4;font-size:9px}.arcade-header strong{letter-spacing:.12em;color:#f8d670;font-size:20px}.arcade-header .tiles-logo{font-size:clamp(32px,4vw,52px)}.connection-strip{text-align:center;color:#ffdc7f;letter-spacing:.08em;background:#513b18;border:2px solid #a67c2a;margin-top:7px;padding:6px;font-size:11px}.game-grid{grid-template-columns:minmax(150px,210px) minmax(0,1fr) minmax(200px,270px);gap:9px;margin-top:9px;display:grid}.arcade-panel{background:linear-gradient(#151e29,#0b1119);border:3px solid #515b66;min-width:0;padding:12px;box-shadow:4px 4px #05070b}.panel-heading{color:#f4c65a;letter-spacing:.08em;border-bottom:2px solid #3b4550;justify-content:space-between;gap:8px;padding-bottom:9px;font-size:12px;font-weight:1000;display:flex}.panel-heading span{color:#9aa5ae}.power-panel p{color:#8d98a3;text-align:center;font-size:9px;line-height:1.5}.empty-slot{color:#65717c;border:2px dashed #39434e;align-content:center;place-items:center;gap:6px;min-height:132px;margin-top:12px;display:grid}.empty-slot div{font-size:38px}.empty-slot span{letter-spacing:.12em;font-size:10px}.power-card{color:#fff;background:#0a1018;border:2px solid #657080;align-content:center;place-items:center;gap:5px;width:100%;min-height:132px;margin-top:12px;display:grid}.power-card img{object-fit:cover;object-position:left;width:64px;height:16px;image-rendering:pixelated;margin:12px;transform:scale(2)}.power-card.phase img{object-position:33.333% center}.power-card b{color:#f2cf68;font-size:12px}.power-card small{color:#9ca6af;font-size:8px}.arena-frame{background:radial-gradient(#202b35 0,#111922 48%,#080d14 100%);border:3px solid #59636d;min-width:0;min-height:590px;position:relative;overflow:hidden;box-shadow:4px 4px #05070b}.arena-frame:after{content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 45px #00000080}.game-canvas{touch-action:manipulation;width:100%;height:590px;display:block}.player-list{gap:8px;margin-top:10px;display:grid}.player-card{background:#0a1017;border:2px solid #303b46;grid-template-columns:30px 8px minmax(0,1fr) auto;align-items:center;gap:7px;padding:7px;display:grid}.player-card img{object-fit:none;object-position:0 0;width:28px;height:28px;image-rendering:pixelated}.color-chip{width:6px;height:28px}.player-card b{white-space:nowrap;text-overflow:ellipsis;color:#e9edf1;font-size:11px;display:block;overflow:hidden}.player-card small{color:#7f8a94;margin-top:2px;font-size:8px;display:block}.player-card>strong{white-space:nowrap;color:#f1c357;font-size:10px}.player-card.dead{opacity:.38;filter:grayscale(.8)}.player-card.offline{opacity:.52}.lobby-actions{gap:8px;margin-top:14px;display:grid}.invite-button{letter-spacing:.06em;width:100%;margin-top:9px;font-size:9px}.round-overlay,.waiting-overlay,.winner-overlay{z-index:6;text-align:center;pointer-events:none;background:#04080d85;align-content:center;place-items:center;display:grid;position:absolute;inset:0}.round-overlay b{color:#ffe06c;text-shadow:5px 5px #6c3b12;font-size:clamp(60px,12vw,130px)}.round-overlay span,.waiting-overlay span,.winner-overlay span{letter-spacing:.16em;color:#d7dde2;font-size:12px;font-weight:1000}.waiting-overlay strong{text-shadow:3px 3px #06090d;font-size:clamp(28px,6vw,62px)}.winner-overlay{pointer-events:auto;background:#05080dd1}.winner-overlay strong{color:#ffe070;text-shadow:3px 3px #6f3c12;margin:10px 0 22px;font-size:clamp(30px,7vw,66px)}.wheel-overlay{z-index:8;pointer-events:none;background:#04070cad;align-content:center;place-items:center;display:grid;position:absolute;inset:0}.wheel-title{color:#ffd466;letter-spacing:.12em;margin-bottom:10px;font-weight:1000}.wheel-pointer{color:#fff2b5;z-index:2;text-shadow:2px 2px #000;font-size:30px;transform:translateY(11px)}.selector-wheel{aspect-ratio:1;border:8px solid #2d3741;border-radius:50%;width:min(310px,62vw);animation:4s cubic-bezier(.12,.65,.12,1) forwards wheel-spin;position:relative;box-shadow:0 0 0 3px #d2a847,6px 7px #040609}.selector-wheel:after{content:"";background:#111923;border:3px solid #c59c3e;border-radius:50%;position:absolute;inset:40%}.wheel-label{transform-origin:50%;place-items:center;width:16%;height:16%;font-size:9px;font-weight:1000;display:grid;position:absolute;top:42%;left:42%}@keyframes wheel-spin{0%{transform:rotate(0)}to{transform:rotate(var(--wheel-final))}}.color-popup{z-index:9;text-align:center;background:linear-gradient(#151d27,#090e15);border:3px solid #7c6841;width:min(620px,88%);padding:20px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:7px 8px #030507}.popup-kicker{letter-spacing:.14em;color:#d0b666;font-size:10px}.color-popup h2{color:#fff0b2;margin:6px 0 16px;font-size:clamp(18px,3vw,28px)}.color-grid{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.color-grid button{color:#f1f3f4;background:#0b1118;border:2px solid #616975;min-height:72px;padding:8px}.color-grid button span{background:var(--tile-color);clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);width:26px;height:26px;margin:0 auto 7px;display:block;box-shadow:0 0 0 2px #111}.color-grid b{font-size:9px}.drop-callout,.result-callout{z-index:7;color:#fff0bc;letter-spacing:.09em;white-space:nowrap;background:#090e15;border:3px solid #d45b52;padding:9px 16px;font-size:12px;font-weight:1000;position:absolute;top:14px;left:50%;transform:translate(-50%);box-shadow:4px 4px #030507}.result-callout{border-color:#8b949e}.spectator-badge{z-index:7;letter-spacing:.13em;color:#cbd2d8;background:#080d14;border:2px solid #69737c;padding:7px 12px;font-size:9px;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.toast{z-index:90;color:#ffe090;background:#101822;border:2px solid #e0b149;padding:9px 14px;font-size:10px;position:fixed;bottom:16px;left:50%;transform:translate(-50%);box-shadow:4px 4px #030507}.loading-screen{text-align:center;color:#c4cbd1;align-content:center;place-items:center;gap:20px;min-height:100vh;display:grid}.loading-screen .arcade-button{text-decoration:none}@media (width<=800px) and (orientation:portrait){.rotate-hint{display:block}.game-screen{padding:6px}.arcade-header{grid-template-columns:90px 1fr 70px;min-height:58px;padding:5px 8px}.arcade-header .tiles-logo{font-size:30px}.arcade-header strong{font-size:15px}.game-grid{grid-template-columns:1fr}.arena-frame{order:1;min-height:420px}.game-canvas{height:420px}.power-panel{order:2;grid-template-columns:110px 1fr;align-items:center;gap:8px;display:grid}.power-panel .panel-heading{grid-column:1/-1}.empty-slot,.power-card{min-height:72px;margin-top:0}.power-panel p{margin:0}.players-panel{order:3}.color-popup{width:94%;padding:13px}.color-grid button{min-height:58px}.selector-wheel{width:min(260px,70vw)}}@media (height<=560px) and (orientation:landscape){.game-screen{padding:4px 6px}.arcade-header{grid-template-columns:115px 1fr 90px;min-height:48px;padding:3px 10px}.arcade-header .tiles-logo{font-size:30px}.arcade-header strong{font-size:14px}.game-grid{grid-template-columns:130px minmax(0,1fr) 190px;gap:5px;margin-top:5px}.arcade-panel{padding:8px}.arena-frame{min-height:calc(100dvh - 61px)}.game-canvas{height:calc(100dvh - 61px)}.power-panel .panel-heading,.players-panel .panel-heading{font-size:9px}.empty-slot,.power-card{min-height:86px}.player-list{gap:4px}.player-card{grid-template-columns:24px 5px minmax(0,1fr) auto;padding:4px}.player-card img{width:22px;height:22px}.color-chip{height:22px}.player-card b{font-size:9px}.lobby-actions{margin-top:7px}.arcade-button{min-height:36px;padding:7px 9px;font-size:9px}.color-popup{width:min(560px,74%);padding:11px}.color-grid button{min-height:50px}.tutorial-card{width:min(740px,96vw);max-height:calc(100dvh - 10px)}.tutorial-scroll{padding:12px 18px}.tutorial-card h2{margin:4px 0 10px;font-size:22px}.tutorial-steps{gap:6px}.tutorial-steps>div{padding:7px}.tutorial-actions{padding:7px 12px}.selector-wheel{width:min(240px,42vw)}}@media (prefers-reduced-motion:reduce){.selector-wheel{animation-duration:.01ms}.game-screen *{scroll-behavior:auto!important}}.resume-button{color:#8de2c8;letter-spacing:.06em;background:#10211f;border:2px solid #4d6e69;width:100%;margin-top:12px;padding:10px;font-weight:1000}.player-card img{object-fit:cover}.wheel-label{display:none}
