:root{
  color-scheme:dark;
  font-family:Arial,Helvetica,sans-serif;
  font-weight:600;
  --bg:#301d3c;
  --panel:#422b50;
  --board:#5a416b;
  --panel-highlight:#654a77;
  --cyan:#03dcff;
  --yellow:#ffed00;
  --muted:#c4b3cf;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;min-height:100%;width:100%;background:var(--bg);color:white;overflow:hidden}
button{font:inherit;cursor:pointer}
button:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
button:disabled{opacity:.57;cursor:default}
[hidden]{display:none!important}
.app{display:flex;width:100vw;height:100dvh;overflow:hidden;background:radial-gradient(circle at 65% 45%,#4a3158,var(--bg) 70%)}
.opponent-panel{
  flex:0 0 clamp(248px,26vw,460px);
  min-width:0;height:100%;
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(16px,3vh,32px);
  padding:clamp(22px,3.4vh,50px) clamp(18px,2.5vw,36px);
  background:linear-gradient(160deg,#402750 0%,#362342 82%);
  border-right:2px solid #654477;
}
.player-header{width:100%;max-width:440px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.player-name{font-size:clamp(20px,2.2vw,29px);font-style:italic;font-weight:900;text-transform:uppercase;letter-spacing:.035em}
.score{font-size:clamp(24px,2.8vw,37px);font-weight:900;font-style:italic;color:var(--yellow);font-variant-numeric:tabular-nums;white-space:nowrap}
.opponent-grid-wrap{width:100%;max-width:410px;aspect-ratio:1}
/* The opponent board uses the original Block Champ v1.62 bitmaps.
   Native CellView: x = 25 + engine.row*50; y = 25 + engine.column*50.
   The board bitmap is 722px; tiles are 70x78px, bolt overlay 42x60px.
   Coordinates are projected into 10% cell slots on the 722px square. */
.opponent-grid{
  position:relative;
  width:100%;height:100%;
  isolation:isolate;
  overflow:visible;
  background: url('/resources/images/game/game/img_bg_board.png') center / 100% 100% no-repeat;
}
.opponent-cell{
  position:absolute;
  box-sizing:border-box;
  width:10%;height:10%;
  left:var(--tile-x);top:var(--tile-y);
  background-repeat:no-repeat;
  background-size:97% 108%;
  background-position:center;
  pointer-events:none;
}
.opponent-cell.removing{visibility:hidden}
.opponent-cell.frozen::after,
.opponent-cell.lightning::after,
.opponent-cell.lightning::before{
  content:"";position:absolute;pointer-events:none;
  left:50%;top:50%;transform:translate(-50%,-50%);
  background-repeat:no-repeat;background-position:center;
  background-size:100% 100%;
}
.opponent-cell.frozen::after{
  width:97%;height:108%;
  background-image:url('/resources/images/tiles/tiles/img_tile_frozen.png');
}
.opponent-cell.lightning::after{
  width:58%;height:83%;
  background-image:url('/resources/images/tiles/tiles/img_tile_lightning.png');
}
.opponent-cell.lightning::before{
  width:155%;height:213%;z-index:0;
  background-image:url('/resources/images/effects/effects/img_effect_lightning_glow.png');
  mix-blend-mode:screen;
  animation: opponent-lightning-glow 2.15s ease-in-out infinite;
}
@keyframes opponent-lightning-glow{
  0%,100%{opacity:.16;transform:translate(-50%,-50%) scale(.84)}
  30%{opacity:.55;transform:translate(-50%,-50%) scale(1.08)}
  65%{opacity:.25;transform:translate(-50%,-50%) scale(.94)}
}
.opponent-effect-layer{
  position:absolute;inset:0;pointer-events:none;z-index:5;
  overflow:visible;isolation:isolate;
}
.opponent-fx-tile{
  position:absolute;left:var(--tile-x);top:var(--tile-y);
  width:10%;height:10%;
  background-position:center;background-repeat:no-repeat;background-size:97% 108%;
  transform-origin:center;will-change:opacity,transform;
  animation: opponent-tile-remove var(--effect-duration,260ms) linear both;
}
.opponent-fx-tile.frozen::after,
.opponent-fx-tile.lightning::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background-repeat:no-repeat;background-size:100% 100%;
}
.opponent-fx-tile.frozen::after{
  width:97%;height:108%;background-image:url('/resources/images/tiles/tiles/img_tile_frozen.png');
}
.opponent-fx-tile.lightning::after{
  width:58%;height:83%;background-image:url('/resources/images/tiles/tiles/img_tile_lightning.png');
}
@keyframes opponent-tile-remove{
  0%{transform:scale(1)}
  100%{transform:scale(.1)}
}
.opponent-fx-tile.lightning::before{
  content:"";position:absolute;pointer-events:none;
  left:50%;top:50%;width:155%;height:213%;transform:translate(-50%,-50%);
  background:url('/resources/images/effects/effects/img_effect_lightning_glow.png') center / 100% 100% no-repeat;
  mix-blend-mode:screen;opacity:.4;
}
.opponent-fx-spark{
  position:absolute;left:calc(var(--tile-x) + 5%);top:calc(var(--tile-y) + 5%);
  width:3.05%;height:4.43%;
  background:url('/resources/images/effects/effects/img_effect_neon_particle.png') center / 100% 100% no-repeat;
  transform:translate(-50%,-50%);pointer-events:none;
  animation:opponent-neon-spark 430ms ease-out both;
}
@keyframes opponent-neon-spark{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.45)}
  100%{opacity:0;transform:translate(calc(-50% + var(--fx-dx)),calc(-50% + var(--fx-dy))) scale(.95)}
}
.opponent-fx-ice{
  position:absolute;
  left:calc(var(--tile-x) + 5%);top:calc(var(--tile-y) + 5%);
  transform:translate(-50%,-50%);
  width:11.2%;height:11.2%;
  background-size:100% 100%;background-position:center;background-repeat:no-repeat;
}
.opponent-fx-burst{
  position:absolute;left:var(--tile-x);top:var(--tile-y);width:10%;height:10%;
  background:url('/resources/images/effects/effects/img_effect_lightning_glow.png') center / 160% 220% no-repeat;
  mix-blend-mode:screen;
  animation:opponent-burst 370ms ease-out both;
}
@keyframes opponent-burst{
  0%{opacity:0;transform:scale(.35)}
  23%{opacity:.85}
  100%{opacity:0;transform:scale(1.8)}
}
.opponent-status{min-height:26px;color:var(--muted);font-size:16px;letter-spacing:.03em;text-align:center}
.opponent-status.finished{color:var(--yellow)}
.opponent-status.offline{color:#ffabc4}
.game-area{
  min-width:0;flex:1;position:relative;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.game-container{
  position:relative;flex:none;width:640px;height:480px;
  transform:scale(var(--game-scale,1));
  transform-origin:center center;
  overflow:hidden;
}
.game-container canvas{width:640px!important;height:480px!important;display:block;touch-action:none}
.finished-banner{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;display:flex;gap:10px;align-items:center;justify-content:center;padding:10px 16px;white-space:nowrap;border-radius:9px;background:#281a35ed;border:1px solid #8a65a0;font-size:13px;box-shadow:0 8px 20px #1d1228aa}.finished-banner strong{color:var(--yellow);text-transform:uppercase;font-style:italic}.finished-banner span{color:#ddcfea}
.backdrop{
  position:fixed;inset:0;z-index:20;background:#21162ccf;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.dialog{
  width:min(100%,410px);display:flex;flex-direction:column;align-items:stretch;
  gap:20px;padding:clamp(22px,4vw,40px);
  background:linear-gradient(140deg,#563368,#3a2449);
  box-shadow:0 24px 80px #170f1a91,0 0 0 1px #8f62a3;
  border-radius:14px;
}
.logo{width:min(90%,275px);height:auto;align-self:center;object-fit:contain}
.room-setup{width:100%}.room-code-panel{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 8px;background:#34213f;border:1px solid #775487;border-radius:10px}.room-code-panel span{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:#ddcee4}.room-code-panel strong{font-size:clamp(44px,7vw,66px);line-height:1.15;font-weight:900;font-style:italic;letter-spacing:.16em;color:var(--yellow);font-variant-numeric:tabular-nums}.join-code-form{display:flex;flex-direction:column;align-items:stretch;gap:12px}.join-code-form label{text-align:center;font-size:13px;color:#e4cfe9}.join-code-form input{width:100%;border:2px solid #805e92;border-radius:10px;background:#2d1b38;color:var(--yellow);font-size:36px;font-weight:900;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums;padding:8px 0 8px .3em}.join-code-form input:focus{outline:2px solid var(--cyan);outline-offset:2px}.join-code-form .main-button{margin-top:0}.room-setup[hidden],.room-code-panel[hidden]{display:none}
.seat-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.seat-button,.main-button{
  border:0;border-radius:999px;background:var(--yellow);color:#3b2047;
  min-height:54px;font-size:20px;font-weight:900;font-style:italic;
  box-shadow:0 5px 0 #24142c;transition:filter .15s,transform .15s;
}
.seat-button:hover,.main-button:hover{filter:brightness(1.06);transform:translateY(-2px)}
.seat-button.selected{background:var(--cyan)}
.dialog-status{min-height:22px;text-align:center;color:#e4cfe9;font-size:15px}
.dialog-actions{display:flex;justify-content:center;gap:24px}
.subtle-button{background:transparent;border:0;padding:8px;color:#d9bee7;font-size:14px;text-decoration:underline;text-underline-offset:4px}
.subtle-button:hover{color:white}
.results-heading{font-size:28px;text-align:center;font-weight:900;font-style:italic;text-transform:uppercase;color:var(--cyan);margin-bottom:8px}
.result-line{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:22px;font-weight:900;text-transform:uppercase}
.result-line strong{font-style:italic;font-size:30px;color:var(--yellow);font-variant-numeric:tabular-nums}
.main-button{margin-top:15px;width:100%}
@media(max-width:900px){
  html,body{overflow:auto}
  .app{flex-direction:column;min-height:100dvh;height:100dvh;overflow:hidden}
  .opponent-panel{
    flex:0 0 auto;width:100%;height:140px;padding:12px 18px;
    flex-direction:row;justify-content:center;gap:16px;
    border-right:0;border-bottom:2px solid #654477;
  }
  .player-header{width:140px;flex:0 1 140px;flex-direction:column;gap:0;justify-content:center}
  .player-name{font-size:18px}
  .score{font-size:24px}
  .opponent-grid-wrap{height:120px;width:120px;flex:0 0 120px}
  .opponent-grid{gap:1px;padding:3px;border-width:2px}
  .opponent-status{width:94px;font-size:12px}
  .game-area{flex:1;min-height:0;width:100%}
}
@media(max-width:420px){
  .opponent-panel{height:116px;gap:10px;padding:8px 10px}
  .opponent-grid-wrap{width:100px;height:100px;flex-basis:100px}
  .player-header{width:105px;flex-basis:105px}
  .opponent-status{width:60px}
}
@font-face{font-family:Nunito;src:url('/build_configurations/skins/default/embedded/fonts/Regular/NunitoSans-Regular.woff')}
@font-face{font-family:Nunito;src:url('/build_configurations/skins/default/embedded/fonts/Bold/NunitoSans-ExtraBoldItalic.woff');font-weight:900;font-style:italic}
.own-panel{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.own-panel .game-area{width:100%;flex:1;min-height:0}

.power-panel{flex:none;position:relative;align-self:center;width:clamp(130px,22vw,240px);margin:2px 0 12px;height:18px}
.power-meter{height:18px;width:100%;border:2px solid #b490cd;border-bottom:3px solid #281630;border-radius:8px;overflow:hidden;background:#2d1b3a;box-shadow:inset 0 2px 3px #120c1999,0 2px 0 #24142c}
.power-meter span{display:block;height:100%;width:0;background:linear-gradient(#fff6ab,#ffed00 44%,#eab426);border-radius:5px;box-shadow:inset 0 2px 0 #fff9;transition:width .35s ease}
.power-flash{position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);pointer-events:none;background-position:center;background-size:contain;background-repeat:no-repeat;opacity:0}
.power-flash[data-kind=freeze]{background-image:url('/resources/images/tiles/tiles/img_tile_frozen.png')}.power-flash[data-kind=bomb]{background-image:url('/resources/images/effects/effects/img_effect_lightning_glow.png')}.power-flash[data-kind=reroll]{background-image:url('/resources/images/tiles/tiles/img_tile_white.png')}.power-flash[data-kind=lock]{background-image:url('/resources/images/tiles/tiles/img_tile_violet.png')}.power-flash.show{animation:power-flash 1s ease-out both}
@keyframes power-flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-110%) scale(1.2)}}
.input-shield{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#2a193855;padding:30px;text-align:center}
.input-shield.locked{background:#2a1938aa;cursor:pointer;touch-action:manipulation}.shield-copy{font:900 italic 24px Nunito,Arial,sans-serif;text-shadow:0 2px 2px #201126}.lock-dots{display:flex;gap:8px}.lock-dots span{height:16px;width:16px;border-radius:4px;background:#ffed00;box-shadow:inset 0 2px 0 #fff8,0 3px 0 #a27b19}
@media(max-width:420px){.power-panel{height:14px;margin-bottom:6px}.power-meter{height:14px}}
@media(prefers-reduced-motion:reduce){.power-meter span{transition:none}.power-flash.show{animation:none}}