/* Final visual overrides */
.start-0.locked.tile-blue{background:linear-gradient(145deg,#68d3ff,#1672cc)!important;color:#071a36!important;border-color:#b5ebff!important;box-shadow:inset 0 2px 4px #fff8,0 3px 5px #043d7566!important}
.start-1.locked.tile-orange{background:linear-gradient(145deg,#ffbd59,#e9681e)!important;color:#28140a!important;border-color:#ffd39b!important;box-shadow:inset 0 2px 4px #fff7,0 3px 5px #6c280066!important}

/* Opponent rack: tile backs only, never reveal letters */
.opponent-rack-panel{background:linear-gradient(145deg,#0c2a59,#081b3e);border:2px solid #27cfff;border-radius:15px;padding:7px 12px 10px;margin:0 0 12px;box-shadow:0 0 16px #147cff66;text-align:center}
.opponent-rack-panel h3{margin:0 0 5px;color:#ffb047;font-size:14px;letter-spacing:.12em}
#opponentRack{min-height:52px;display:flex;justify-content:center;align-items:center;gap:8px}
.opponent-tile{width:48px;height:48px;border-radius:8px;background:linear-gradient(145deg,#ffc66c,#ef7628);border:1px solid #ffe0aa;box-shadow:inset 0 2px 4px #fff8,0 4px 6px #0005}

/* Bonus squares: high-contrast dark green field with a bright gold star */
.star{background:radial-gradient(circle at 50% 45%,#176b36 0,#0b4b29 58%,#06371f 100%)!important;border-color:#2b8a4c!important;box-shadow:inset 0 0 9px #041f12,0 0 5px #0a4928!important}
.star:empty:after{content:'★';color:#ffd21a!important;font-size:1.62em!important;text-shadow:0 0 2px #fff7a0,0 0 7px #ffd000,0 0 13px #ff9d00,0 2px 1px #6e3d00!important;filter:drop-shadow(0 0 2px #ffdf35)}

/* Start markers keep their own green/orange identities */
.start-0{background:linear-gradient(145deg,#fffaf0,#ead9bd)!important}
.start-1{background:linear-gradient(145deg,#fffaf0,#ead9bd)!important}

@media(max-width:820px){.opponent-tile{width:40px;height:40px}#opponentRack{gap:5px}}

/* Approved visual target: green player tiles, orange opponent tiles, blue bonus squares */
.locked.tile-blue,.start-0.locked.tile-blue{background:linear-gradient(145deg,#75f05d,#24b936)!important;color:#071d10!important;border-color:#baff9e!important;box-shadow:inset 0 2px 4px #fff9,0 3px 5px #075a2366,0 0 6px #42e85a55!important}
.pending{background:linear-gradient(145deg,#86f66c,#35c746)!important;color:#071d10!important;border-color:#c6ffb3!important;box-shadow:inset 0 2px 4px #fff9,0 0 8px #54ef6c88!important}
#rack .tile{background:linear-gradient(145deg,#83f468,#2fc63f)!important;color:#071d10!important;border:1px solid #baffaa!important;box-shadow:inset 0 2px 4px #fff9,0 4px 7px #073e1b66!important}
.star{background:linear-gradient(145deg,#1767c9,#0d459a)!important;border-color:#49a6ff!important;box-shadow:inset 0 0 10px #062a68,0 0 7px #168cff88!important}
.star:empty:after{content:'★';color:#ffd21a!important;font-size:1.62em!important;text-shadow:0 0 2px #fff7a0,0 0 8px #ffd000,0 0 14px #ff9d00,0 2px 1px #6e3d00!important;filter:drop-shadow(0 0 3px #ffdf35)}
/* Start stars remain distinct until covered; covered player start becomes green tile */
.start-0{background:linear-gradient(145deg,#fffaf0,#ead9bd)!important}
.start-1{background:linear-gradient(145deg,#fffaf0,#ead9bd)!important}

/* Crisp bonus stars: sharp edges, no glow or shadow */
.star{box-shadow:none!important}
.star:empty:after{color:#ffd21a!important;text-shadow:none!important;filter:none!important;-webkit-text-stroke:1px #c88600}

/* Bonus point breakdown boxes */
.bonus-card{background:linear-gradient(145deg,#0c2557,#071534);border:2px solid #ffd34d;border-radius:14px;padding:10px 12px;text-align:center;box-shadow:0 0 12px #ffcc3355;margin-bottom:16px}.bonus-card>span{display:block;color:#ffd85a;font-size:13px;font-weight:900;letter-spacing:.12em;margin-bottom:6px}.bonus-card div{display:flex;justify-content:space-between;gap:8px;color:#dcecff;font-size:13px;line-height:1.7}.bonus-card div strong{color:#fff;font-size:15px}

/* Layout refinements: blank tile alignment, larger timers, top goal */
#rack .tile:empty{vertical-align:top}
.timer-card{min-height:82px;display:grid;place-items:center;font-size:24px;font-weight:1000;padding:18px 12px;transition:background .15s,border-color .15s,box-shadow .15s,color .15s}
.timer-card.timer-active{border-color:#35a6ff}
.timer-card.countdown-danger{background:linear-gradient(145deg,#8f1326,#3e0711)!important;border-color:#ff425d!important;color:#fff!important;box-shadow:0 0 20px #ff244d99!important;text-shadow:0 0 8px #ff8a9b}
.top-goal{width:220px;margin:-7px auto 12px;background:linear-gradient(145deg,#0c2557,#071534);border:3px solid #ffd34d;border-radius:14px;padding:8px 14px;text-align:center;box-shadow:0 0 14px #ffcc3355}
.top-goal span{display:block;color:#ffd85a;font-size:12px;font-weight:900;letter-spacing:.15em}
.top-goal strong{display:block;color:#fff;font-size:27px;line-height:1.05}

.top-info{display:flex;justify-content:center;gap:12px;margin:-7px auto 12px}
.top-info[hidden]{display:none}
.top-info .top-goal,.top-info .top-mode{width:180px;margin:0;background:linear-gradient(145deg,#0c2557,#071534);border:3px solid #ffd34d;border-radius:14px;padding:8px 14px;text-align:center;box-shadow:0 0 14px #ffcc3355}
.top-info .top-mode{border-color:#27cfff;box-shadow:0 0 14px #27cfff55}
.top-info span{display:block;color:#ffd85a;font-size:12px;font-weight:900;letter-spacing:.15em}
.top-info .top-mode span{color:#8feaff}
.top-info strong{display:block;color:#fff;font-size:27px;line-height:1.05}

/* Rules access and modal */
.top-info .rules-button{width:180px;margin:0;border:3px solid #7be66c;background:linear-gradient(145deg,#153f31,#0a281f);color:#fff;border-radius:14px;padding:8px 14px;font-size:18px;letter-spacing:.08em;box-shadow:0 0 14px #54e86b55}
.lobby-rules{display:block;width:calc(100% - 10px);margin:0 5px 14px;background:linear-gradient(#ffe17b,#ff9f18);font-size:17px}
.rules-modal{position:fixed;inset:0;z-index:1000;background:#020b1dcc;display:grid;place-items:center;padding:20px}
.rules-modal[hidden]{display:none}
.rules-dialog{position:relative;width:min(680px,94vw);max-height:88vh;overflow:auto;background:linear-gradient(145deg,#10366f,#071a3e);border:3px solid #ffd34d;border-radius:18px;padding:24px 28px;color:#eaf5ff;box-shadow:0 0 30px #000b,0 0 20px #ffcc3355}
.rules-dialog h2{text-align:center;color:#ffd85a;margin:0 35px 18px}
.rules-dialog h3{color:#70dcff;margin:18px 0 4px;font-size:14px;letter-spacing:.12em}
.rules-dialog p{margin:0;line-height:1.5}
.rules-close{position:absolute;right:10px;top:8px;width:42px;height:42px;margin:0;padding:0;font-size:30px;line-height:1;background:linear-gradient(#ff4964,#d91032);color:#fff}
@media(max-width:820px){.top-info{flex-wrap:wrap}.top-info .top-goal,.top-info .top-mode,.top-info .rules-button{width:145px}}

/* Winner celebration and replay decision */
.center-panel{position:relative}.replay-modal{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:1100;display:grid;place-items:center;padding:20px;pointer-events:none}.replay-dialog{pointer-events:auto}
.replay-modal[hidden]{display:none}
.replay-dialog{width:min(520px,92vw);text-align:center;background:linear-gradient(145deg,#10366f,#071a3e);border:4px solid #ffd34d;border-radius:22px;padding:30px;box-shadow:0 0 36px #ffd21a66}
.winner-message{font-size:38px;font-weight:1000;color:#ffd84d;text-shadow:0 0 14px #ffb300;margin-bottom:18px}
.replay-question{font-size:23px;font-weight:900;color:#fff;margin-bottom:8px}
#replayCountdown{color:#8feaff;font-size:16px;margin-bottom:20px}
.replay-actions{display:flex;justify-content:center;gap:18px}
.replay-actions button{min-width:120px;font-size:20px;font-weight:1000;padding:12px 24px}

/* Arcade PRMAN Productions footer */
.prman-footer{text-align:center;margin:22px auto 12px;padding:12px 18px;color:#ffd85a;letter-spacing:.09em;opacity:.96}.prman-footer strong{display:block;font-size:17px;font-weight:1000;text-shadow:0 0 8px #ffbd2e88}.prman-footer span{display:block;margin-top:3px;color:#8feaff;font-size:11px;font-weight:800;letter-spacing:.08em}

/* Center player tile rack inside its rack panel */
.rack-panel{text-align:center}
#rack{display:flex;justify-content:center;align-items:center;gap:8px;margin-left:auto;margin-right:auto}

/* Glossy arcade footer: gold/blue Word Duel, red stars, colorful PRMAN Productions */
.prman-footer{width:min(760px,94%);text-align:center;margin:24px auto 12px;padding:14px 18px 12px;border-top:2px solid #ffd34d;border-bottom:2px solid #147cff;background:linear-gradient(90deg,transparent,#061a3dcc 18%,#0b2d63dd 50%,#061a3dcc 82%,transparent);border-radius:14px;box-shadow:0 0 18px #147cff44,inset 0 0 16px #0007;opacity:1}
.prman-footer strong{display:block;font-size:21px;font-weight:1000;letter-spacing:.07em;line-height:1.15;text-shadow:none}
.prman-footer .footer-star{font-style:normal;color:#ff243f;-webkit-text-stroke:1px #ffd34d;text-shadow:0 0 8px #ff244d,0 0 3px #ffd34d}
.prman-footer .footer-word{display:inline;color:#ffd85a;font-size:inherit;font-weight:1000;letter-spacing:inherit;text-shadow:0 0 7px #ffb300}
.prman-footer .footer-duel{display:inline;color:#62cfff;font-size:inherit;font-weight:1000;letter-spacing:inherit;text-shadow:0 0 7px #168cff}
.prman-footer .footer-presented{display:block;margin:5px 0 1px;color:#d9ecff;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.prman-footer .footer-prman{display:block;margin:0;color:#63d7ff;font-size:15px;font-weight:1000;letter-spacing:.11em;text-shadow:0 0 7px #168cff}
.prman-footer .footer-prman em{font-style:normal;color:#ffd34d;text-shadow:0 0 7px #ff9d00}

/* Exact PRMAN Productions footer artwork */
.prman-footer{width:min(900px,96%);margin:24px auto 12px;padding:0;background:none;border:0;box-shadow:none;opacity:1;text-align:center}
.prman-footer img{display:block;width:100%;height:auto;margin:0 auto;object-fit:contain}

/* PRMAN artwork is now the primary logo */
.brand-art{width:min(640px,88vw);margin:10px auto 12px;padding:0;text-align:center}
.brand-art img{display:block;width:100%;height:auto;margin:0 auto;object-fit:contain}
@media(max-width:820px){.brand-art{width:min(520px,94vw)}}

/* Logo spacing refinement: smaller artwork with dedicated space above controls */
.brand-art{width:min(480px,78vw)!important;margin:16px auto 22px!important;padding:0!important;position:relative!important;z-index:1!important}
.brand-art img{display:block!important;width:100%!important;height:auto!important;margin:0 auto!important;object-fit:contain!important}
#gameTopInfo{position:relative;z-index:2;margin-top:0!important;margin-bottom:14px!important}
#lobby{position:relative;z-index:2;margin-top:0!important}
@media(max-width:820px){.brand-art{width:min(430px,88vw)!important;margin-bottom:18px!important}}

/* Small visual gap below primary logo on lobby and game screens */
.brand-art{margin-bottom:30px!important}
@media(max-width:820px){.brand-art{margin-bottom:26px!important}}

/* Deliberate large separation between logo and page content */
.brand-art{margin-bottom:120px!important}
@media(max-width:820px){.brand-art{margin-bottom:90px!important}}

/* Reduce large logo-to-content gap by 50% */
.brand-art{margin-bottom:60px!important}
@media(max-width:820px){.brand-art{margin-bottom:45px!important}}

/* Small secondary branding at bottom of start and game screens */
.mini-brand-footer{text-align:center;margin:22px auto 12px;padding:7px 12px;line-height:1.2;letter-spacing:.08em}.mini-brand-footer strong{display:block;color:#ffd85a;font-size:14px;font-weight:1000;text-shadow:0 0 6px #ffb300}.mini-brand-footer span{display:block;margin-top:3px;color:#8feaff;font-size:9px;font-weight:900;letter-spacing:.12em}