/* 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,#83f468,#2fc63f)!important;color:#071d10!important;border:1px solid #baffaa!important;box-shadow:inset 0 2px 4px #fff9,0 4px 7px #073e1b66!important}
.pending{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}
#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}

/* Launch QA: keep the complete game visible without distorting the board */
.bottom-rules{margin:16px 5px 0!important}
.last-action{margin:0 auto 8px;padding:7px 12px;min-height:20px;text-align:center;color:#8feaff;font-size:13px;font-weight:800;letter-spacing:.02em}
@media(min-width:821px) and (min-height:700px){
 body:has(#game:not([hidden])){overflow:auto}
 body:has(#game:not([hidden])) main{width:min(1220px,98vw);padding:4px 12px 8px}
 body:has(#game:not([hidden])) .brand-art{width:min(330px,48vw)!important;margin:4px auto 5px!important}
 body:has(#game:not([hidden])) #gameTopInfo{margin:0 auto 3px!important;transform:scale(.78);transform-origin:center}
 body:has(#game:not([hidden])) #status{margin:0 0 1px!important;min-height:18px;font-size:13px}
 body:has(#game:not([hidden])) .last-action{margin:0 auto 3px!important;padding:2px 8px!important;min-height:16px;font-size:11px}
 body:has(#game:not([hidden])) .game-grid{grid-template-columns:155px minmax(480px,620px) 155px;gap:12px;align-items:start}
 body:has(#game:not([hidden])) .left-panel,body:has(#game:not([hidden])) .right-panel{padding-top:0}
 body:has(#game:not([hidden])) .score-card,body:has(#game:not([hidden])) .turn-card,body:has(#game:not([hidden])) .timer-card,body:has(#game:not([hidden])) .bonus-card{margin-bottom:8px;padding:7px}
 body:has(#game:not([hidden])) .score-card strong{font-size:34px}
 body:has(#game:not([hidden])) .score-card small{font-size:12px}
 body:has(#game:not([hidden])) .bonus-card{font-size:11px}
 body:has(#game:not([hidden])) .bonus-card>span{margin-bottom:2px;font-size:10px}
 body:has(#game:not([hidden])) .bonus-card div{font-size:10px;line-height:1.35}
 body:has(#game:not([hidden])) .bonus-card div strong{font-size:11px}
 body:has(#game:not([hidden])) .turn-card span{font-size:12px}
 body:has(#game:not([hidden])) .turn-card strong{font-size:14px}
 body:has(#game:not([hidden])) .timer-card{min-height:52px;font-size:16px;padding:8px}
 body:has(#game:not([hidden])) .opponent-rack-panel{margin-bottom:5px;padding:4px 8px}
 body:has(#game:not([hidden])) .opponent-rack-panel h3{font-size:10px;margin-bottom:2px}
 body:has(#game:not([hidden])) #opponentRack{min-height:34px;gap:5px}
 body:has(#game:not([hidden])) .opponent-tile{width:31px;height:31px}
 body:has(#game:not([hidden])) #board{width:min(100%,54vh);height:auto!important;aspect-ratio:1/1!important;margin:0 auto;gap:3px;padding:7px;border-width:4px;grid-template-rows:repeat(11,minmax(0,1fr))!important}
 body:has(#game:not([hidden])) .rack-panel{margin:5px auto 0;padding:4px 8px}
 body:has(#game:not([hidden])) .rack-panel h3{font-size:11px;margin-bottom:1px}
 body:has(#game:not([hidden])) #rack{min-height:42px;gap:4px}
 body:has(#game:not([hidden])) #rack .tile{width:36px;height:36px;margin:2px;font-size:19px}
 body:has(#game:not([hidden])) .hint{font-size:9px;margin:2px 0 0}
 body:has(#game:not([hidden])) .actions button{padding:5px 8px;margin:3px;font-size:11px}
 body:has(#game:not([hidden])) .mini-brand-footer{display:none}
}
/* Desktop viewport fit: vertical sizing only; preserve the working 11x11 board grid */
@media(min-width:821px) and (min-height:700px){
 body:has(#game:not([hidden])) main{padding-top:0!important;padding-bottom:2px!important}
 body:has(#game:not([hidden])) .brand-art{width:min(285px,44vw)!important;margin:0 auto 2px!important}
 body:has(#game:not([hidden])) #gameTopInfo{margin:-2px auto 0!important;transform:scale(.72)!important}
 body:has(#game:not([hidden])) #status{margin:-3px 0 0!important;line-height:14px!important;min-height:14px!important}
 body:has(#game:not([hidden])) .last-action{margin:0 auto 1px!important;padding:0 8px!important;line-height:13px!important;min-height:13px!important}
 body:has(#game:not([hidden])) .opponent-rack-panel{margin-bottom:2px!important;padding-top:2px!important;padding-bottom:2px!important}
 body:has(#game:not([hidden])) #opponentRack{min-height:30px!important}
 body:has(#game:not([hidden])) .opponent-tile{width:28px!important;height:28px!important}
 body:has(#game:not([hidden])) #board{width:min(100%,48vh)!important}
 body:has(#game:not([hidden])) .rack-panel{margin-top:2px!important;padding-top:2px!important;padding-bottom:2px!important}
 body:has(#game:not([hidden])) #rack{min-height:36px!important}
 body:has(#game:not([hidden])) #rack .tile{width:32px!important;height:32px!important;margin:1px!important;font-size:17px!important}
 body:has(#game:not([hidden])) .hint{margin:0!important;line-height:10px!important}
 body:has(#game:not([hidden])) .actions{margin-top:0!important}
 body:has(#game:not([hidden])) .actions button{padding:3px 7px!important;margin:2px!important;font-size:10px!important}
}

/* Recenter board stars only; no board/grid/layout sizing changes */
#board .sq.star,
#board .sq.start{position:relative!important}
#board .sq.star:empty:after,
#board .sq.start:empty:after{
 position:absolute!important;
 left:50%!important;
 top:50%!important;
 transform:translate(-50%,-50%)!important;
 display:block!important;
 width:auto!important;
 height:auto!important;
 line-height:1!important;
 margin:0!important;
 padding:0!important;
}

/* Larger player rack tiles + single-row controls; keep panel compact */
@media(min-width:821px) and (min-height:700px){
 body:has(#game:not([hidden])) .rack-panel{
   margin-top:2px!important;
   padding:2px 8px 3px!important;
 }
 body:has(#game:not([hidden])) .rack-panel h3{
   margin:0!important;
   line-height:11px!important;
 }
 body:has(#game:not([hidden])) #rack{
   min-height:42px!important;
   height:42px!important;
   gap:3px!important;
   align-items:center!important;
 }
 body:has(#game:not([hidden])) #rack .tile{
   width:40px!important;
   height:40px!important;
   margin:0 1px!important;
   font-size:21px!important;
   line-height:1!important;
 }
 body:has(#game:not([hidden])) .actions{
   display:flex!important;
   flex-wrap:nowrap!important;
   justify-content:center!important;
   align-items:center!important;
   gap:4px!important;
   margin:0!important;
   white-space:nowrap!important;
 }
 body:has(#game:not([hidden])) .actions button{
   flex:0 0 auto!important;
   padding:3px 7px!important;
   margin:1px 0!important;
   font-size:10px!important;
   line-height:15px!important;
 }
 body:has(#game:not([hidden])) .hint{
   margin:0!important;
   line-height:9px!important;
   font-size:8px!important;
 }
}

/* Refined game composition: controls outside rack, logo aligned to top controls, side stacks centered to board */
@media(min-width:821px) and (min-height:700px){
 body:has(#game:not([hidden])) .brand-art{
   width:360px!important;
   margin:0 auto 2px!important;
 }
 body:has(#game:not([hidden])) .left-panel,
 body:has(#game:not([hidden])) .right-panel{
   padding-top:88px!important;
 }
 body:has(#game:not([hidden])) .rack-panel{
   margin:2px auto 0!important;
   padding:2px 8px 3px!important;
 }
 body:has(#game:not([hidden])) .rack-actions{
   display:flex!important;
   flex-wrap:nowrap!important;
   justify-content:center!important;
   align-items:center!important;
   gap:4px!important;
   width:100%!important;
   margin:1px auto 0!important;
   white-space:nowrap!important;
 }
 body:has(#game:not([hidden])) .rack-actions button{
   flex:0 0 auto!important;
   padding:3px 8px!important;
   margin:1px 0!important;
   font-size:10px!important;
   line-height:15px!important;
 }
}

/* Enlarge only the six action buttons; preserve row and surrounding layout */
@media(min-width:821px) and (min-height:700px){
 body:has(#game:not([hidden])) .rack-actions button{
   padding-left:10px!important;
   padding-right:10px!important;
   font-size:12px!important;
 }
}

/* Compact last-move panel and use recovered space for larger action controls */
@media(min-width:821px) and (min-height:700px){
 body:has(#game:not([hidden])) #computerLastMove{
   padding-top:6px!important;
   padding-bottom:6px!important;
   min-height:0!important;
 }
 body:has(#game:not([hidden])) .rack-actions button{
   padding:5px 12px!important;
   font-size:13px!important;
   line-height:16px!important;
 }
}

/* Word Duel avatar system */
.avatar-pick-row{display:flex;align-items:center;justify-content:center;gap:12px;margin:8px 0 12px}
.avatar-face{background-image:url('/avatar-sprite-all.jpg');background-size:600% 400%;background-repeat:no-repeat;background-color:#dcecff;background-position:0 0}
#avatarPreview{width:58px;height:58px;border:3px solid #ffd34d;border-radius:14px;box-shadow:0 0 12px #147cff66}
#chooseAvatar{width:auto;margin:0;padding:10px 18px}
.avatar-modal{position:fixed;inset:0;z-index:1200;background:#020b1ddd;display:grid;place-items:center;padding:18px}
.avatar-modal[hidden]{display:none}
.avatar-dialog{position:relative;width:min(720px,94vw);max-height:90vh;overflow:auto;background:linear-gradient(145deg,#10366f,#071a3e);border:3px solid #ffd34d;border-radius:18px;padding:20px;color:#fff;box-shadow:0 0 30px #000b}
.avatar-dialog h2{text-align:center;color:#ffd85a;margin:0 42px 16px;font-size:24px}
.avatar-close{position:absolute;right:10px;top:8px;width:40px;height:40px;margin:0;padding:0;font-size:28px;line-height:1;background:linear-gradient(#ff4964,#d91032);color:#fff}
.avatar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.avatar-choice{aspect-ratio:1/1;width:100%;margin:0;padding:0;border:3px solid #65cfff;border-radius:13px;cursor:pointer;box-shadow:0 2px 8px #0007}
.avatar-choice:hover,.avatar-choice:focus{border-color:#ffd34d;transform:scale(1.04)}
.score-card{position:relative}
.score-avatar{width:52px;height:52px;border-radius:50%;border:2px solid #ffd34d;margin:0 auto 4px;box-shadow:0 0 9px #0007}
.robot-female{background-image:url('/Pink%20Girl%20Robot%20Assistant.jpg')!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
.robot-male{background-image:url('/Blue%20Boy%20Robot%20Assistant.jpg')!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
@media(min-width:821px) and (min-height:700px){body:has(#game:not([hidden])) .score-avatar{width:42px;height:42px;margin-bottom:2px}}
@media(max-width:820px){.avatar-grid{grid-template-columns:repeat(4,1fr);gap:8px}.avatar-dialog{padding:16px}.score-avatar{width:44px;height:44px}}

/* Larger, more prominent player/computer identity cards */
@media(min-width:821px){
  .score-card{width:150px!important;min-height:112px!important;padding:10px 8px!important;box-sizing:border-box}
  .score-avatar{width:70px!important;height:70px!important;margin:0 auto 5px!important;border-width:3px!important}
  .score-card small{font-size:13px!important}
  .score-card .big{font-size:30px!important;line-height:1.05!important}
}

/* Final approved desktop mockup: preserve 11x11 logic, widen board, compact symmetrical side panels */
@media(min-width:821px) and (min-height:700px){
 body:has(#game:not([hidden])) main{width:min(1480px,98vw)!important}
 body:has(#game:not([hidden])) .brand-art{width:480px!important;margin:0 auto 10px!important}
 body:has(#game:not([hidden])) #gameTopInfo{transform:scale(.82)!important;margin:0 auto 5px!important}
 body:has(#game:not([hidden])) .game-grid{
   grid-template-columns:230px minmax(680px,820px) 230px!important;
   gap:28px!important;align-items:start!important;justify-content:center!important
 }
 body:has(#game:not([hidden])) .left-panel,
 body:has(#game:not([hidden])) .right-panel{padding-top:0!important}
 body:has(#game:not([hidden])) #board{
   width:100%!important;height:auto!important;aspect-ratio:1.55/1!important;
   grid-template-columns:repeat(11,minmax(0,1fr))!important;
   grid-template-rows:repeat(11,minmax(0,1fr))!important;
   gap:3px!important;padding:7px!important;box-sizing:border-box!important
 }
 body:has(#game:not([hidden])) .score-card{
   width:100%!important;min-height:0!important;padding:8px!important;margin-bottom:6px!important
 }
 body:has(#game:not([hidden])) .score-avatar{
   width:92px!important;height:92px!important;margin:0 auto 4px!important;border-width:3px!important
 }
 body:has(#game:not([hidden])) .score-card small{font-size:13px!important}
 body:has(#game:not([hidden])) .score-card strong{font-size:28px!important;line-height:1!important}
 body:has(#game:not([hidden])) .bonus-card,
 body:has(#game:not([hidden])) .turn-card,
 body:has(#game:not([hidden])) .timer-card{
   width:100%!important;box-sizing:border-box!important;margin-bottom:6px!important;padding:6px 8px!important
 }
 body:has(#game:not([hidden])) .bonus-card>span{font-size:10px!important}
 body:has(#game:not([hidden])) .bonus-card div{font-size:10px!important;line-height:1.3!important}
 body:has(#game:not([hidden])) .turn-card{min-height:54px!important}
 body:has(#game:not([hidden])) .turn-card span{font-size:11px!important}
 body:has(#game:not([hidden])) .turn-card strong{font-size:16px!important}
 body:has(#game:not([hidden])) .opponent-turn-card strong{color:#8da5cc}
 body:has(#game:not([hidden])) .timer-card{min-height:46px!important;font-size:15px!important}
 body:has(#game:not([hidden])) .rack-panel{width:100%!important;box-sizing:border-box!important}
}
/* Keep avatar artwork crisp and prevent accidental split-image bleed at portrait edges */
.avatar-face{background-repeat:no-repeat!important;overflow:hidden!important}
.score-avatar,#avatarPreview,.avatar-choice{background-clip:padding-box!important}

/* Final mockup alignment pass: current board width retained, larger side stacks, clear logo separation */
@media(min-width:821px) and (min-height:700px){
 body:has(#game:not([hidden])) .brand-art{
   width:480px!important;
   margin:0 auto 20px!important;
 }
 body:has(#game:not([hidden])) #gameTopInfo{
   transform:scale(.82)!important;
   transform-origin:center top!important;
   margin:0 auto 10px!important;
   position:relative!important;
   z-index:2!important;
 }
 body:has(#game:not([hidden])) .game-grid{
   grid-template-columns:250px minmax(680px,820px) 250px!important;
   gap:24px!important;
 }
 body:has(#game:not([hidden])) .score-card{
   min-height:178px!important;
   padding:10px 10px 8px!important;
 }
 body:has(#game:not([hidden])) .score-avatar{
   width:118px!important;
   height:118px!important;
   margin:0 auto 5px!important;
 }
 body:has(#game:not([hidden])) .score-card small{
   display:block!important;
   font-size:14px!important;
   line-height:16px!important;
 }
 body:has(#game:not([hidden])) .score-card strong{
   display:block!important;
   font-size:30px!important;
   line-height:32px!important;
 }
 body:has(#game:not([hidden])) .bonus-card{
   min-height:86px!important;
   padding:8px 12px!important;
 }
 body:has(#game:not([hidden])) .bonus-card>span{font-size:11px!important;margin-bottom:4px!important}
 body:has(#game:not([hidden])) .bonus-card div{font-size:11px!important;line-height:1.45!important}
 body:has(#game:not([hidden])) .bonus-card div strong{font-size:12px!important}
 body:has(#game:not([hidden])) .turn-card{
   min-height:62px!important;
   padding:8px 10px!important;
 }
 body:has(#game:not([hidden])) .turn-card span{font-size:12px!important}
 body:has(#game:not([hidden])) .turn-card strong{font-size:18px!important}
 body:has(#game:not([hidden])) .timer-card{
   min-height:54px!important;
   padding:9px 10px!important;
   font-size:17px!important;
 }
 body:has(#game:not([hidden])) #roomBanner{display:none!important}
}

/* Fix top controls overlapping the logo: reserve the scaled element's true layout space */
@media(min-width:821px) and (min-height:700px){
 body:has(#game:not([hidden])) .brand-art{margin-bottom:12px!important}
 body:has(#game:not([hidden])) #gameTopInfo{
   transform:none!important;
   width:480px!important;
   max-width:100%!important;
   margin:0 auto 14px!important;
   position:relative!important;
   clear:both!important;
 }
}

/* Remove center last-move rectangle and spend the recovered height on a square-cell board */
#computerLastMove{display:none!important}
.side-last-move{margin-top:4px;padding-top:4px;border-top:1px solid #2b77c9;font-size:10px;line-height:12px;color:#fff;white-space:normal}
@media(min-width:821px) and (min-height:700px){
 body:has(#game:not([hidden])) .turn-card{min-height:76px!important}
 body:has(#game:not([hidden])) #status{margin-top:0!important}
 body:has(#game:not([hidden])) #board{
   width:100%!important;
   height:auto!important;
   aspect-ratio:1/1!important;
   grid-template-columns:repeat(11,minmax(0,1fr))!important;
   grid-template-rows:repeat(11,minmax(0,1fr))!important;
 }
 body:has(#game:not([hidden])) #board .sq{aspect-ratio:1/1!important;min-width:0!important;min-height:0!important}
}

/* Definitive logo/control separation: top controls must start below the full logo */
@media(min-width:821px) and (min-height:700px){
 body:has(#game:not([hidden])) .brand-art{
   display:block!important;
   position:relative!important;
   width:480px!important;
   height:auto!important;
   margin:0 auto 0!important;
   transform:none!important;
 }
 body:has(#game:not([hidden])) #gameTopInfo{
   display:flex!important;
   position:relative!important;
   transform:none!important;
   width:480px!important;
   margin:18px auto 10px!important;
   clear:both!important;
   top:auto!important;
   bottom:auto!important;
 }
}

/* Requested sizing: board 25% smaller; playable rack tiles 25% larger */
@media(min-width:821px) and (min-height:700px){
 body:has(#game:not([hidden])) .game-grid{
   grid-template-columns:250px minmax(510px,615px) 250px!important;
 }
 body:has(#game:not([hidden])) #board{
   width:75%!important;
   max-width:615px!important;
   margin-left:auto!important;
   margin-right:auto!important;
   aspect-ratio:1/1!important;
 }
 body:has(#game:not([hidden])) .rack-panel{
   width:75%!important;
   margin-left:auto!important;
   margin-right:auto!important;
 }
 body:has(#game:not([hidden])) #rack .tile{
   transform:scale(1.25)!important;
   margin-left:4px!important;
   margin-right:4px!important;
 }
 body:has(#game:not([hidden])) .opponent-tile{
   transform:scale(1.25)!important;
   margin-left:4px!important;
   margin-right:4px!important;
 }
}

/* Approved final mockup proportions — 2026-10-05 */
@media(min-width:821px) and (min-height:700px){
 body:has(#game:not([hidden])) main{width:min(1420px,96vw)!important}
 body:has(#game:not([hidden])) .brand-art{width:480px!important;margin:0 auto 8px!important}
 body:has(#game:not([hidden])) #gameTopInfo{
   width:480px!important;margin:0 auto 10px!important;gap:10px!important;
   transform:none!important;position:relative!important
 }
 body:has(#game:not([hidden])) .game-grid{
   grid-template-columns:250px 676px 250px!important;
   column-gap:38px!important;align-items:start!important;justify-content:center!important
 }
 body:has(#game:not([hidden])) .left-panel,
 body:has(#game:not([hidden])) .right-panel{padding-top:0!important}
 body:has(#game:not([hidden])) #status,
 body:has(#game:not([hidden])) #lastAction{font-size:11px!important;line-height:12px!important;margin:0!important;min-height:0!important}
 body:has(#game:not([hidden])) .opponent-rack-panel{
   width:676px!important;min-height:42px!important;margin:4px auto 8px!important;padding:2px 8px!important;box-sizing:border-box!important
 }
 body:has(#game:not([hidden])) #board{
   width:676px!important;max-width:676px!important;height:676px!important;
   margin:0 auto!important;aspect-ratio:1/1!important;padding:7px!important;gap:3px!important;
   grid-template-columns:repeat(11,minmax(0,1fr))!important;
   grid-template-rows:repeat(11,minmax(0,1fr))!important;box-sizing:border-box!important
 }
 body:has(#game:not([hidden])) #board .sq{aspect-ratio:1/1!important}
 body:has(#game:not([hidden])) .rack-panel{
   width:676px!important;min-height:88px!important;margin:10px auto 0!important;padding:4px 8px 3px!important;box-sizing:border-box!important
 }
 body:has(#game:not([hidden])) #rack{min-height:52px!important}
 body:has(#game:not([hidden])) #rack .tile{
   transform:scale(1.1875)!important;margin-left:3px!important;margin-right:3px!important
 }
 body:has(#game:not([hidden])) .opponent-tile{
   transform:scale(1.1875)!important;margin-left:3px!important;margin-right:3px!important
 }
 body:has(#game:not([hidden])) .actions.rack-actions{width:760px!important;margin:8px auto 0!important;justify-content:center!important}
 body:has(#game:not([hidden])) .score-card{
   width:250px!important;min-height:220px!important;padding:12px 10px 10px!important;box-sizing:border-box!important
 }
 body:has(#game:not([hidden])) .score-avatar{
   width:150px!important;height:150px!important;margin:0 auto 5px!important;border-width:4px!important;
   image-rendering:auto!important;backface-visibility:hidden!important
 }
 body:has(#game:not([hidden])) .score-card small{font-size:16px!important;line-height:18px!important}
 body:has(#game:not([hidden])) .score-card strong{font-size:32px!important;line-height:34px!important}
 body:has(#game:not([hidden])) .bonus-card{width:250px!important;min-height:100px!important;padding:9px 14px!important}
 body:has(#game:not([hidden])) .bonus-card>span{font-size:13px!important}
 body:has(#game:not([hidden])) .bonus-card div{font-size:13px!important;line-height:1.5!important}
 body:has(#game:not([hidden])) .turn-card{width:250px!important;min-height:82px!important;padding:9px 10px!important}
 body:has(#game:not([hidden])) .turn-card span{font-size:14px!important}
 body:has(#game:not([hidden])) .turn-card strong{font-size:21px!important}
 body:has(#game:not([hidden])) .timer-card{width:250px!important;min-height:58px!important;font-size:19px!important;padding:10px!important}
}

/* Approved rack spacing: distinct gaps between each playable tile */
@media(min-width:821px) and (min-height:700px){
 body:has(#game:not([hidden])) #rack{
   display:flex!important;
   justify-content:center!important;
   align-items:center!important;
   gap:10px!important;
 }
 body:has(#game:not([hidden])) #rack .tile{
   margin-left:0!important;
   margin-right:0!important;
 }
 body:has(#game:not([hidden])) #opponentRack{
   display:flex!important;
   justify-content:center!important;
   align-items:center!important;
   gap:10px!important;
 }
 body:has(#game:not([hidden])) .opponent-tile{
   margin-left:0!important;
   margin-right:0!important;
 }
}

/* High-resolution diverse human avatar set */
.human-avatar{background-image:var(--human-avatar-sprite,url('/avatar-sprite-all.jpg'))!important;background-size:600% 400%!important;background-repeat:no-repeat!important}

/* Computer difficulty avatars */
.robot-medium{background-image:url('/Medium%20Computer%20robot.jpg')!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
.robot-hard-1{background-image:url('/Hard%20level%20computer%20robot%201.png')!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
.robot-hard-2{background-image:url('/Hard%20level%20computer%20robot%202nd%20option.png')!important;background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}

/* Pet avatars use individual image files */
.pet-avatar{background-repeat:no-repeat!important}

/* Unified 48-avatar grid: 6 columns x 8 rows, equal square crops */
.grid-avatar{background-image:url('/Vibrant%2048-Avatar%20Portrait%20Grid%20JPEG.jpg')!important;background-size:600% 800%!important;background-repeat:no-repeat!important}

/* 48 approved avatars now load as individual files; no sprite positioning */
.individual-avatar{background-repeat:no-repeat!important;background-size:cover!important;background-position:center!important}

/* Reset avatar system: only the 24 images extracted from Human avatars.jpg */
.human24-avatar{background-repeat:no-repeat!important;background-size:cover!important;background-position:center!important}

/* Persistent selected avatar shown beside Choose Avatar on the start page */
.avatar-pick-row{display:flex!important;align-items:center!important;justify-content:center!important;gap:12px!important}
.lobby-avatar-preview{width:96px!important;height:86px!important;flex:0 0 96px!important;border-radius:10px!important;border:3px solid #54d7ff!important;box-sizing:border-box!important;background-repeat:no-repeat!important;background-size:cover!important;background-position:center!important;box-shadow:0 0 0 2px #082e59!important}

.pet24-avatar{background-repeat:no-repeat!important;background-size:cover!important;background-position:center!important}
.avatar-pick-row #choosePeople,.avatar-pick-row #choosePets{min-width:92px}

/* Score-card avatars: square portrait frame instead of circular */
.score-avatar{border-radius:14px!important;background-size:cover!important;background-position:center!important}

/* Approved score-card avatar frame: dark gold / antique brass */
.score-avatar{border-color:#80601F!important}

/* Start-page avatar placeholder: gold square with stylized A until first selection */
.avatar-placeholder{
  display:flex!important;align-items:center!important;justify-content:center!important;
  box-sizing:border-box!important;width:96px!important;height:86px!important;
  border:3px solid #80601F!important;border-radius:10px!important;
  background:radial-gradient(circle at 38% 30%,#ffe88a 0,#d9a51e 38%,#8a5a0d 100%)!important;
  color:#ffd84f!important;font-family:Impact,'Arial Black',sans-serif!important;
  font-size:42px!important;font-weight:900!important;font-style:italic!important;line-height:1!important;
  text-shadow:-2px -2px 0 #071a3e,2px -2px 0 #071a3e,-2px 2px 0 #071a3e,2px 2px 0 #071a3e,0 3px 5px #0009!important;
  box-shadow:inset 0 0 0 2px #ffd85a,0 0 12px #d9a51e66!important;
}

/* Approved start-page avatar presentation */
.avatar-section{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;margin:8px 0 14px!important}
.avatar-section-title{margin:0 0 8px!important;color:#ffd34d!important;font-size:17px!important;font-weight:900!important;letter-spacing:.8px!important;text-align:center!important;text-shadow:0 2px 3px #0009!important}
.avatar-section .lobby-avatar-preview{width:72px!important;height:72px!important;flex:0 0 72px!important;margin:0 auto 10px!important;border-radius:12px!important;border:3px solid #d79b13!important;box-sizing:border-box!important}
.avatar-section .avatar-placeholder{
 background:
   repeating-conic-gradient(from 0deg at 50% 50%,#ffd85a 0deg 7deg,#f0a713 7deg 14deg)!important;
 color:#ffd54a!important;
 font-size:52px!important;
 border:4px solid #d99b12!important;
 box-shadow:inset 0 0 0 2px #ffe783,inset 0 0 18px #a85b00aa,0 0 12px #e2a51c99!important;
 text-shadow:-2px -2px 0 #0a2b59,2px -2px 0 #0a2b59,-2px 2px 0 #0a2b59,2px 2px 0 #0a2b59,4px 4px 0 #08204a!important
}
.avatar-pick-buttons{display:flex!important;align-items:center!important;justify-content:center!important;gap:14px!important}
.avatar-pick-buttons #choosePeople,.avatar-pick-buttons #choosePets{width:108px!important;min-width:108px!important;margin:0!important;padding:10px 14px!important}

/* Start-page avatar alignment and approved mockup styling */
.avatar-section{width:100%!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important}
.avatar-section-title{width:100%!important;text-align:center!important;color:#FFD34D!important;font-size:17px!important;font-weight:900!important;letter-spacing:.8px!important;margin:0 0 8px!important;text-shadow:0 2px 3px #0009!important}
.avatar-section .lobby-avatar-preview{align-self:center!important;margin-left:auto!important;margin-right:auto!important}
.avatar-pick-buttons{width:100%!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:14px!important}
.avatar-section .avatar-placeholder{
 color:transparent!important;
 font-size:0!important;
 background-image:url('/avatar-a-mockup.svg')!important;
 background-size:cover!important;
 background-position:center!important;
 background-repeat:no-repeat!important;
 border:0!important;
 box-shadow:0 0 12px #e2a51c99!important;
}

/* Approved score-card avatar frame: thicker bright dark-gold treatment */
.score-avatar{
  border:6px solid #D6A315!important;
  border-radius:14px!important;
  box-shadow:
    inset 0 0 0 2px #FFE57A,
    0 0 0 2px #80601F,
    0 0 10px #FFD43B99!important;
  background-size:cover!important;
  background-position:center!important;
}


/* Player-only function controls: 2 rows of 3 directly below player's timer */
body:has(#game:not([hidden])) .left-panel .rack-actions{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:8px!important;
  width:100%!important;
  margin:10px 0 0!important;
  white-space:normal!important;
}
body:has(#game:not([hidden])) .left-panel .rack-actions button{
  width:100%!important;
  min-width:0!important;
  height:62px!important;
  min-height:62px!important;
  margin:0!important;
  padding:6px 4px!important;
  font-size:14px!important;
  line-height:17px!important;
  white-space:normal!important;
  font-weight:800!important;
}


/* Covered bonus/star squares always keep the owning player's tile color */
#board .sq.star.locked.tile-blue,
#board .sq.start.locked.tile-blue{
  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;
}
#board .sq.star.locked.tile-orange,
#board .sq.start.locked.tile-orange{
  background:linear-gradient(145deg,#ffbd59,#e9681e)!important;
  color:#28140a!important;
  border:1px solid #ffd39b!important;
  box-shadow:inset 0 2px 4px #fff7,0 3px 5px #6c280066!important;
}
#board .sq.star.pending,
#board .sq.start.pending{
  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;
}


/* Turn-box last-action messages: 50% larger */
.side-last-move{
  font-size:15px!important;
  line-height:18px!important;
}


/* Online opponent pending tiles: show position/color only; never reveal letters */
#board .sq.opponent-pending{
  background:linear-gradient(145deg,#ffbd59,#e9681e)!important;
  color:transparent!important;
  border:1px solid #ffd39b!important;
  box-shadow:inset 0 2px 4px #fff7,0 3px 5px #6c280066!important;
}


/* Permanent player identities: Player 1 green, Player 2 orange, including pending tiles */
#board .sq.pending-player-0,
#board .sq.star.pending-player-0,
#board .sq.start.pending-player-0{
  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;
}
#board .sq.pending-player-1,
#board .sq.star.pending-player-1,
#board .sq.start.pending-player-1{
  background:linear-gradient(145deg,#ffbd59,#e9681e)!important;
  color:#28140a!important;
  border:1px solid #ffd39b!important;
  box-shadow:inset 0 2px 4px #fff7,0 3px 5px #6c280066!important;
}
#board .sq.opponent-player-0{
  background:linear-gradient(145deg,#83f468,#2fc63f)!important;
  color:transparent!important;
  border:1px solid #baffaa!important;
  box-shadow:inset 0 2px 4px #fff9,0 4px 7px #073e1b66!important;
}
#board .sq.opponent-player-1{
  background:linear-gradient(145deg,#ffbd59,#e9681e)!important;
  color:transparent!important;
  border:1px solid #ffd39b!important;
  box-shadow:inset 0 2px 4px #fff7,0 3px 5px #6c280066!important;
}


/* Permanent rack identity: room creator/Player 1 green; Player 2 orange */
#rack .tile.player-0{
  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;
}
#rack .tile.player-1{
  background:linear-gradient(145deg,#ffbd59,#e9681e)!important;
  color:#28140a!important;
  border:1px solid #ffd39b!important;
  box-shadow:inset 0 2px 4px #fff7,0 3px 5px #6c280066!important;
}

/* Keep the game-screen ownership notice visible below the rack */
@media(min-width:821px) and (min-height:700px){
 body:has(#game:not([hidden])) .game-brand-footer{display:block!important;margin:8px auto 4px!important;padding:3px 12px!important}
}

/* Physical rack shuffle animation */
@keyframes rackTileShuffle{0%{translate:0 0;rotate:0deg;z-index:1}25%{translate:var(--shuffle-x) var(--shuffle-y);rotate:var(--shuffle-r);z-index:8}50%{translate:var(--shuffle-x2) 8px;rotate:var(--shuffle-r2);z-index:8}75%{translate:var(--shuffle-x3) -5px;rotate:var(--shuffle-r3);z-index:8}100%{translate:0 0;rotate:0deg;z-index:1}}
body:has(#game:not([hidden])) #rack .tile.rack-shuffling{animation:rackTileShuffle .72s cubic-bezier(.35,.05,.25,1) both!important;will-change:translate,rotate;position:relative!important}

/* Played-word score animation */
.played-score-float{position:fixed;z-index:10020;pointer-events:none;transform:translate(-50%,-50%);font-size:34px;font-weight:1000;line-height:1;color:#fff;text-shadow:0 2px 3px #000,0 0 10px currentColor;animation:playedScoreRise 1.05s cubic-bezier(.2,.7,.25,1) forwards}
.played-score-float.player-0{color:#9cff83}.played-score-float.player-1{color:#ffbd59}
@keyframes playedScoreRise{0%{opacity:0;translate:0 12px;scale:.72}18%{opacity:1;scale:1.18}68%{opacity:1;translate:0 -54px;scale:1}100%{opacity:0;translate:0 -82px;scale:.92}}
#playerScore.score-pop,#opponentScore.score-pop{animation:scoreTotalPop .38s ease-out}
@keyframes scoreTotalPop{0%{scale:1}45%{scale:1.18}100%{scale:1}}

/* Newly committed tile lock-in */
body:has(#game:not([hidden])) #board .sq.tile-lock-in{position:relative;z-index:12;animation:tileLockIn .48s cubic-bezier(.2,.8,.25,1) var(--lock-delay,0ms) both!important}
@keyframes tileLockIn{0%{scale:.88;filter:brightness(1);box-shadow:0 0 0 rgba(255,255,255,0)}38%{scale:1.12;filter:brightness(1.42);box-shadow:0 0 15px 5px rgba(255,255,255,.72)}68%{scale:.97;filter:brightness(1.12);box-shadow:0 0 8px 2px rgba(255,255,255,.38)}100%{scale:1;filter:brightness(1);box-shadow:inherit}}
body:has(#game:not([hidden])) #board .sq.tile-lock-in.tile-lock-star{animation:tileLockStar .58s cubic-bezier(.2,.8,.25,1) var(--lock-delay,0ms) both!important}
@keyframes tileLockStar{0%{scale:.86;filter:brightness(1);box-shadow:0 0 0 rgba(255,215,0,0)}30%{scale:1.16;filter:brightness(1.65);box-shadow:0 0 24px 9px rgba(255,215,0,.95),0 0 40px 12px rgba(255,185,0,.48)}62%{scale:.96;filter:brightness(1.28);box-shadow:0 0 15px 5px rgba(255,215,0,.68)}100%{scale:1;filter:brightness(1);box-shadow:inherit}}

/* Strong star-square lock flash: overlay avoids existing !important tile shadows */
body:has(#game:not([hidden])) #board .sq.tile-lock-star{overflow:visible!important}
body:has(#game:not([hidden])) #board .sq.tile-lock-star:before{
 content:''!important;position:absolute!important;inset:-7px!important;border-radius:10px!important;pointer-events:none!important;z-index:30!important;
 border:3px solid #ffd21a!important;
 background:radial-gradient(circle,rgba(255,245,150,.92) 0,rgba(255,210,26,.52) 38%,rgba(255,157,0,.16) 64%,rgba(255,157,0,0) 76%)!important;
 box-shadow:0 0 10px 4px rgba(255,210,26,.95),0 0 25px 9px rgba(255,157,0,.72)!important;
 animation:starLockFlash .62s ease-out var(--lock-delay,0ms) both!important
}
@keyframes starLockFlash{0%{opacity:0;scale:.65}18%{opacity:1;scale:1.28}48%{opacity:.95;scale:1.08}100%{opacity:0;scale:1.42}}

/* Bonus star shoots out of the newly locked tile, matching the board-star glyph */
.shooting-bonus-star{position:fixed;z-index:10030;pointer-events:none;transform:translate(-50%,-50%);color:#ffd21a;-webkit-text-stroke:1px #c88600;font-size:30px;font-weight:900;line-height:1;text-shadow:none;filter:none;animation:shootBonusStar .82s cubic-bezier(.18,.75,.25,1) forwards}
@keyframes shootBonusStar{0%{opacity:0;translate:0 0;scale:.55;rotate:-12deg}14%{opacity:1;scale:1.15;rotate:4deg}42%{opacity:1;translate:0 -34px;scale:1.75;rotate:12deg}70%{opacity:.85;translate:0 -58px;scale:2.15;rotate:22deg}100%{opacity:0;translate:0 -82px;scale:2.65;rotate:34deg}}

/* Brief staggered highlight for every word created by a play */
body:has(#game:not([hidden])) #board .sq.new-word-pulse{position:relative;z-index:14;animation:newWordPulse .52s ease-out both!important}
@keyframes newWordPulse{0%{filter:brightness(1);scale:1}35%{filter:brightness(1.42);scale:1.07}100%{filter:brightness(1);scale:1}}
.new-word-tag{position:fixed;z-index:10025;pointer-events:none;transform:translate(-50%,-100%);font-size:18px;font-weight:1000;letter-spacing:.08em;color:#fff;text-shadow:0 2px 3px #000,0 0 8px #000;animation:newWordTag .62s ease-out forwards}
@keyframes newWordTag{0%{opacity:0;translate:0 5px;scale:.82}20%{opacity:1;scale:1.08}70%{opacity:1;translate:0 -12px;scale:1}100%{opacity:0;translate:0 -22px;scale:.94}}

/* Visual-only combo counter for turns that create multiple words */
.word-combo{position:fixed;z-index:10026;pointer-events:none;transform:translate(-50%,-100%);font-size:15px;font-weight:1000;letter-spacing:.09em;color:#ffd21a;-webkit-text-stroke:.5px #9b6500;text-shadow:0 2px 3px #000,0 0 8px rgba(255,210,26,.55);animation:wordComboPop .56s cubic-bezier(.2,.8,.25,1) forwards}
@keyframes wordComboPop{0%{opacity:0;translate:0 7px;scale:.65}22%{opacity:1;scale:1.18}65%{opacity:1;translate:0 -9px;scale:1}100%{opacity:0;translate:0 -18px;scale:.92}}

/* Two-direction star: mirrored second star and brief +100 marker */
.shooting-bonus-star-twin{animation:shootBonusStarTwin .82s cubic-bezier(.18,.75,.25,1) forwards}
@keyframes shootBonusStarTwin{0%{opacity:0;translate:0 0;scale:.55;rotate:12deg}14%{opacity:1;scale:1.15;rotate:-4deg}42%{opacity:1;translate:34px -23px;scale:1.75;rotate:-12deg}70%{opacity:.85;translate:58px -40px;scale:2.15;rotate:-22deg}100%{opacity:0;translate:82px -58px;scale:2.65;rotate:-34deg}}
.double-star-points{position:fixed;z-index:10031;pointer-events:none;transform:translate(-50%,-50%);font-size:17px;font-weight:1000;color:#ffe36a;text-shadow:0 2px 4px #000,0 0 9px #a86d00;animation:doubleStarPoints .75s ease-out forwards}
@keyframes doubleStarPoints{0%{opacity:0;translate:0 0;scale:.7}25%{opacity:1;translate:0 -17px;scale:1.22}65%{opacity:1;translate:0 -35px;scale:1}100%{opacity:0;translate:0 -49px;scale:.9}}

/* One-time connection bonus celebration */
body:has(#game:not([hidden])) #board .sq.connection-pulse{position:relative;z-index:13;animation:connectionTilePulse .6s ease-out both!important}
@keyframes connectionTilePulse{0%{filter:brightness(1);scale:1}38%{filter:brightness(1.65);scale:1.09}100%{filter:brightness(1);scale:1}}
.connection-bonus-tag{position:fixed;z-index:10028;pointer-events:none;transform:translate(-50%,-100%);white-space:nowrap;font-size:19px;font-weight:1000;letter-spacing:.06em;color:#baffaa;text-shadow:0 2px 4px #000,0 0 10px #238e4b;animation:connectionBonusRise .88s ease-out forwards}
@keyframes connectionBonusRise{0%{opacity:0;translate:0 6px;scale:.8}20%{opacity:1;scale:1.1}68%{opacity:1;translate:0 -20px;scale:1}100%{opacity:0;translate:0 -35px;scale:.96}}

/* Subtle one-second seven-tile bonus celebration */
body:has(#game:not([hidden])) #board .sq.seven-tile-shimmer{position:relative;z-index:14;animation:sevenTileShimmer .7s ease-out both!important}
@keyframes sevenTileShimmer{0%{filter:brightness(1) sepia(0);scale:1}32%{filter:brightness(1.4) sepia(.25) saturate(1.4);scale:1.06}100%{filter:brightness(1) sepia(0);scale:1}}
.seven-tile-bonus-tag{position:fixed;z-index:10029;pointer-events:none;transform:translate(-50%,-100%);white-space:nowrap;font-size:18px;font-weight:1000;letter-spacing:.05em;color:#ffe28b;text-shadow:0 2px 4px #000,0 0 8px #b5821b;animation:sevenTileBonusRise .88s ease-out forwards}
@keyframes sevenTileBonusRise{0%{opacity:0;translate:0 5px;scale:.85}20%{opacity:1;scale:1.08}68%{opacity:1;translate:0 -18px;scale:1}100%{opacity:0;translate:0 -32px;scale:.95}}

/* Brief active-player turn transition; no permanent styling */
body:has(#game:not([hidden])) #playerCard.turn-glow-green,body:has(#game:not([hidden])) #opponentCard.turn-glow-green{animation:turnGlowGreen .82s ease-out both!important}
body:has(#game:not([hidden])) #playerCard.turn-glow-orange,body:has(#game:not([hidden])) #opponentCard.turn-glow-orange{animation:turnGlowOrange .82s ease-out both!important}
@keyframes turnGlowGreen{0%,100%{filter:brightness(1);outline:0 solid transparent}35%{filter:brightness(1.17);outline:3px solid rgba(76,225,93,.8)}}
@keyframes turnGlowOrange{0%,100%{filter:brightness(1);outline:0 solid transparent}35%{filter:brightness(1.17);outline:3px solid rgba(255,156,58,.85)}}

/* Persistent active-turn glow follows player identity on both screens. */
body:has(#game:not([hidden])) .score-card.turn-glow-active.turn-glow-p1{box-shadow:0 0 0 5px rgba(93,230,105,.98),0 0 14px 6px rgba(47,198,63,.85),0 0 30px 12px rgba(47,198,63,.5)!important;outline:4px solid rgba(186,255,170,1)!important;outline-offset:3px}
body:has(#game:not([hidden])) .score-card.turn-glow-active.turn-glow-p2{box-shadow:0 0 0 5px rgba(255,160,68,.98),0 0 14px 6px rgba(255,135,34,.85),0 0 30px 12px rgba(255,135,34,.5)!important;outline:4px solid rgba(255,193,112,1)!important;outline-offset:3px}

/* Endgame trophy and winner scoreboard — confined to existing replay dialog */
body:has(#game:not([hidden])) .replay-dialog{position:relative;width:min(600px,94vw);max-height:min(85vh,780px);overflow-y:auto;padding:18px 22px 20px;background:linear-gradient(150deg,#132b4d,#07172e);border:3px solid #e7b94d;box-shadow:0 0 28px #ffca4a55}
.victory-trophy{position:relative;width:126px;height:140px;margin:0 auto 4px;filter:drop-shadow(0 0 12px #ffc53488)}
.victory-trophy-crown{position:absolute;top:-8px;left:34px;font-size:48px;color:#ffe386;text-shadow:0 2px 1px #b16b08;z-index:2}
.victory-trophy-cup{position:absolute;top:28px;left:16px;width:94px;height:72px;border-radius:8px 8px 42px 42px;background:linear-gradient(110deg,#9e5a0a,#ffe78b 30%,#ffc638 53%,#fff0a1 75%,#a9650d);border:3px solid #ffde65;box-shadow:inset 0 -9px 12px #a7681caa,0 0 12px #ffc43d66;display:grid;place-items:center}
.victory-trophy-cup:before,.victory-trophy-cup:after{content:'';position:absolute;top:9px;width:25px;height:39px;border:9px solid #edb336;border-radius:50%;z-index:-1}.victory-trophy-cup:before{left:-27px}.victory-trophy-cup:after{right:-27px}
.victory-trophy-cup span{font:bold 36px Georgia,serif;letter-spacing:-3px;color:#ffda5e;-webkit-text-stroke:1px #8b5106;text-shadow:2px 3px 0 #5b3909;background:#112b51;padding:2px 6px;border:2px solid #ffd65e;border-radius:8px}
.victory-trophy-stem{position:absolute;top:96px;left:55px;width:16px;height:26px;background:linear-gradient(90deg,#9a600f,#ffe282,#ad6b16)}
.victory-trophy-base{position:absolute;bottom:6px;left:24px;width:78px;height:17px;background:linear-gradient(#ffe181,#ae6a16);border:2px solid #ffdf7a;border-radius:4px}
body:has(#game:not([hidden])) .winner-message{font-size:clamp(25px,4vw,38px);margin-bottom:8px;position:relative;z-index:2}
.victory-finalists{display:flex;justify-content:center;gap:14px;margin:10px auto 16px}
.victory-finalist{flex:1;min-width:0;max-width:205px;display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid #4b6380;border-radius:13px;padding:11px 7px;background:#14273d;color:#fff}
.victory-finalist.victory-p1{border-color:#54d66b}.victory-finalist.victory-p2{border-color:#f4a451}
.victory-finalist.victory-winner.victory-p1{box-shadow:0 0 16px #40dc67aa;background:#0c3926}
.victory-finalist.victory-winner.victory-p2{box-shadow:0 0 16px #ff9c3faa;background:#49301d}
.victory-avatar{width:75px;height:75px;border-radius:50%;border:3px solid #f8d369;background-size:cover;background-position:center;background-color:#233c59;flex-shrink:0}
.victory-finalist strong{font-size:15px;max-width:100%;overflow-wrap:anywhere}.victory-finalist b{font-size:30px;color:#ffdf77}
.victory-sparkles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.victory-sparkles span{position:absolute;color:#ffe46d;text-shadow:0 0 12px #ffba18;opacity:0;font-size:22px}
.victory-local-win .victory-sparkles span{animation:victoryGoldStar 1.9s ease-out both}
.victory-sparkles span:nth-child(1){left:12%;top:9%;--dx:-30px;--dy:-24px;animation-delay:.1s}
.victory-sparkles span:nth-child(2){left:82%;top:14%;--dx:32px;--dy:-35px;animation-delay:.22s}
.victory-sparkles span:nth-child(3){left:20%;top:36%;--dx:-28px;--dy:10px;animation-delay:.34s}
.victory-sparkles span:nth-child(4){left:78%;top:40%;--dx:30px;--dy:4px;animation-delay:.46s}
.victory-sparkles span:nth-child(5){left:40%;top:8%;--dx:-12px;--dy:-25px;animation-delay:.56s}
.victory-sparkles span:nth-child(6){left:64%;top:7%;--dx:15px;--dy:-29px;animation-delay:.66s}
@keyframes victoryGoldStar{0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0)}25%{opacity:1;transform:translate(0,0) scale(1.3) rotate(25deg)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.7) rotate(100deg)}}
body:has(#game:not([hidden])) .replay-question{font-size:18px;margin-bottom:5px}
body:has(#game:not([hidden])) #replayCountdown{margin-bottom:12px}
@media(max-width:480px){body:has(#game:not([hidden])) .replay-dialog{padding:12px}.victory-trophy{transform:scale(.78);height:115px;margin-top:-10px}.victory-avatar{width:58px;height:58px}.victory-finalist b{font-size:23px}.replay-actions button{min-width:0!important;font-size:16px!important;padding:10px 12px!important}}

/* Actual approved championship trophy artwork, replacing the CSS-drawn trophy */
body:has(#game:not([hidden])) .replay-modal{position:fixed!important;inset:0!important;top:0!important;left:0!important;right:0!important;transform:none!important;display:grid!important;place-items:center!important;z-index:10040!important;background:rgba(2,9,23,.82)!important;pointer-events:auto!important;padding:16px!important}
body:has(#game:not([hidden])) .replay-modal[hidden]{display:none!important}
body:has(#game:not([hidden])) .replay-dialog{width:min(690px,96vw)!important;max-height:94dvh!important;overflow:auto!important;padding:16px 24px 22px!important;border:3px solid #ffda66!important;background:radial-gradient(ellipse at 50% 15%,#234878,#07152c 75%)!important;box-shadow:0 0 55px #e4a93b88!important}
.victory-trophy-art{height:clamp(165px,32vh,290px);display:flex;justify-content:center;align-items:center;margin:-5px auto 2px;overflow:hidden}
.victory-trophy-art img{height:100%;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 0 18px #ffc94a66)}
body:has(#game:not([hidden])) .winner-message{font-size:clamp(30px,5vw,48px)!important;letter-spacing:.035em!important;margin:0 0 8px!important;text-transform:uppercase!important;text-shadow:0 3px 2px #5b2c00,0 0 17px #ffcb42!important}
body:has(#game:not([hidden])) .victory-finalists{margin:12px auto 18px!important;gap:18px!important}
body:has(#game:not([hidden])) .victory-finalist{max-width:240px!important;padding:14px 10px!important}
body:has(#game:not([hidden])) .victory-avatar{width:92px!important;height:92px!important}
body:has(#game:not([hidden])) .victory-finalist b{font-size:35px!important}
@media(max-width:480px){.victory-trophy-art{height:clamp(125px,25vh,210px)}body:has(#game:not([hidden])) .replay-dialog{padding:12px!important}body:has(#game:not([hidden])) .victory-avatar{width:62px!important;height:62px!important}body:has(#game:not([hidden])) .victory-finalist b{font-size:25px!important}}

/* Blank tile selector: interactive hit areas over approved branded artwork */
.blank-letter-modal{position:fixed;inset:0;z-index:11000;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(2,9,24,.8)}
.blank-letter-modal[hidden]{display:none!important}
.blank-letter-panel{position:relative;width:min(94vw,800px,calc((100dvh - 24px)*1.2));aspect-ratio:1343/1119;flex-shrink:0}
.blank-letter-panel>img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
.blank-letter-choices{position:absolute;inset:0;pointer-events:none}
.blank-letter-choice{position:absolute;z-index:2;display:block;margin:0;padding:0;border:0!important;border-radius:13%;background:transparent!important;box-shadow:none!important;cursor:pointer;pointer-events:auto;min-width:0!important;min-height:0!important;transform:none!important}
.blank-letter-choice:hover{background:rgba(255,217,85,.18)!important;box-shadow:inset 0 0 0 3px #ffe38e!important}
.blank-letter-choice:focus-visible,.blank-letter-close:focus-visible{outline:3px solid #fff!important;outline-offset:0}
.blank-letter-close{position:absolute;right:2.6%;top:4.3%;width:7.7%;height:9.4%;border:0!important;border-radius:50%;background:transparent!important;box-shadow:none!important;cursor:pointer;min-width:0!important;min-height:0!important;padding:0!important}
@media(prefers-reduced-motion:reduce){.blank-letter-choice{transition:none!important}}

/* Compact winner trophy directly above the winning avatar */
body:has(#game:not([hidden])) .victory-trophy-inline{height:86px;width:100%;margin:0 auto 3px;display:flex;align-items:center;justify-content:center;overflow:visible}
body:has(#game:not([hidden])) .victory-trophy-inline[hidden]{display:none!important}
body:has(#game:not([hidden])) .victory-trophy-inline img{height:86px;width:86px;max-width:100%;object-fit:contain;filter:drop-shadow(0 0 9px #ffc94a88)}
body:has(#game:not([hidden])) .victory-finalist{justify-content:flex-end}
body:has(#game:not([hidden])) .victory-finalist:not(.victory-winner){padding-top:101px!important}
@media(max-width:480px){body:has(#game:not([hidden])) .victory-trophy-inline{height:64px}body:has(#game:not([hidden])) .victory-trophy-inline img{width:64px;height:64px}body:has(#game:not([hidden])) .victory-finalist:not(.victory-winner){padding-top:79px!important}}

/* Approved victory layout: floating trophy above card; stars only above winner */
body:has(#game:not([hidden])) .victory-finalists{display:flex!important;align-items:flex-end!important;justify-content:center!important;gap:18px!important;margin:4px auto 16px!important}
body:has(#game:not([hidden])) .victory-contender{position:relative;flex:1;min-width:0;max-width:240px;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;padding-top:160px}
body:has(#game:not([hidden])) .victory-contender .victory-finalist{box-sizing:border-box;width:100%;max-width:none!important;height:182px;margin:0!important;padding:14px 10px!important;justify-content:center!important;position:relative;z-index:2}
body:has(#game:not([hidden])) .victory-contender .victory-finalist:not(.victory-winner){padding-top:14px!important}
body:has(#game:not([hidden])) .victory-contender .victory-trophy-inline{position:absolute;top:0;left:0;width:100%;height:144px;margin:0!important;z-index:3;display:flex;justify-content:center;align-items:center;overflow:visible}
body:has(#game:not([hidden])) .victory-contender .victory-trophy-inline[hidden]{display:none!important}
body:has(#game:not([hidden])) .victory-contender .victory-trophy-inline img{width:138px;height:138px;max-width:85%;object-fit:contain;filter:drop-shadow(0 0 12px #ffc94a88)}
body:has(#game:not([hidden])) .victory-contender .victory-sparkles{position:absolute;inset:0 0 auto;height:154px;overflow:hidden;z-index:4;pointer-events:none}
body:has(#game:not([hidden])) .victory-contender:not(.victory-contender-winner) .victory-sparkles{display:none!important}
body:has(#game:not([hidden])) .victory-contender .victory-sparkles span:nth-child(1){left:10%;top:18%}
body:has(#game:not([hidden])) .victory-contender .victory-sparkles span:nth-child(2){left:80%;top:15%}
body:has(#game:not([hidden])) .victory-contender .victory-sparkles span:nth-child(3){left:23%;top:45%}
body:has(#game:not([hidden])) .victory-contender .victory-sparkles span:nth-child(4){left:70%;top:50%}
body:has(#game:not([hidden])) .victory-contender .victory-sparkles span:nth-child(5){left:6%;top:62%}
body:has(#game:not([hidden])) .victory-contender .victory-sparkles span:nth-child(6){left:85%;top:65%}
body:has(#game:not([hidden])) .victory-winner-label{position:relative!important;font-size:clamp(20px,3vw,33px)!important;line-height:1.15!important;margin:8px -12px 0!important;min-height:39px;white-space:nowrap;text-align:center}
body:has(#game:not([hidden])) .victory-winner-label[hidden]{display:none!important}
body:has(#game:not([hidden])) .victory-contender:not(.victory-contender-winner)::after{content:"";height:47px;display:block}
@media(max-width:480px){body:has(#game:not([hidden])) .victory-contender{padding-top:108px}body:has(#game:not([hidden])) .victory-contender .victory-trophy-inline{height:100px}body:has(#game:not([hidden])) .victory-contender .victory-trophy-inline img{width:95px;height:95px}body:has(#game:not([hidden])) .victory-contender .victory-finalist{height:145px;padding:9px 5px!important}body:has(#game:not([hidden])) .victory-contender .victory-sparkles{height:104px}body:has(#game:not([hidden])) .victory-winner-label{font-size:clamp(16px,4.5vw,23px)!important;min-height:28px}body:has(#game:not([hidden])) .victory-contender:not(.victory-contender-winner)::after{height:36px}}

/* Freestanding transparent WD trophy vector, no rectangular image background */
body:has(#game:not([hidden])) .victory-contender .victory-trophy-inline .wd-trophy-svg{width:138px;height:138px;max-width:85%;overflow:visible;filter:drop-shadow(0 0 8px #ffbd3788)}
@media(max-width:480px){body:has(#game:not([hidden])) .victory-contender .victory-trophy-inline .wd-trophy-svg{width:95px;height:95px}}

/* Original Word Duel trophy branding, larger, floating with clear gap above winner card */
body:has(#game:not([hidden])) .victory-contender .victory-trophy-inline .wd-original-brand-trophy{width:185px;height:154px;max-width:100%;overflow:visible;filter:drop-shadow(0 0 9px #ffbd3788)}
body:has(#game:not([hidden])) .victory-contender .victory-trophy-inline{height:150px!important;top:-13px!important}
body:has(#game:not([hidden])) .victory-contender .victory-sparkles{height:147px!important;top:-10px!important}
body:has(#game:not([hidden])) .victory-contender .victory-sparkles span{font-size:27px;text-shadow:0 0 11px #ffc233}
@media(max-width:480px){body:has(#game:not([hidden])) .victory-contender .victory-trophy-inline .wd-original-brand-trophy{width:132px;height:110px}body:has(#game:not([hidden])) .victory-contender .victory-trophy-inline{height:106px!important;top:-8px!important}body:has(#game:not([hidden])) .victory-contender .victory-sparkles{height:102px!important;top:-7px!important}}

/* Approved victory mockup refinement: larger branded trophy and visible upper-only stars */
body:has(#game:not([hidden])) .victory-contender .victory-trophy-inline .wd-original-brand-trophy{width:218px!important;height:164px!important;max-width:100%!important;overflow:visible!important;filter:drop-shadow(0 0 10px #ffba43bb)!important}
body:has(#game:not([hidden])) .victory-contender .victory-trophy-inline{height:160px!important;top:-17px!important}
body:has(#game:not([hidden])) .victory-contender .victory-sparkles{height:157px!important;top:-13px!important;overflow:visible!important}
body:has(#game:not([hidden])) .victory-contender-winner .victory-sparkles span{opacity:0;animation:victoryGoldStar 2.6s ease-out infinite!important;font-size:27px!important;color:#ffdf54!important;text-shadow:0 0 9px #ffae00,0 0 19px #ffd554!important}
body:has(#game:not([hidden])) .victory-contender-winner .victory-sparkles span:nth-child(1){left:4%!important;top:15%!important;animation-delay:.05s!important}
body:has(#game:not([hidden])) .victory-contender-winner .victory-sparkles span:nth-child(2){left:85%!important;top:15%!important;animation-delay:.4s!important}
body:has(#game:not([hidden])) .victory-contender-winner .victory-sparkles span:nth-child(3){left:10%!important;top:50%!important;animation-delay:.8s!important}
body:has(#game:not([hidden])) .victory-contender-winner .victory-sparkles span:nth-child(4){left:81%!important;top:50%!important;animation-delay:1.2s!important}
body:has(#game:not([hidden])) .victory-contender-winner .victory-sparkles span:nth-child(5){left:22%!important;top:4%!important;animation-delay:1.6s!important}
body:has(#game:not([hidden])) .victory-contender-winner .victory-sparkles span:nth-child(6){left:71%!important;top:5%!important;animation-delay:2s!important}
@media(max-width:480px){body:has(#game:not([hidden])) .victory-contender .victory-trophy-inline .wd-original-brand-trophy{width:145px!important;height:112px!important}body:has(#game:not([hidden])) .victory-contender .victory-trophy-inline{height:109px!important;top:-11px!important}body:has(#game:not([hidden])) .victory-contender .victory-sparkles{height:107px!important;top:-8px!important}body:has(#game:not([hidden])) .victory-contender-winner .victory-sparkles span{font-size:19px!important}}

/* Original WD trophy photograph, feathered into the blue results panel. */
body:has(#game:not([hidden])) .victory-contender .victory-trophy-inline .wd-original-trophy-photo{
 width:224px!important;height:174px!important;max-width:none!important;
 object-fit:cover!important;object-position:center 45%!important;
 -webkit-mask-image:radial-gradient(ellipse 62% 61% at 50% 49%,#000 50%,rgba(0,0,0,.97) 65%,transparent 100%)!important;
 mask-image:radial-gradient(ellipse 62% 61% at 50% 49%,#000 50%,rgba(0,0,0,.97) 65%,transparent 100%)!important;
 filter:drop-shadow(0 0 9px #fbb83c66)!important;
}
body:has(#game:not([hidden])) .victory-contender .victory-trophy-inline{top:-24px!important;height:165px!important}
body:has(#game:not([hidden])) .victory-contender .victory-sparkles{z-index:6!important;top:-17px!important;height:153px!important;overflow:hidden!important}
@keyframes wdWinnerStarTwinkle{0%,100%{opacity:.55;transform:scale(.83) rotate(-9deg)}50%{opacity:1;transform:scale(1.16) rotate(8deg)}}
body:has(#game:not([hidden])) .victory-contender-winner .victory-sparkles span{
 opacity:1!important;animation:wdWinnerStarTwinkle 1.8s ease-in-out infinite alternate!important;
 color:#ffe46b!important;font-size:30px!important;
 text-shadow:0 0 9px #ffbb00,0 0 20px #ffdc63!important;
}
body:has(#game:not([hidden])) .victory-contender-winner .victory-sparkles span:nth-child(1){left:0%!important;top:27%!important;animation-delay:0s!important}
body:has(#game:not([hidden])) .victory-contender-winner .victory-sparkles span:nth-child(2){left:84%!important;top:17%!important;animation-delay:.3s!important}
body:has(#game:not([hidden])) .victory-contender-winner .victory-sparkles span:nth-child(3){left:9%!important;top:67%!important;animation-delay:.7s!important}
body:has(#game:not([hidden])) .victory-contender-winner .victory-sparkles span:nth-child(4){left:83%!important;top:66%!important;animation-delay:.9s!important}
body:has(#game:not([hidden])) .victory-contender-winner .victory-sparkles span:nth-child(5){left:16%!important;top:8%!important;animation-delay:1.2s!important}
body:has(#game:not([hidden])) .victory-contender-winner .victory-sparkles span:nth-child(6){left:69%!important;top:5%!important;animation-delay:1.5s!important}
@media(max-width:480px){
 body:has(#game:not([hidden])) .victory-contender .victory-trophy-inline .wd-original-trophy-photo{width:152px!important;height:116px!important}
 body:has(#game:not([hidden])) .victory-contender .victory-trophy-inline{top:-12px!important;height:105px!important}
 body:has(#game:not([hidden])) .victory-contender .victory-sparkles{top:-8px!important;height:101px!important}
 body:has(#game:not([hidden])) .victory-contender-winner .victory-sparkles span{font-size:19px!important}
}

/* Match the victory results panel to the original WD trophy photo's deep navy background. Keep all layout/artwork untouched. */
body:has(#game:not([hidden])) .replay-modal .replay-dialog{background:#07152c!important}

/* Victory backdrop: one continuous navy-to-blue field; feather photo edges without touching WD artwork. */
body:has(#game:not([hidden])) #replayModal .replay-dialog{
 background:radial-gradient(ellipse 82% 69% at 46% 13%,#203e69 0%,#142e54 40%,#0b1c38 75%,#07152c 100%)!important;
}
body:has(#game:not([hidden])) #replayModal .victory-contender .victory-trophy-inline .wd-original-trophy-photo{
 -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 18%,#000 82%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 17%,#000 80%,transparent 100%)!important;
 -webkit-mask-composite:source-in!important;
 mask-image:radial-gradient(ellipse 67% 66% at 50% 49%,#000 42%,rgba(0,0,0,.95) 65%,rgba(0,0,0,.4) 82%,transparent 100%)!important;
 filter:none!important;
}

/* Approved uploaded WD Victory Trophy: center complete image above winning avatar. */
body:has(#game:not([hidden])) #replayModal .victory-contender .victory-trophy-inline{
 top:-22px!important;height:168px!important;display:flex!important;
 justify-content:center!important;align-items:center!important;overflow:visible!important;
}
body:has(#game:not([hidden])) #replayModal .victory-contender .victory-trophy-inline[hidden]{display:none!important}
body:has(#game:not([hidden])) #replayModal .victory-contender .wd-victory-trophy-image{
 display:block!important;width:218px!important;height:162px!important;max-width:none!important;
 object-fit:contain!important;object-position:center center!important;
 -webkit-mask-image:radial-gradient(ellipse 69% 69% at center,#000 54%,rgba(0,0,0,.85) 73%,transparent 100%)!important;
 mask-image:radial-gradient(ellipse 69% 69% at center,#000 54%,rgba(0,0,0,.85) 73%,transparent 100%)!important;
 filter:none!important;
}
@media(max-width:480px){
 body:has(#game:not([hidden])) #replayModal .victory-contender .victory-trophy-inline{top:-11px!important;height:108px!important}
 body:has(#game:not([hidden])) #replayModal .victory-contender .wd-victory-trophy-image{width:150px!important;height:105px!important}
}

/* Approved October 8 mockup: 20% larger trophy, lower, precisely centered over the winner avatar. */
body:has(#game:not([hidden])) #replayModal .victory-contender .victory-trophy-inline{
 left:0!important;right:0!important;width:100%!important;
 top:-10px!important;height:168px!important;
 justify-content:center!important;align-items:center!important;
}
body:has(#game:not([hidden])) #replayModal .victory-contender .wd-victory-trophy-image{
 width:262px!important;height:194px!important;
 max-width:none!important;object-fit:contain!important;
 object-position:center center!important;
}
@media(max-width:480px){
 body:has(#game:not([hidden])) #replayModal .victory-contender .victory-trophy-inline{
 top:-4px!important;height:108px!important;
 }
 body:has(#game:not([hidden])) #replayModal .victory-contender .wd-victory-trophy-image{
 width:180px!important;height:126px!important;
 }
}

/* Keep full-size trophy clear of the winner score-card top border (160px reserved above card). */
body:has(#game:not([hidden])) #replayModal .victory-contender .victory-trophy-inline{
 top:-32px!important;
}
@media(max-width:480px){
 body:has(#game:not([hidden])) #replayModal .victory-contender .victory-trophy-inline{top:-24px!important}
}

/* Approved Golden Crown banner sizes: lobby 600px, gameplay 500px.
   Scope to desktop; smaller viewports retain existing responsive layout. */
@media(min-width:821px){
 body:has(#lobby:not([hidden])) .brand-art{
  width:min(600px,90vw)!important;
 }
 body:has(#game:not([hidden])) .brand-art{
  width:min(500px,90vw)!important;
 }
}

/* Keep the uploaded victory trophy fully visible; do not fade its gold cup or stars. */
body:has(#game:not([hidden])) #replayModal .victory-contender .wd-victory-trophy-image{
 -webkit-mask-image:none!important;
 mask-image:none!important;
 opacity:1!important;
}

/* Custom Word Duel alert and confirmation dialogs. */
.wd-message-overlay[hidden],.wd-message-actions button[hidden]{display:none!important}
.wd-message-overlay{position:fixed;inset:0;z-index:99999;background:rgba(1,9,27,.75);display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}
.wd-message-panel{width:min(430px,94vw);box-sizing:border-box;border:3px solid #ffd75a;border-radius:19px;background:linear-gradient(155deg,#183d78,#06152f 85%);box-shadow:0 0 30px #ffce4166,0 22px 65px #000b;padding:26px 28px;text-align:center;color:#fff}
.wd-message-heading{font-size:22px;font-weight:900;letter-spacing:1px;color:#ffda61;text-shadow:0 2px 6px #000}
.wd-message-text{font-size:19px;font-weight:650;line-height:1.45;margin:24px 0 25px}
.wd-message-actions{display:flex;justify-content:center;gap:14px}
.wd-message-actions button{min-width:104px;padding:11px 22px;border:2px solid #ffe28a;border-radius:11px;background:linear-gradient(#ffe48d,#f5a21d);box-shadow:0 4px 0 #9b5500;color:#071936;font-size:17px;font-weight:900;cursor:pointer}
.wd-message-actions #wdMessageCancel{background:linear-gradient(#ff6077,#d90e35);border-color:#ff7b8b;color:#fff;box-shadow:0 4px 0 #83051b}
.wd-message-actions button:focus-visible{outline:3px solid #fff;outline-offset:4px}

/* Prominent single-line special-event banner above opponent rack. */
body:has(#game:not([hidden])) #status.wd-event-banner{display:block!important;min-height:27px!important;margin:3px auto 7px!important;padding:0 10px!important;font-size:clamp(17px,2vw,25px)!important;line-height:1.25!important;font-weight:950!important;letter-spacing:.025em!important;text-align:center!important;color:#ffdd60!important;text-shadow:0 2px 3px #00112a,0 0 12px #e5a222!important}
body:has(#game:not([hidden])) #status.wd-event-connection{color:#75ff8f!important;text-shadow:0 1px 3px #00140a,0 0 15px #18e65a!important}
body:has(#game:not([hidden])) #status.wd-event-seven{color:#ffd14b!important;text-shadow:0 1px 3px #291100,0 0 15px #ffae00!important}
body:has(#game:not([hidden])) #status.wd-event-takeover{color:#86eaff!important;text-shadow:0 1px 3px #001129,0 0 13px #23a8ff!important}
body:has(#game:not([hidden])) #lastAction[hidden]{display:none!important}

/* Royal fanfare title: one large word at a time, non-interactive. */
.royal-opening-words[hidden]{display:none!important}
.royal-opening-words{position:fixed;inset:0;z-index:1800;display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:clamp(70px,13vw,205px);font-weight:1000;letter-spacing:.045em;line-height:1;text-align:center;color:#ffd65d;background-image:linear-gradient(180deg,#fffbe2 0%,#ffe58b 13%,#ffbe31 29%,#a95b18 43%,#f6dc86 50%,#338bdf 61%,#0654b8 77%,#06265f 93%,#f8c44c 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-webkit-text-stroke:2px #8b3a09;filter:drop-shadow(0 3px 0 #fff0a5) drop-shadow(0 7px 2px #813405) drop-shadow(0 13px 10px #00122f) drop-shadow(0 0 20px #ffbd38) drop-shadow(0 0 18px #126cda)}
.royal-opening-step-1,.royal-opening-step-2,.royal-opening-step-3{background-image:linear-gradient(180deg,#fffbe2 0%,#ffe58b 13%,#ffbe31 29%,#a95b18 43%,#f6dc86 50%,#338bdf 61%,#0654b8 77%,#06265f 93%,#f8c44c 100%);-webkit-text-stroke-color:#8b3a09}
.royal-opening-flash{animation:royalWordFlash 1.65s ease-out both}
@keyframes royalWordFlash{0%{opacity:0;transform:scale(.45) translateY(22px)}20%{opacity:1;transform:scale(1.1) translateY(0)}38%{transform:scale(1)}78%{opacity:1}100%{opacity:0;transform:scale(1.03)}}
@media(max-width:620px){.royal-opening-words{font-size:clamp(54px,15vw,100px);-webkit-text-stroke-width:1px}}

/* Allow finger scrolling from empty board squares on touchscreens, including hybrid Windows PCs.
   touch-action only governs touch/pointer gestures; mouse wheel and drag/drop are unchanged. */
body:has(#game:not([hidden])) #board{touch-action:pan-y!important}
body:has(#game:not([hidden])) #board .sq{touch-action:pan-y}
body:has(#game:not([hidden])) #board .sq.locked,
body:has(#game:not([hidden])) #board .sq.pending{touch-action:none}

/* Selector artwork update: fully mask the obsolete header without moving letter hitboxes. */
.blank-letter-new-header{position:absolute;left:1.8%;top:0;width:96.4%;height:35%;box-sizing:border-box;background:#031735;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;overflow:hidden;border-radius:0 0 8px 8px}
.blank-letter-new-header::before{content:"";position:absolute;left:1.8%;right:1.8%;top:9%;height:7px;border-radius:9px;background:linear-gradient(#fff4a6,#ffbf2f 50%,#ad5c00);box-shadow:0 0 5px #fff1a0,0 0 12px #ffba34;z-index:2}
.blank-letter-new-header img{display:block;width:91%;height:70%;object-fit:contain;object-position:center;margin-top:4%}
.blank-letter-new-header div{color:#fff;font-size:clamp(12px,2.2vw,23px);font-weight:900;text-shadow:0 2px 3px #000,0 0 7px #001d54;line-height:1.15;white-space:nowrap}
.blank-letter-close{z-index:5!important}

/* Final-move winner announcement: board stays visible until replay modal. */
.winner-flash[hidden]{display:none!important}
.winner-flash{position:fixed;inset:0;z-index:9998;display:grid;place-items:center;pointer-events:none;background:rgba(0,13,42,.34);padding:18px}
.winner-flash-text{max-width:95vw;text-align:center;font-weight:1000;font-size:clamp(2.5rem,9vw,7.5rem);line-height:1.1;letter-spacing:.035em;color:#ffe276;text-shadow:0 3px 0 #6c3500,0 7px 1px #061735,0 0 18px #ffd75d,0 0 45px #ffad22;animation:wdWinnerFlash .45s ease-in-out infinite alternate;overflow-wrap:anywhere}
@keyframes wdWinnerFlash{from{opacity:.65;transform:scale(.94)}to{opacity:1;transform:scale(1.045)}}
@media(prefers-reduced-motion:reduce){.winner-flash-text{animation:none}}

/* Word Dome opening: 20% smaller text; royal-blue second scroll only. */
.royal-opening-words{font-size:clamp(56px,10.4vw,164px);padding:0 12px;box-sizing:border-box}
.royal-opening-step-1{color:#1748cc;background-image:linear-gradient(180deg,#a5dfff 0%,#428cff 22%,#1748cc 45%,#072b9c 70%,#03165d 100%);-webkit-text-stroke-color:#e8b74a;filter:drop-shadow(0 3px 0 #fce49c) drop-shadow(0 7px 2px #09246c) drop-shadow(0 13px 10px #00122f) drop-shadow(0 0 20px #367bff)}
@media(max-width:620px){.royal-opening-words{font-size:clamp(43.2px,12vw,80px)}}

/* Word Dome four-scene opening title: gold-framed, beveled typography.
   Retains the original four timed messages and noninteractive overlay. */
.royal-opening-words{
  font-family:Georgia,'Times New Roman',serif!important;
  font-size:clamp(21px,3.9vw,61.5px)!important;
  font-weight:900!important;
  letter-spacing:.012em!important;
  line-height:1.08!important;
  padding:0 5vw!important;
  white-space:nowrap;
  isolation:isolate;
  color:#ffdf69!important;
  background-image:linear-gradient(180deg,#fffde6 0%,#fff0aa 12%,#ffd04b 25%,#e68d0d 42%,#773107 53%,#fbd26c 66%,#bb650b 82%,#fff0a6 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  -webkit-text-stroke:1.5px #a34c00!important;
  filter:drop-shadow(0 2px 0 #fff1a5) drop-shadow(0 5px 1px #8a3b00) drop-shadow(0 10px 5px #061536) drop-shadow(0 0 18px #f9b72b)!important;
}
.royal-opening-step-1{
  color:#1251cc!important;
  background-image:linear-gradient(180deg,#e0faff 0%,#7ce5ff 15%,#0c9fea 29%,#135be0 44%,#031f83 56%,#1e75f7 69%,#061b79 83%,#6ccfff 100%)!important;
  -webkit-text-stroke:2px #ffc64a!important;
  filter:drop-shadow(0 2px 0 #fff2ad) drop-shadow(0 5px 0 #b66a0a) drop-shadow(0 9px 2px #081b59) drop-shadow(0 0 20px #257bff)!important;
}
/* Symmetric gold flourishes and central stars framing each title. */
.royal-opening-words::before,.royal-opening-words::after{
  content:'✦';
  position:absolute;
  left:50%;
  width:min(100%,760px);
  height:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateX(-50%);
  font-family:Georgia,serif;
  font-size:30px;
  line-height:18px;
  color:#ffe180;
  -webkit-text-fill-color:#ffe180;
  -webkit-text-stroke:1px #9a4a00;
  background:linear-gradient(90deg,transparent 0%,#ffc44b 12%,#ffe999 45%,transparent 46%,transparent 54%,#ffe999 55%,#ffc44b 88%,transparent 100%) center/100% 3px no-repeat;
  filter:drop-shadow(0 1px 2px #603000) drop-shadow(0 0 7px #ffca45);
  pointer-events:none;
}
.royal-opening-words::before{top:calc(50% - clamp(21px,3.9vw,61.5px)*.95)}
.royal-opening-words::after{top:calc(50% + clamp(21px,3.9vw,61.5px)*.78)}
@media(max-width:620px){
 .royal-opening-words{font-size:clamp(13px,4.5vw,30px)!important;padding:0 2vw!important;letter-spacing:0!important;-webkit-text-stroke-width:1px!important}
 .royal-opening-step-1{-webkit-text-stroke-width:1.3px!important}
 .royal-opening-words::before,.royal-opening-words::after{width:min(100%,760px);font-size:20px}
 .royal-opening-words::before{top:calc(50% - clamp(13px,4.5vw,30px)*1.05)}
 .royal-opening-words::after{top:calc(50% + clamp(13px,4.5vw,30px)*.8)}
}

/* Gold lettering for the welcome announcement above the playing board. */
body:has(#game:not([hidden])) #status.wd-event-banner{color:#ffdb60!important;text-shadow:0 1px 0 #fff2b3,0 2px 2px #9a4a08,0 3px 5px #00112a,0 0 13px #f9b72b!important}

/* Word Dome player tile palette: seat 0 royal navy/gold; seat 1 gold/navy.
   Applies to rack tiles, pending placements, concealed opponent placements,
   and committed tiles, without changing bonus/start squares when empty. */
#rack .tile.player-0,
#board .sq.pending-player-0,
#board .sq.opponent-player-0,
#board .sq.locked.tile-blue,
#board .sq.start-0.locked.tile-blue{
  background:linear-gradient(145deg,#164b9d 0%,#092a69 48%,#06173d 100%)!important;
  color:#ffd45a!important;
  border:1px solid #d9a936!important;
  box-shadow:inset 0 2px 3px #5a94e655,0 3px 6px #04133388!important;
}
#rack .tile.player-1,
#board .sq.pending-player-1,
#board .sq.opponent-player-1,
#board .sq.locked.tile-orange,
#board .sq.start-1.locked.tile-orange{
  background:linear-gradient(145deg,#fff1a1 0%,#f5c54e 46%,#d48c17 100%)!important;
  color:#09265f!important;
  border:1px solid #ffdf77!important;
  box-shadow:inset 0 2px 4px #fff8,0 3px 6px #6b400066!important;
}
/* The opponent's in-progress tiles must remain concealed. */
#board .sq.opponent-player-0,
#board .sq.opponent-player-1{color:transparent!important}
#opponentRack .opponent-tile{
  background:linear-gradient(145deg,#fff1a1 0%,#f5c54e 46%,#d48c17 100%)!important;
  border-color:#ffdf77!important;
  box-shadow:inset 0 2px 4px #fff8,0 3px 6px #6b400066!important;
}

/* Covered opening-star squares must display the tile owner's colors,
   including the border/outline, before and after Play Word. */
#board .sq.start.pending.pending-player-0,
#board .sq.start-0.pending.pending-player-0,
#board .sq.start-1.pending.pending-player-0,
#board .sq.start.locked.tile-blue{
 background:linear-gradient(145deg,#164b9d 0%,#092a69 48%,#06173d 100%)!important;
 color:#ffd45a!important;
 border:1px solid #d9a936!important;
 outline:2px solid #d9a936!important;
 box-shadow:inset 0 2px 3px #5a94e655,0 3px 6px #04133388!important;
}
#board .sq.start.pending.pending-player-1,
#board .sq.start-0.pending.pending-player-1,
#board .sq.start-1.pending.pending-player-1,
#board .sq.start.locked.tile-orange{
 background:linear-gradient(145deg,#fff1a1 0%,#f5c54e 46%,#d48c17 100%)!important;
 color:#09265f!important;
 border:1px solid #ffdf77!important;
 outline:2px solid #ffdf77!important;
 box-shadow:inset 0 2px 4px #fff8,0 3px 6px #6b400066!important;
}

/* Continuous gold frame around the entire Choose a Letter dialog. */
.blank-letter-panel::after{
 content:"";position:absolute;inset:1.4%;z-index:4;pointer-events:none;
 border:4px solid #f7bd37;border-radius:24px;
 box-shadow:inset 0 0 0 1px #fff0a0,0 0 0 1px #9c5607,0 0 10px #ffcf54;
}

/* Bonus-star squares use their normal artwork only while empty.
   When covered, their tile owner's navy/gold or gold/navy palette wins
   over legacy star-specific green/orange declarations. */
#board .sq.star.pending-player-0,
#board .sq.star.locked.tile-blue{
 background:linear-gradient(145deg,#164b9d 0%,#092a69 48%,#06173d 100%)!important;
 color:#ffd45a!important;
 border:1px solid #d9a936!important;
 box-shadow:inset 0 2px 3px #5a94e655,0 3px 6px #04133388!important;
}
#board .sq.star.pending-player-1,
#board .sq.star.locked.tile-orange{
 background:linear-gradient(145deg,#fff1a1 0%,#f5c54e 46%,#d48c17 100%)!important;
 color:#09265f!important;
 border:1px solid #ffdf77!important;
 box-shadow:inset 0 2px 4px #fff8,0 3px 6px #6b400066!important;
}

/* Uniform, thick, uninterrupted gold frame on all four sides of picker. */
.blank-letter-panel::after{
 inset:1.4%!important;
 box-sizing:border-box!important;
 border:9px solid #f4b932!important;
 border-radius:27px!important;
 background:transparent!important;
 box-shadow:inset 0 0 0 2px #ffe7a0,0 0 0 2px #a76a0e,0 0 13px #ffcc56!important;
}

/* Single continuous, equal-width solid gold perimeter for letter picker. */
.blank-letter-panel::after{
 inset:1.4%!important;
 border:12px solid #f5bd39!important;
 border-radius:27px!important;
 box-shadow:inset 0 0 0 1px #ffe8a0,0 0 0 1px #a56b0b,0 0 12px #f6bd46aa!important;
}
/* Visible gold close control, always above the decorative perimeter. */
.blank-letter-panel .blank-letter-close{
 z-index:8!important;
 right:3.4%!important;
 top:3.6%!important;
 width:7%!important;
 height:8.4%!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 background:#071d40!important;
 border:2px solid #f5bd39!important;
 border-radius:50%!important;
 color:#ffd45a!important;
 font-size:clamp(20px,3vw,32px)!important;
 font-weight:900!important;
 line-height:1!important;
 text-shadow:0 0 5px #ffc94a!important;
 box-shadow:0 0 8px #f5bd3980!important;
}
.blank-letter-panel .blank-letter-close::before{content:"×";display:block}
.blank-letter-panel .blank-letter-close:hover{background:#153b76!important;color:#fff0b0!important}

/* Approved Word Dome logo in all shared alert/confirmation message headers. */
.wd-message-heading{display:flex;align-items:center;justify-content:center;line-height:1}
.wd-message-logo{display:block;width:min(270px,100%);height:auto;max-height:100px;object-fit:contain;margin:0 auto;filter:drop-shadow(0 2px 5px #0009)}

/* All Word Dome instruction and confirmation popups: 50% larger message lettering. */
.wd-message-panel .wd-message-text{font-size:28.5px!important;line-height:1.3!important;overflow-wrap:break-word!important}

/* Rules dialog: official Word Dome mark in place of the old text heading. */
.rules-dialog .wd-rules-logo-heading{
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 margin:0 auto 12px!important;
 padding:0!important;
 min-height:44px!important;
 line-height:1!important;
}
.rules-dialog .wd-rules-logo-heading img{
 display:block!important;
 width:220px!important;
 max-width:calc(100% - 100px)!important;
 height:auto!important;
 max-height:60px!important;
 object-fit:contain!important;
}

/* Opening words are children of the board, not a viewport-fixed overlay.
   Scrolling moves the board and its animation together. */
body:has(#game:not([hidden])) #board{position:relative!important}
body:has(#game:not([hidden])) #board > .royal-opening-words{
 position:absolute!important;inset:0!important;
 width:100%!important;height:100%!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 overflow:hidden!important;z-index:25!important;
 padding:0 3%!important;
 font-size:clamp(22px,4.1vw,57px)!important;
 white-space:nowrap!important;
}
body:has(#game:not([hidden])) #board > .royal-opening-words[hidden]{display:none!important}
body:has(#game:not([hidden])) #board > .royal-opening-flash{
 animation:royalWordFlash var(--royal-word-duration,2793ms) ease-out both!important;
}
/* Royal-blue decorative title frame for every word. */
body:has(#game:not([hidden])) #board > .royal-opening-words::before,
body:has(#game:not([hidden])) #board > .royal-opening-words::after{
 color:#b8dfff!important;-webkit-text-fill-color:#b8dfff!important;
 -webkit-text-stroke:1px #062b8e!important;
 background:linear-gradient(90deg,transparent,#1452bf 12%,#78c8ff 45%,transparent 46%,transparent 54%,#78c8ff 55%,#1452bf 88%,transparent) center/100% 3px no-repeat!important;
 filter:drop-shadow(0 1px 2px #00194e) drop-shadow(0 0 8px #226eff)!important;
}
@media(max-width:620px){
 body:has(#game:not([hidden])) #board > .royal-opening-words{
  font-size:clamp(16px,5vw,32px)!important;
 }
}

/* Brighter gold for all opening words except WORD DOME, whose blue treatment stays unchanged. */
body:has(#game:not([hidden])) #board > .royal-opening-words:not(.royal-opening-step-1){
 color:#ffeb83!important;
 background-image:linear-gradient(180deg,#fffef0 0%,#fff3a4 22%,#ffdc56 48%,#ffc73c 72%,#fff0a2 100%)!important;
 -webkit-background-clip:text!important;background-clip:text!important;
 -webkit-text-fill-color:transparent!important;
 -webkit-text-stroke:1.5px #a86b16!important;
 filter:drop-shadow(0 2px 0 #fff1b2) drop-shadow(0 5px 2px #754006) drop-shadow(0 9px 8px #00122f) drop-shadow(0 0 12px #ffd85d)!important;
}

/* Winner screen: show only the Word Dome brand above the results, not goal/mode/rules. */
body:has(#game:not([hidden])):has(#replayModal:not([hidden])) #gameTopInfo{visibility:hidden!important;pointer-events:none!important}
/* Preserve the approved victory trophy and finalist geometry. */
body:has(#game:not([hidden])) #replayModal .winner-message{font-size:clamp(24px,4vw,38.4px)!important}
body:has(#game:not([hidden])) #replayModal .victory-winner-label{font-size:clamp(16px,2.4vw,26.4px)!important}
@media(max-width:480px){body:has(#game:not([hidden])) #replayModal .victory-winner-label{font-size:clamp(13px,3.6vw,18.4px)!important}}

/* Another 20% reduction of the winning player's name (26.4px -> 21.12px). */
body:has(#game:not([hidden])) #replayModal .victory-winner-label{font-size:clamp(13px,1.92vw,21.12px)!important}
@media(max-width:480px){body:has(#game:not([hidden])) #replayModal .victory-winner-label{font-size:clamp(11px,2.88vw,14.72px)!important}}

/* Keep the uploaded WD victory trophy clear of the modal's upper gold border. */
body:has(#game:not([hidden])) #replayModal .victory-contender .victory-trophy-inline{top:2px!important}
@media(max-width:480px){body:has(#game:not([hidden])) #replayModal .victory-contender .victory-trophy-inline{top:4px!important}}
/* Event announcements above the board, using the established status area. */
body:has(#game:not([hidden])) #status.wd-event-stars{color:#ffe36c!important;text-shadow:0 1px 3px #513000,0 0 12px #ffb800!important}
body:has(#game:not([hidden])) #status.wd-event-timeout,
body:has(#game:not([hidden])) #status.wd-event-resign{color:#ffab9e!important;text-shadow:0 1px 3px #4d1010,0 0 11px #ff574b!important}
body:has(#game:not([hidden])) #status.wd-event-pass{color:#b7e7ff!important;text-shadow:0 1px 3px #00142b,0 0 11px #2e99ff!important}
body:has(#game:not([hidden])) #status.wd-event-win{color:#ffe47b!important;text-shadow:0 1px 3px #3b2300,0 0 14px #ffc43c!important}

/* Winner dialog: 20% wider, with a dedicated clear zone for the trophy. */
body:has(#game:not([hidden])) #replayModal .replay-dialog{
 width:min(624px,94vw)!important;max-width:624px!important;
 padding:36px!important;box-sizing:border-box!important;
}
body:has(#game:not([hidden])) #replayModal .victory-contender{
 padding-top:190px!important;
}
body:has(#game:not([hidden])) #replayModal .victory-contender .victory-trophy-inline{
 top:8px!important;height:165px!important;left:0!important;right:0!important;
 width:100%!important;display:flex!important;justify-content:center!important;
 align-items:center!important;overflow:visible!important;
}
body:has(#game:not([hidden])) #replayModal .victory-contender .wd-victory-trophy-image{
 width:220px!important;height:162px!important;max-width:100%!important;
 object-fit:contain!important;object-position:center!important;
 /* Soften the rectangular background baked into the uploaded artwork. */
 -webkit-mask-image:radial-gradient(ellipse 66% 67% at 50% 50%,#000 46%,rgba(0,0,0,.95) 62%,transparent 100%)!important;
 mask-image:radial-gradient(ellipse 66% 67% at 50% 50%,#000 46%,rgba(0,0,0,.95) 62%,transparent 100%)!important;
}
@media(max-width:480px){
 body:has(#game:not([hidden])) #replayModal .replay-dialog{width:94vw!important;padding:16px!important}
 body:has(#game:not([hidden])) #replayModal .victory-contender{padding-top:120px!important}
 body:has(#game:not([hidden])) #replayModal .victory-contender .victory-trophy-inline{top:4px!important;height:108px!important}
 body:has(#game:not([hidden])) #replayModal .victory-contender .wd-victory-trophy-image{width:145px!important;height:108px!important}
}

/* Consistent royal-gold announcements for every in-game event and both players. */
body:has(#game:not([hidden])) #status.wd-event-banner,
body:has(#game:not([hidden])) #status[class*="wd-event-"]{
 color:#ffe16a!important;
 text-shadow:0 1px 0 #fff0aa,0 2px 3px #774100,0 0 13px #f6b728!important;
}