:root{
  --cyan:#6edcff;
  --gold:#ffc85a;
  --red:#ff4038;
  --green:#4ee6a7;
  --deep:#020912;
  --panel:linear-gradient(150deg, rgba(5,18,34,.96), rgba(5,24,40,.88));
  --cell:34px;
  --gap:3px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#020912;color:#f7fbff;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
body{overflow-x:hidden;background:radial-gradient(circle at 50% -20%,#1e4f6f 0,#081a2a 42%,#020912 100%)}
a{color:inherit}
button{font:inherit}
main{position:relative;z-index:2}
.screen{display:none;min-height:100vh}
.screen.active{display:flex}

.panel{
  border:1px solid rgba(120,211,255,.22);
  background:var(--panel);
  box-shadow:0 25px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(6px);
}
.panel.slim{border-radius:18px}
.eyebrow{font-size:12px;font-weight:900;letter-spacing:.22em;color:var(--cyan)}
.primary,.ghost,.level{
  border-radius:14px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.primary:hover,.ghost:hover,.level:hover{transform:translateY(-2px)}
.primary{
  border:0;
  background:linear-gradient(#ffe08c,#efaa31);
  color:#14202b;
  font-weight:1000;
  padding:16px 22px;
  box-shadow:0 12px 32px rgba(255,189,51,.3);
}
.primary:disabled{opacity:.45;cursor:not-allowed;transform:none}
.ghost{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(6,20,33,.78);
  color:#eff8ff;
  padding:11px 14px;
  font-weight:900;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.ghost.mini{padding:9px 12px;font-size:11px}
.wide{width:100%}
.hidden{display:none!important}

.storm{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1;background:linear-gradient(rgba(7,24,42,.2),rgba(0,5,12,.68))}
.rain{position:absolute;inset:-35%;background:repeating-linear-gradient(110deg,transparent 0 18px,rgba(187,229,255,.14) 19px 20px,transparent 21px 43px);animation:rain 1s linear infinite;transform:skewX(-8deg)}
.rain.b{opacity:.5;animation-duration:.72s;filter:blur(1px)}
.lightning{position:absolute;inset:0;background:#d9f5ff;opacity:0;animation:flashsky 9s infinite}
.wave{position:absolute;left:-10%;right:-10%;height:220px;border-radius:45% 55% 0 0 / 50% 50% 0 0;background:linear-gradient(to top,rgba(24,116,170,.2),rgba(0,0,0,0));bottom:-70px;filter:blur(4px)}
.wave-1{animation:wave 8s ease-in-out infinite}
.wave-2{bottom:-95px;opacity:.5;animation:wave 12s ease-in-out infinite reverse}
.flames{position:absolute;left:0;right:0;bottom:-20px;height:150px;opacity:.42;background:
  radial-gradient(circle at 10% 100%, rgba(255,130,30,.85) 0 8%, transparent 9%),
  radial-gradient(circle at 20% 100%, rgba(255,80,20,.8) 0 10%, transparent 11%),
  radial-gradient(circle at 32% 100%, rgba(255,180,60,.8) 0 9%, transparent 10%),
  radial-gradient(circle at 45% 100%, rgba(255,90,20,.85) 0 11%, transparent 12%),
  radial-gradient(circle at 58% 100%, rgba(255,140,40,.85) 0 9%, transparent 10%),
  radial-gradient(circle at 72% 100%, rgba(255,80,20,.8) 0 10%, transparent 11%),
  radial-gradient(circle at 85% 100%, rgba(255,165,60,.8) 0 9%, transparent 10%);
  filter:blur(8px);
  animation:flicker 2.4s ease-in-out infinite;
}
@keyframes rain{to{transform:translate(-90px,190px) skewX(-8deg)}}
@keyframes flashsky{0%,7%,9%,100%{opacity:0}7.3%,8%{opacity:.16}}
@keyframes wave{50%{transform:translateX(4%) scaleY(1.08)}}
@keyframes flicker{50%{transform:scaleY(1.08) translateY(-4px);opacity:.55}}
@keyframes float{50%{transform:translateY(-10px) rotate(.5deg)}}

#menuScreen{align-items:center;justify-content:center;padding:24px}
.hero{
  width:min(1280px,100%);
  min-height:720px;
  border-radius:34px;
  padding:52px;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  align-items:center;
  overflow:hidden;
  position:relative;
}
.hero:before{
  content:"";
  pointer-events:none;
  position:absolute;
  inset:auto 0 -60px 0;
  height:220px;
  background:radial-gradient(circle at center, rgba(30,126,170,.22), transparent 62%);
}
.copy h1{font-size:clamp(62px,8vw,112px);line-height:.82;letter-spacing:-.055em;margin:18px 0 24px;text-shadow:0 5px 0 #08263a,0 12px 35px rgba(0,0,0,.6)}
.copy h1 span{display:block;color:var(--gold);text-shadow:0 5px 0 #684000,0 0 25px rgba(255,183,44,.25)}
.copy p{font-size:19px;line-height:1.5;color:#cfe6f4;max-width:650px}
.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);border-radius:18px;max-width:650px}
.level{border:1px solid rgba(110,220,255,.22);background:#0b2337;color:#fff;padding:14px}
.level b,.level small{display:block}
.level small{color:#89aebe;margin-top:4px}
.level.selected{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(110,220,255,.1),0 10px 25px rgba(0,0,0,.35);transform:translateY(-2px)}
.wordModeBox{margin-top:14px;padding:13px 15px;border:1px solid rgba(110,220,255,.13);background:rgba(3,16,28,.55);border-radius:18px;max-width:650px}
.wordModeHeader small{display:block;color:#79a9be;font-size:9px;font-weight:900;letter-spacing:.16em;margin-bottom:4px}
.wordModeHeader strong{font-size:13px;color:#dff3fc}
.wordModeButtons{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.modeBtn{border:1px solid rgba(255,255,255,.14);background:#0a1d2d;color:#b9d8e7;border-radius:12px;padding:9px 12px;font-size:11px;font-weight:1000;cursor:pointer}
.modeBtn.selected{border-color:var(--gold);background:linear-gradient(#5a3c10,#2b1d0a);color:#ffe2a0;box-shadow:0 0 18px rgba(255,193,62,.12)}
.randomWordsPreview{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.randomWordsPreview span{padding:6px 8px;border-radius:999px;border:1px solid rgba(255,202,104,.22);background:rgba(72,48,12,.35);color:#ffd978;font-size:10px;font-weight:1000}
.bonusBox{margin-top:14px;padding:14px 15px;border:1px solid rgba(255,255,255,.1);background:rgba(7,21,34,.65);border-radius:18px;max-width:650px}
.checkline{display:flex;align-items:center;gap:10px;font-weight:800;color:#eaf7ff}
.checkline input{accent-color:#ffbb3d;inline-size:18px;block-size:18px}
.bonusWords{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:12px}
.bonusWords small{display:block;color:#7faac0;margin-bottom:7px}
.bonusPills{display:flex;gap:8px;flex-wrap:wrap}
.bonusPill{padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:#0a1d2d;color:#ffcf6a;font-size:12px;font-weight:1000}
.menuButtons{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}
.rules{font-size:12px;color:#8eb1c3;margin-top:12px}
.creditsMenu{margin-top:10px;color:#bcd5e3;font-size:13px}
.creditsMenu a{color:var(--gold);font-weight:900;text-decoration:none}
.mascotWrap{height:610px;position:relative;display:flex;align-items:flex-end;justify-content:center}
.mascotWrap:before{content:"";position:absolute;width:82%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(42,198,255,.22),transparent 65%)}
.mascot{max-height:620px;max-width:100%;position:relative;filter:drop-shadow(0 25px 35px rgba(0,0,0,.6));animation:float 4.5s ease-in-out infinite}
.bubble{position:absolute;right:0;top:8%;z-index:3;padding:11px 15px;border:1px solid rgba(255,255,255,.15);background:rgba(7,21,34,.85);border-radius:15px;font-weight:800}

#setupScreen{padding:18px}
.setupLayout{width:min(1440px,100%);margin:0 auto;display:grid;grid-template-columns:380px minmax(0,1fr);gap:16px;align-items:start}
.setupCard{border-radius:26px;padding:18px}
.setupSide h2{font-size:34px;line-height:.95;margin:10px 0 12px}
.setupSide p{color:#c9dfec;line-height:1.45}
.setupControls{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.setupWordsHeader{display:flex;justify-content:space-between;align-items:center;margin:18px 0 10px;font-weight:900;color:#dff2fc}
.setupWords{display:grid;gap:8px}
.wordItem{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(255,255,255,.12);background:rgba(6,20,33,.62);border-radius:16px;padding:12px}
.wordItem.selected{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(110,220,255,.08)}
.wordItem.placed{border-color:rgba(255,200,90,.35);background:rgba(56,40,10,.28)}
.wordMain{display:flex;flex-direction:column}
.wordMain strong{font-size:18px;letter-spacing:.03em}
.wordMeta{font-size:11px;color:#8db0c3}
.wordActions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tag{font-size:10px;font-weight:900;padding:5px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.15);background:#071522;color:#bfe0f3}
.tag.gold{background:#4a3310;color:#ffdc89;border-color:#7e5c19}
.wordBtn{border:1px solid rgba(255,255,255,.14);background:#0a1d2d;color:#fff;font-size:10px;font-weight:900;border-radius:999px;padding:7px 10px;cursor:pointer}
.setupTips{margin:16px 0;padding:13px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);display:grid;gap:7px;font-size:12px;color:#bdd7e6}
.helper{margin-top:11px;font-size:12px;color:#8fb4c6}
.setupBoardCard{min-height:calc(100vh - 36px)}
#setupOrientation{white-space:nowrap}
.boardTitle{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:12px}
.boardTitle small{font-size:10px;color:#7ea6bb;letter-spacing:.18em}
.boardTitle h3{font-size:16px;margin:2px 0}
.boardTitle span{font-size:11px;font-weight:900;border:1px solid rgba(255,255,255,.14);background:#07131f;padding:6px 9px;border-radius:999px}

.mobilePlacementBar{display:none}
.mobilePlacementBar.visible{display:none}

#gameScreen{display:none;flex-direction:column;padding:18px 22px 80px}
.screen#gameScreen.active{display:flex}
.topbar,.status,.battle{width:min(1500px,100%);margin-left:auto;margin-right:auto}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:12px;padding:14px 16px}
.topbar h2{margin:5px 0 0;font-size:clamp(20px,3vw,32px)}
.actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.status{display:flex;gap:18px;align-items:center;padding:12px 15px;margin-bottom:13px}
.turn{display:flex;align-items:center;gap:8px;white-space:nowrap}.turn i{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}
#messageText{color:#b6d2df}
.battle{display:grid;grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr);gap:14px;align-items:start}
.boardCard{border-radius:22px;padding:13px;position:relative;overflow:hidden}
.boardCard:before{content:"";position:absolute;inset:auto -20% -55px -20%;height:140px;background:radial-gradient(circle at center, rgba(0,176,255,.17), transparent 70%)}
.boardScroll{overflow:visible;padding:2px}
.boardScroll.single{min-height:calc(100vh - 220px);display:flex;align-items:center;justify-content:center}
.board{
  --n:12;
  display:grid;
  grid-template-columns:repeat(var(--n),var(--cell));
  grid-template-rows:repeat(var(--n),var(--cell));
  gap:var(--gap);
  width:max-content;
  margin:auto;
}
.cell{
  width:var(--cell);
  height:var(--cell);
  border:1px solid rgba(110,220,255,.22);
  border-radius:8px;
  background:linear-gradient(#165574aa,#092d44c7);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:1000;
  font-size:calc(var(--cell)*.44);
  position:relative;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.cell:after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(transparent,rgba(255,255,255,.06))}
.enemy .cell:not(.fired){cursor:crosshair}
.enemy .cell:not(.fired):hover{border-color:#fff;background:#1e799c}
.cell.miss{background:#0d2534}
.cell.miss::before,.cell.miss::after{content:"";position:absolute;width:70%;height:3px;background:#7addff;box-shadow:0 0 12px rgba(122,221,255,.8);border-radius:999px}
.cell.miss::before{transform:rotate(45deg)}
.cell.miss::after{transform:rotate(-45deg)}
.cell.hit{background:radial-gradient(circle,#fff 0 5%,#ffe261 6% 18%,#ff6d31 19% 38%,#8a1810 39% 68%,#260908 69%);border-color:#ffbc65;text-shadow:0 2px 4px #510000;box-shadow:0 0 20px rgba(255,70,47,.55);animation:hit .35s ease-out}
.cell.sunk{box-shadow:0 0 0 2px rgba(255,209,91,.6),0 0 20px rgba(255,142,42,.5)}
.player .cell.ghost-word{color:rgba(255,230,164,.28);text-shadow:0 0 8px rgba(255,210,120,.15);background:linear-gradient(rgba(115,87,31,.34),rgba(31,25,15,.34)),linear-gradient(#165574aa,#092d44c7);border-color:rgba(255,202,104,.22)}
.player .cell.ghost-word::after{background:linear-gradient(transparent,rgba(255,215,120,.05))}
.player .cell.ghost-word.hit{color:#fff;text-shadow:0 2px 4px #510000;background:radial-gradient(circle,#fff 0 5%,#ffe261 6% 18%,#ff6d31 19% 38%,#8a1810 39% 68%,#260908 69%)}
.setupBoard .cell{cursor:pointer}
.setupBoard .cell.occupied{background:linear-gradient(#4b300f,#1f1409);border-color:#ffca68;color:#ffe6a4}
.setupBoard .cell.preview-valid{outline:2px solid rgba(78,230,167,.85);outline-offset:-2px;background:#0d4a3f}
.setupBoard .cell.preview-invalid{outline:2px solid rgba(255,64,56,.85);outline-offset:-2px;background:#5b1616}
.setupBoard .cell.anchor{box-shadow:0 0 0 2px rgba(255,215,114,.35)}
@keyframes hit{0%{transform:scale(.5) rotate(-8deg)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
.chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px;position:relative;z-index:2}
.chip{font-size:9px;font-weight:900;padding:4px 7px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:#0a1d2d;color:#86aec0}
.chip.sunk{background:#ffcb55;border-color:#ffcb55;color:#261800}
.middle{position:sticky;top:16px;display:flex;flex-direction:column;align-items:center;gap:8px;border-radius:22px;padding:16px}
.middle img{height:180px;max-width:140px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.5))}
.vs{font-size:42px;color:var(--red);font-weight:1000;font-style:italic;text-shadow:0 0 18px rgba(255,61,53,.45)}
#battleLog{text-align:center;font-size:12px;line-height:1.45;color:#a9c8d6;border:1px solid rgba(255,255,255,.1);background:rgba(7,21,34,.68);border-radius:12px;padding:10px}

#resultScreen{align-items:center;justify-content:center;padding:24px}
.result{width:min(920px,100%);display:grid;grid-template-columns:320px 1fr;align-items:center;border-radius:28px;padding:28px}
.result img{width:100%;max-height:430px;object-fit:contain}
.result h2{font-size:clamp(44px,8vw,84px);line-height:.9;color:var(--gold);margin:10px 0}
.result p{font-size:17px;color:#c7e0ed;line-height:1.5}
.resultBtns{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.resultBtns .primary{margin:0}

.overlayFlash{position:fixed;inset:0;z-index:90;opacity:0;pointer-events:none}
.overlayFlash.red{background:rgba(255,0,0,.42)}
.overlayFlash.white{background:rgba(255,255,255,.34)}
.overlayFlash.show{animation:screenFlash .38s ease-out}
@keyframes screenFlash{0%{opacity:1}100%{opacity:0}}
#fxLayer{position:fixed;inset:0;pointer-events:none;z-index:100}
.explosion{position:fixed;width:92px;height:92px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff 0 6%,#ffe562 7% 18%,#ff6a2d 19% 39%,#a51810 40% 56%,transparent 57%),conic-gradient(transparent 0 8%,#ffe66a 9% 13%,transparent 14% 27%,#ff5f2e 28% 34%,transparent 35% 51%,#ffd85f 52% 57%,transparent 58% 72%,#ff5229 73% 79%,transparent 80%);filter:drop-shadow(0 0 12px #ff572d);animation:boom .72s ease-out forwards}
.explosion:after{content:"";position:absolute;inset:-32px;border-radius:50%;border:4px solid rgba(128,229,255,.73);box-shadow:0 0 0 8px rgba(30,158,200,.14);animation:splash .65s ease-out forwards}
.splashMark{position:fixed;width:110px;height:110px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle, rgba(195,240,255,.9) 0 12%, rgba(120,220,255,.3) 13% 25%, transparent 26%), conic-gradient(from 0deg, transparent 0 8%, rgba(159,232,255,.7) 9% 12%, transparent 13% 24%, rgba(159,232,255,.6) 25% 29%, transparent 30% 41%, rgba(159,232,255,.7) 42% 45%, transparent 46% 57%, rgba(159,232,255,.6) 58% 61%, transparent 62% 100%);animation:splashFade .68s ease-out forwards;filter:drop-shadow(0 0 10px rgba(122,221,255,.6))}
@keyframes boom{0%{transform:translate(-50%,-50%) scale(.1);opacity:0}18%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.8) rotate(35deg);opacity:0}}
@keyframes splash{from{transform:scale(.2);opacity:1}to{transform:scale(1.25);opacity:0}}
@keyframes splashFade{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}20%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.3);opacity:0}}

@media (max-width:1180px){
  .hero{grid-template-columns:1fr .8fr;padding:35px}
  .battle{grid-template-columns:1fr 1fr}
  .middle{grid-column:1/-1;grid-row:2;position:static;flex-direction:row;justify-content:center}
  .middle img{display:none}.vs{font-size:28px}
  .setupLayout{grid-template-columns:1fr}
  .setupBoardCard{min-height:auto}
}
@media (max-width:760px){
  #menuScreen{padding:12px}
  .hero{min-height:auto;display:flex;flex-direction:column-reverse;padding:18px 14px 25px;border-radius:22px}
  .mascotWrap{height:290px;width:100%}.mascot{max-height:330px}.bubble{font-size:11px;top:auto;bottom:6px;right:8px;max-width:78%;text-align:center}
  .copy h1{font-size:55px}.copy p{font-size:15px}.levels{grid-template-columns:1fr}
  .bonusWords{flex-direction:column;align-items:flex-start}
  #setupScreen{padding:10px 10px 118px}.setupCard{padding:14px}.setupSide h2{font-size:28px}
  .setupBoard .cell{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .mobilePlacementBar.visible{position:fixed;display:flex;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));z-index:8000;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;border:1px solid rgba(110,220,255,.42);border-radius:18px;background:rgba(3,15,27,.96);box-shadow:0 16px 55px rgba(0,0,0,.75),0 0 28px rgba(47,185,232,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .mobilePlacementInfo{min-width:0;display:flex;flex-direction:column;gap:2px}
  .mobilePlacementInfo small{font-size:8px;letter-spacing:.13em;color:#6fa3ba;font-weight:900}
  .mobilePlacementInfo strong{font-size:12px;color:#f3fbff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
  .mobilePlacementActions{display:flex;gap:7px;flex-shrink:0}
  .mobilePlacementActions .ghost,.mobilePlacementActions .primary{padding:11px 12px;font-size:10px;border-radius:11px}
  .screen#gameScreen.active{padding:10px 8px 70px}
  .topbar{align-items:flex-start;flex-direction:column}.actions{gap:4px}
  .status{flex-direction:column;align-items:flex-start;gap:4px}
  .battle{grid-template-columns:1fr}.middle{grid-column:auto;grid-row:auto;order:2}.enemy{order:1}.player{order:3}.boardCard{padding:9px}
  .result{grid-template-columns:1fr;text-align:center;padding:18px}.result img{max-height:270px}.resultBtns{justify-content:center}
}
@media (max-width:430px){
  .copy h1{font-size:48px}.boardTitle h3{font-size:13px}.topbar h2{font-size:17px}
  .wordItem{padding:10px}.wordMain strong{font-size:16px}
  .mobilePlacementBar.visible{left:6px;right:6px;padding:8px}
  .mobilePlacementInfo strong{max-width:34vw;font-size:11px}
  .mobilePlacementActions .ghost,.mobilePlacementActions .primary{padding:10px 9px;font-size:9px}
}

.copy{position:relative;z-index:4}


/* Modal parola affondata: overlay reale, sempre al centro della viewport */
.wordPopup{
  position:fixed !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;
  width:100vw !important;
  height:100dvh !important;
  min-height:100vh;
  z-index:99999 !important;
  display:none;
  align-items:center !important;
  justify-content:center !important;
  padding:20px;
  margin:0 !important;
  overflow:auto;
  background:rgba(0,5,12,.86);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  isolation:isolate;
}
.wordPopup.show{
  display:flex !important;
  animation:popupFade .18s ease-out;
}
.wordPopupCard{
  position:relative;
  z-index:100000;
  width:min(620px,calc(100vw - 40px));
  max-height:calc(100dvh - 40px);
  overflow:auto;
  margin:auto !important;
  border-radius:28px;
  padding:30px;
  text-align:center;
  background:linear-gradient(150deg,rgba(5,18,34,.99),rgba(9,33,51,.98));
  border:1px solid rgba(255,200,90,.42);
  box-shadow:0 35px 120px rgba(0,0,0,.9),0 0 65px rgba(255,95,42,.28),inset 0 1px 0 rgba(255,255,255,.08);
  animation:popupIn .28s cubic-bezier(.2,.8,.2,1);
}
.wordPopupCard:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 45px rgba(110,220,255,.07);
}
.wordPopupCard h2{
  position:relative;
  font-size:clamp(32px,6vw,58px);
  line-height:.95;
  color:var(--gold);
  margin:12px 0 14px;
  text-shadow:0 3px 0 rgba(77,45,0,.8),0 0 28px rgba(255,190,69,.24);
}
.wordPopupCard p{
  position:relative;
  font-size:18px;
  line-height:1.5;
  color:#e4f4fc;
  margin:0 auto 22px;
  max-width:520px;
}
.wordPopupCard .primary{position:relative;min-width:190px}
@keyframes popupFade{from{opacity:0}to{opacity:1}}
@keyframes popupIn{from{transform:scale(.84) translateY(18px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
@media(max-width:600px){
  .wordPopup{padding:14px}
  .wordPopupCard{width:min(94vw,620px);max-height:calc(100dvh - 28px);padding:24px 18px;border-radius:22px}
  .wordPopupCard p{font-size:16px}
}

html.modal-open,body.modal-open{overflow:hidden!important;}