*{box-sizing:border-box}body{margin:0;min-height:100vh;color:#fff;font-family:system-ui,Segoe UI,sans-serif;background:radial-gradient(circle at 50% 12%,#2878df 0,#1555a9 35%,#103a7c 65%,#09265b 100%)}main{width:min(1450px,98vw);margin:auto;padding:12px 18px 30px}.brand{height:145px;display:grid;place-items:center;position:relative}.brand h1{margin:0;font-size:clamp(54px,7vw,96px);font-weight:1000;line-height:.9;letter-spacing:-.04em;font-style:normal;filter:drop-shadow(0 0 7px #ff2ea6) drop-shadow(0 0 18px #148cff);animation:logoPulse 3.6s ease-in-out infinite}.brand h1 span{background:linear-gradient(#fff6a5,#ffd029 35%,#ff7a00 72%,#d74400);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px #fff3a0}.brand h1 em{font-style:normal;background:linear-gradient(#bffaff,#26d8ff 35%,#1684ff 70%,#7136e7);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:2px #c5faff}.swords{position:absolute;top:83px;font-size:45px;text-shadow:0 0 12px #fff}.card{background:linear-gradient(145deg,#12336b,#081b43);border:2px solid #24cfff;border-radius:18px;padding:24px;max-width:470px;margin:20px auto;box-shadow:0 0 24px #16baff88}.mode-title{text-align:center;font-size:13px;font-weight:900;letter-spacing:.16em;color:#ffd84e;margin-top:15px}.row,.actions{display:flex;gap:8px;justify-content:space-between;flex-wrap:wrap}input,select,button{font:inherit;padding:11px;border-radius:9px;border:0;margin:5px}input{width:calc(100% - 10px)}button{cursor:pointer;background:linear-gradient(#ffe17b,#ff9f18);color:#17233c;font-weight:900;box-shadow:0 3px 0 #8d5200,0 0 10px #ffb52b66;animation:buttonPulse 4s ease-in-out infinite}.primary{display:block;width:calc(100% - 10px);font-size:18px;color:#fff;background:linear-gradient(#22d7ff,#126bd8);box-shadow:0 3px 0 #083c86,0 0 14px #18a9ff88}.game-grid{display:grid;grid-template-columns:220px minmax(520px,760px) 220px;gap:20px;justify-content:center;align-items:start}.left-panel,.right-panel{padding-top:8px}.score-card,.turn-card,.timer-card,.mini-panel{background:linear-gradient(145deg,#0c2557,#071534);border:3px solid #238cff;border-radius:16px;padding:14px;text-align:center;box-shadow:0 0 15px #178cff88;margin-bottom:16px}.score-card small,.mini-panel span{display:block;font-size:16px;font-weight:900;letter-spacing:.12em}.score-card strong{display:block;font-size:54px;line-height:1;color:#fff;text-shadow:0 0 12px currentColor}.computer-card{border-color:#ff642e;box-shadow:0 0 15px #ff4d2288}.computer-card small{color:#ffb08f}.player-card small{color:#9dd8ff}.turn-card span{display:block;font-size:18px;font-weight:700}.turn-card strong{display:block;color:#ffe42e;font-size:21px;margin-top:4px}.timer-card{font-weight:800}.mini-panel strong{display:block;font-size:24px;color:#ffe36a}.center-panel{min-width:0}#status{text-align:center;min-height:24px;margin:5px 0 8px;color:#fff2a8;font-weight:900;text-shadow:0 0 8px #ffb000}.center-panel #computerLastMove{background:linear-gradient(145deg,#0c2851,#081a38);border:1px solid #258cff;border-left:5px solid #ffd13d;border-radius:10px;padding:9px 14px;margin:0 0 10px;line-height:1.4;box-shadow:0 0 14px #147cff55}#computerLastMove strong{color:#ffd84e;font-size:12px;letter-spacing:.12em}#computerMoveScore{font-weight:900}#computerMovePlacement{color:#c9e5ff;font-size:12px}#board{display:grid;grid-template-columns:repeat(11,1fr);aspect-ratio:1;gap:4px;padding:10px;border:5px solid #ffad22;border-radius:17px;background:linear-gradient(145deg,#e7a73c,#9c5914);box-shadow:0 0 0 3px #ffe06d,0 0 22px #ff8b13,0 0 38px #0d55d9aa,inset 0 0 14px #713c0f;touch-action:none}.sq{background:linear-gradient(145deg,#fffaf0,#ead9bd);border:1px solid #c5ad86;border-radius:5px;display:grid;place-items:center;color:#14213b;font-size:clamp(17px,2.3vw,29px);font-weight:1000;box-shadow:inset 0 2px 3px #fff,inset 0 -2px 4px #c2ad8b}.star{background:radial-gradient(circle,#fff6b2 0 13%,#ffc51d 33%,#ed9000 68%,#a85d00 100%);border-color:#ffe05b;box-shadow:inset 0 0 12px #fff0a0,0 0 9px #ffb000;animation:starPulse 2.8s ease-in-out infinite}.star:empty:after{content:'★';color:#fffbe0;text-shadow:0 0 5px #fff,0 0 11px #ff9d00;font-size:1.25em}.locked{font-weight:1000;text-shadow:0 1px #fff5}.locked.tile-orange{background:linear-gradient(145deg,#ffbd59,#e9681e);color:#28140a;border-color:#ffd39b;box-shadow:inset 0 2px 4px #fff7,0 3px 5px #6c280066}.locked.tile-blue{background:linear-gradient(145deg,#68d3ff,#1672cc);color:#071a36;border-color:#b5ebff;box-shadow:inset 0 2px 4px #fff8,0 3px 5px #043d7566}.pending{background:linear-gradient(145deg,#ffe889,#f0ae28);outline:3px solid #26dcff}.rack-panel{margin-top:13px;background:linear-gradient(145deg,#0c2a59,#081b3e);border:2px solid #278cff;border-radius:15px;padding:10px 12px;box-shadow:0 0 16px #147cff66}.rack-panel h3{text-align:center;margin:0 0 5px;color:#ffd85a;letter-spacing:.12em}.tile{width:58px;height:58px;background:linear-gradient(145deg,#ffd572,#ef842d);color:#14213b;display:inline-grid;place-items:center;border:1px solid #ffe8ae;border-radius:9px;font-size:28px;font-weight:1000;margin:4px;cursor:grab;box-shadow:inset 0 2px 4px #fff8,0 4px 5px #0005;user-select:none}.selected{outline:3px solid #ff43b5;box-shadow:0 0 15px #ff43b5}.hint{color:#bddcff;font-size:13px;text-align:center;margin:6px 0 0}#roomBanner{background:linear-gradient(145deg,#0c2851,#071a38);border:2px solid #27dfff;border-radius:13px;padding:10px;margin-bottom:16px;text-align:center;box-shadow:0 0 15px #22cfff88}.room-label{font-size:11px;font-weight:900;letter-spacing:.15em;color:#ffe36a}#roomCode{font-size:27px;font-weight:1000;letter-spacing:.18em;text-shadow:0 0 8px #21d9ff}.room-help{font-size:11px;color:#c8e6ff}.actions{justify-content:center}.actions button{padding:9px 13px}@keyframes logoPulse{50%{filter:drop-shadow(0 0 11px #ff2ea6) drop-shadow(0 0 25px #148cff) brightness(1.08)}}@keyframes starPulse{50%{box-shadow:inset 0 0 15px #fff0a0,0 0 14px #ffb000}}@keyframes buttonPulse{50%{filter:brightness(1.07)}}@media(max-width:1050px){.game-grid{grid-template-columns:160px minmax(470px,650px) 160px}.score-card strong{font-size:42px}}@media(max-width:820px){main{padding:8px}.brand{height:100px}.brand h1{font-size:55px}.swords{top:57px;font-size:34px}.game-grid{display:flex;flex-direction:column}.left-panel,.right-panel{width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:0}.left-panel>* ,.right-panel>*{margin:0}.center-panel{width:100%}.score-card strong{font-size:36px}#roomBanner{grid-column:1/-1}#board{gap:2px;padding:6px}.tile{width:45px;height:45px;font-size:22px}}@media(prefers-reduced-motion:reduce){.brand h1,.star,button{animation:none}}
/* Keep every board square perfectly uniform */
#board{grid-template-columns:repeat(11,minmax(0,1fr));grid-template-rows:repeat(11,minmax(0,1fr))}
.sq{width:100%;height:100%;min-width:0;min-height:0;aspect-ratio:1/1;overflow:hidden}

/* QWERTY-style opposite corner start markers */
.start{position:relative;box-shadow:inset 0 0 0 3px #fff8,0 0 9px #fff6}
.start:empty:after{font-size:.72em;font-weight:1000;letter-spacing:.04em;text-shadow:0 1px 2px #0008}
.start-0{background:linear-gradient(145deg,#8de5ff,#2385dc)!important;border-color:#bfefff!important}.start-0:empty:after{content:'P1 START';color:#08234a}
.start-1{background:linear-gradient(145deg,#ffc16a,#e86c22)!important;border-color:#ffdcad!important}.start-1:empty:after{content:'P2 START';color:#3b1607}

/* Player-facing start stars: P1 bottom-left, opponent top-right */
.start:empty:after{content:'★'!important;font-size:1.25em!important;letter-spacing:0!important}
.start-0{background:radial-gradient(circle,#d8ff9a 0 12%,#62db46 35%,#15963a 70%,#086329 100%)!important;border-color:#aaff88!important;box-shadow:inset 0 0 12px #d8ff9a,0 0 12px #48ef69!important}
.start-0:empty:after{color:#efffd7!important;text-shadow:0 0 5px #fff,0 0 11px #29e55a!important}
.start-1{background:radial-gradient(circle,#ffdca0 0 12%,#ff9b28 35%,#e44d1b 70%,#98250d 100%)!important;border-color:#ffd29b!important;box-shadow:inset 0 0 12px #ffe2ad,0 0 12px #ff682d!important}
.start-1:empty:after{color:#fff4d9!important;text-shadow:0 0 5px #fff,0 0 11px #ff6b27!important}

/* Clean gold bonus stars with the normal ivory square behind them */
.star{background:linear-gradient(145deg,#fffaf0,#ead9bd)!important;border-color:#c5ad86!important;box-shadow:inset 0 2px 3px #fff,inset 0 -2px 4px #c2ad8b!important;animation:none!important}
.star:empty:after{content:'★';color:#ffc400!important;font-size:1.45em;text-shadow:0 0 3px #fff6a8,0 0 8px #ffb000,0 1px 1px #9b5b00!important}
.start-0{background:linear-gradient(145deg,#fffaf0,#ead9bd)!important;border-color:#57e86c!important;box-shadow:inset 0 0 0 3px #5bea70,0 0 10px #43ed63!important}
.start-0:empty:after{color:#39d957!important;text-shadow:0 0 4px #caffcf,0 0 10px #20d948!important}
.start-1{background:linear-gradient(145deg,#fffaf0,#ead9bd)!important;border-color:#ff8a3d!important;box-shadow:inset 0 0 0 3px #ff8a3d,0 0 10px #ff692e!important}
.start-1:empty:after{color:#ff7a27!important;text-shadow:0 0 4px #ffe0bd,0 0 10px #ff6724!important}
.danger{background:linear-gradient(#ff4964,#d91032)!important;color:#fff!important;box-shadow:0 3px 0 #85071d,0 0 12px #ff365888!important}
#rack{min-height:66px;border-radius:10px}