/*
  01 Domino Room cinematic layer.
  Loaded last so the game gets a dedicated HYPHSWORLD presentation without
  replacing live controls, room state, authentication, scoring, or rewards.
*/
.dominos-page{
  --domino-mint:#72ffd2;
  --domino-green:#24f17d;
  --domino-cyan:#19dfff;
  --domino-gold:#f6c955;
  --domino-magenta:#ff48c8;
  --domino-ink:#020504;
  background:
    radial-gradient(circle at 50% -10%,rgba(25,223,255,.16),transparent 30rem),
    radial-gradient(circle at 5% 55%,rgba(255,72,200,.1),transparent 26rem),
    linear-gradient(180deg,#030406,#06100b 55%,#020302)!important;
}
.domino-game-active .site-header,
.domino-game-active .ticker{transition:opacity .3s ease}
.dominos-page .dominos-table.domino-pov-game{
  position:relative;
  isolation:isolate;
  overflow:visible;
  padding:clamp(8px,1.8vw,18px)!important;
  border:1px solid rgba(25,223,255,.34)!important;
  border-radius:30px!important;
  background:
    linear-gradient(145deg,rgba(10,18,17,.96),rgba(1,4,5,.98)),
    #020403!important;
  box-shadow:
    0 0 0 1px rgba(114,255,210,.08),
    0 28px 80px rgba(0,0,0,.72),
    0 0 60px rgba(25,223,255,.1)!important;
}
.dominos-page .dominos-table.domino-pov-game::before{
  content:"01";
  position:absolute;
  z-index:-1;
  top:-48px;
  right:8px;
  color:rgba(255,255,255,.035);
  font:1000 clamp(7rem,20vw,14rem)/1 system-ui,sans-serif;
  letter-spacing:-.12em;
  pointer-events:none;
}
.domino-game-title{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:14px;
  margin:0 4px 10px!important;
  color:#fff;
  font-size:clamp(1.25rem,3vw,2.1rem);
  letter-spacing:-.04em!important;
  text-shadow:0 0 20px rgba(25,223,255,.28);
}
.domino-game-title span{
  color:var(--domino-mint);
  font-size:.46em;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.dominos-page .dominos-scoreboard{
  gap:7px!important;
  margin-bottom:8px!important;
}
.dominos-page .score-card{
  position:relative;
  overflow:hidden;
  border-color:rgba(114,255,210,.24)!important;
  background:linear-gradient(120deg,rgba(3,12,11,.96),rgba(13,25,29,.9))!important;
}
.dominos-page .score-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.1),transparent 68%);
  transform:translateX(-120%);
  animation:domino-card-scan 6s ease-in-out infinite;
}
.dominos-page .score-card strong{color:#fff;text-shadow:0 0 12px rgba(114,255,210,.4)}
.domino-pov-room{
  border:1px solid rgba(25,223,255,.52)!important;
  outline:1px solid rgba(246,201,85,.18);
  outline-offset:-7px;
  background-position:center top!important;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.54),
    inset 0 -100px 120px rgba(0,0,0,.58),
    0 18px 50px rgba(0,0,0,.74),
    0 0 34px rgba(25,223,255,.2)!important;
}
.domino-pov-room::after{
  z-index:1!important;
  height:55%!important;
  background:
    linear-gradient(0deg,rgba(0,0,0,.56),transparent 74%),
    repeating-linear-gradient(90deg,transparent 0 58px,rgba(114,255,210,.018) 59px 60px)!important;
}
.domino-cinema-intro{
  position:absolute;
  z-index:50;
  inset:0;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:7px;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(circle,rgba(9,57,43,.92),rgba(0,0,0,.98) 64%),
    #000;
  animation:domino-boot 2.8s cubic-bezier(.7,0,.2,1) both;
}
.domino-cinema-intro span{
  color:var(--domino-mint);
  font-size:clamp(.62rem,2vw,.85rem);
  font-weight:1000;
  letter-spacing:.28em;
}
.domino-cinema-intro strong{
  color:#fff;
  font-size:clamp(2rem,8vw,4.8rem);
  line-height:.86;
  letter-spacing:-.07em;
  text-align:center;
  text-shadow:0 0 15px rgba(25,223,255,.55),3px 4px 0 rgba(255,72,200,.28);
}
.domino-cinema-intro small{
  color:var(--domino-gold);
  font-weight:1000;
  letter-spacing:.16em;
}
.domino-atmosphere{
  position:absolute;
  z-index:3;
  inset:0;
  overflow:hidden;
  border-radius:inherit;
  pointer-events:none;
}
.domino-atmosphere i{
  position:absolute;
  left:var(--x);
  bottom:18%;
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--domino-mint);
  box-shadow:0 0 10px var(--domino-mint);
  opacity:0;
  animation:domino-dust 7s linear infinite;
}
.domino-atmosphere i:nth-child(1){--x:9%;animation-delay:-1s}
.domino-atmosphere i:nth-child(2){--x:24%;animation-delay:-4s}
.domino-atmosphere i:nth-child(3){--x:43%;animation-delay:-2s}
.domino-atmosphere i:nth-child(4){--x:62%;animation-delay:-6s}
.domino-atmosphere i:nth-child(5){--x:79%;animation-delay:-3s}
.domino-atmosphere i:nth-child(6){--x:92%;animation-delay:-5s}
.domino-pov-room .pov-neon-sign{
  border-color:rgba(246,201,85,.6)!important;
  background:linear-gradient(145deg,rgba(0,0,0,.94),rgba(16,20,18,.88))!important;
  box-shadow:0 0 18px rgba(246,201,85,.18),inset 0 0 14px rgba(246,201,85,.08)!important;
}
.domino-pov-room .pov-neon-sign span{
  color:#fff!important;
  text-shadow:0 0 10px var(--domino-cyan),2px 2px 0 rgba(255,72,200,.65)!important;
}
.domino-pov-room .pov-neon-sign small{color:var(--domino-gold)!important}
.domino-pov-room .pov-player-hud{
  border-color:var(--domino-cyan)!important;
  background:
    linear-gradient(135deg,rgba(2,7,10,.98),rgba(8,23,21,.92))!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.09),
    0 0 22px rgba(25,223,255,.34),
    inset 0 0 20px rgba(25,223,255,.07)!important;
}
.domino-pov-room.is-my-turn .pov-player-hud{opacity:.84;filter:saturate(.75)}
.domino-pov-room .pov-felt{
  z-index:2;
  border-color:#1c1209!important;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(7,119,69,.56),rgba(3,75,42,.5) 54%,rgba(1,24,14,.74) 100%)!important;
  backdrop-filter:saturate(1.12) contrast(1.04);
  box-shadow:
    inset 0 0 0 2px rgba(246,201,85,.44),
    inset 0 0 64px rgba(0,0,0,.42),
    inset 0 24px 44px rgba(114,255,210,.07),
    0 28px 46px rgba(0,0,0,.58)!important;
}
.domino-pov-room .pov-felt::before{
  border:1px solid rgba(246,201,85,.2)!important;
  box-shadow:inset 0 0 30px rgba(114,255,210,.035);
}
.domino-pov-room .pov-felt-mark{
  opacity:.9;
  color:rgba(255,255,255,.045)!important;
  text-shadow:0 2px 0 rgba(246,201,85,.08);
}
.domino-pov-room .pov-board-label,
.domino-pov-room .pov-hand-label{
  color:var(--domino-mint)!important;
  text-shadow:0 0 10px rgba(114,255,210,.28);
}
.domino-pov-room .pov-board{
  border:1px solid rgba(114,255,210,.1)!important;
  border-radius:24px!important;
  background:
    radial-gradient(ellipse,rgba(114,255,210,.065),transparent 72%)!important;
  box-shadow:inset 0 0 30px rgba(0,0,0,.2);
}
.domino-pov-room .pov-board .chain-bone{
  filter:drop-shadow(0 7px 5px rgba(0,0,0,.5));
}
.domino-pov-room .pov-board .chain-new{
  animation:domino-cinematic-land .48s cubic-bezier(.2,.9,.2,1) both!important;
}
.domino-pov-room .pov-turn-banner{
  overflow:hidden;
  border-color:var(--domino-green)!important;
  color:#afffc9!important;
  background:linear-gradient(90deg,#020705,#07150e,#020705)!important;
  box-shadow:0 0 9px var(--domino-green),0 0 34px rgba(36,241,125,.38),inset 0 0 20px rgba(36,241,125,.08)!important;
}
.domino-pov-room .pov-turn-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.2),transparent 55%);
  transform:translateX(-130%);
  animation:domino-turn-sweep 2.4s ease-in-out infinite;
}
.domino-pov-room .pov-coach{
  border-color:rgba(25,223,255,.62)!important;
  background:rgba(0,4,6,.9)!important;
  box-shadow:0 0 20px rgba(25,223,255,.1);
}
.domino-pov-room .pov-player-hand{
  position:relative;
  border-radius:18px 18px 5px 5px;
  background:
    linear-gradient(180deg,transparent 0 12%,rgba(8,6,3,.78) 13% 86%,#2b1909 87% 94%,#090502 95%)!important;
  box-shadow:inset 0 -4px 0 rgba(246,201,85,.28),0 12px 24px rgba(0,0,0,.35);
}
.domino-pov-room .pov-player-hand::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:2%;
  right:2%;
  bottom:0;
  height:14px;
  border-radius:50%;
  background:#000;
  filter:blur(9px);
}
.domino-pov-room .pov-player-hand .domino-tile{
  box-shadow:
    0 5px 0 #8b6a2d,
    0 13px 18px rgba(0,0,0,.56),
    inset 2px 2px 1px rgba(255,255,255,.95),
    inset -2px -2px 2px rgba(70,45,7,.22)!important;
}
.domino-pov-room.is-my-turn .pov-player-hand .domino-tile.is-playable{
  animation:domino-playable-glow 1.65s ease-in-out infinite;
}
.domino-pov-room>.pov-action-dock{
  border:1px solid rgba(25,223,255,.38)!important;
  background:
    linear-gradient(135deg,rgba(1,5,7,.96),rgba(7,17,16,.96))!important;
  box-shadow:0 15px 35px rgba(0,0,0,.58),inset 0 0 22px rgba(25,223,255,.04);
}
.domino-pov-room>.pov-action-dock .games-btn{
  border-radius:14px!important;
  letter-spacing:.06em;
  background:linear-gradient(180deg,#101719,#030506)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 7px 12px rgba(0,0,0,.28);
}
.domino-pov-room>.pov-action-dock .games-btn:not(:disabled):active{transform:translateY(2px)}
.domino-pov-room>.pov-action-dock .primary{
  color:#020504!important;
  border-color:transparent!important;
  background:linear-gradient(100deg,var(--domino-mint),var(--domino-cyan),var(--domino-gold),var(--domino-magenta))!important;
  background-size:220% 100%!important;
  animation:domino-action-flow 5s linear infinite;
}
.domino-radio{
  border-color:rgba(255,72,200,.35)!important;
  background:
    radial-gradient(circle at 90% 0,rgba(255,72,200,.12),transparent 38%),
    linear-gradient(135deg,rgba(5,8,8,.98),rgba(9,15,17,.98))!important;
  box-shadow:0 20px 40px rgba(0,0,0,.38),inset 0 0 25px rgba(25,223,255,.035);
}
.domino-radio-copy span{color:var(--domino-magenta)!important}
.domino-help-strip{
  border-color:rgba(246,201,85,.35)!important;
  background:linear-gradient(90deg,rgba(246,201,85,.08),rgba(25,223,255,.05))!important;
}
.domino-placement-picker{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.74);backdrop-filter:blur(8px)}
.domino-placement-picker section{width:min(430px,100%);display:grid;gap:12px;padding:22px;border:2px solid var(--domino-cyan);border-radius:26px;background:linear-gradient(145deg,#06120d,#020504);box-shadow:0 0 36px rgba(25,223,255,.28),0 24px 60px rgba(0,0,0,.7);text-align:center}
.domino-placement-picker strong{color:#fff;font-size:1.45rem;letter-spacing:.08em}
.domino-placement-picker small{color:var(--domino-mint);font-weight:850}
.domino-placement-picker div{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.domino-placement-picker button{min-height:54px;border:1px solid rgba(246,201,85,.72);border-radius:15px;color:#fff;background:linear-gradient(180deg,#14251e,#050806);font:1000 .9rem/1 Arial,sans-serif;letter-spacing:.08em}
.domino-placement-picker [data-play-side]{box-shadow:inset 0 0 18px rgba(114,255,210,.08)}
.domino-placement-picker .placement-cancel{min-height:44px;border-color:rgba(255,255,255,.25);color:#bbb}
.domino-placement-picker button:focus-visible{outline:3px solid var(--domino-gold);outline-offset:3px;box-shadow:0 0 0 6px rgba(246,201,85,.16),0 0 24px rgba(25,223,255,.32)}
.domino-pov-room .spinner-viewport{isolation:isolate;margin-inline:auto!important}
.domino-pov-room .spinner-stage .spinner-bone{z-index:5;filter:drop-shadow(0 0 9px rgba(246,201,85,.34)) drop-shadow(0 7px 5px rgba(0,0,0,.5))}
.domino-pov-room .spinner-stage .spinner-branch{z-index:2}
.domino-pov-room .spinner-stage .spinner-double{z-index:4}
@keyframes domino-boot{
  0%{opacity:1;visibility:visible}
  70%{opacity:1;visibility:visible}
  99%{opacity:0;visibility:visible}
  100%{opacity:0;visibility:hidden}
}
@keyframes domino-dust{
  0%{transform:translate3d(0,40px,0) scale(.4);opacity:0}
  18%{opacity:.55}
  75%{opacity:.18}
  100%{transform:translate3d(22px,-360px,0) scale(1.5);opacity:0}
}
@keyframes domino-card-scan{
  0%,60%{transform:translateX(-120%)}
  80%,100%{transform:translateX(120%)}
}
@keyframes domino-turn-sweep{
  0%,45%{transform:translateX(-130%)}
  75%,100%{transform:translateX(130%)}
}
@keyframes domino-action-flow{to{background-position:220% 0}}
@keyframes domino-cinematic-land{
  0%{opacity:0;scale:1.8;filter:brightness(2) drop-shadow(0 0 18px var(--domino-mint))}
  65%{opacity:1;scale:.9}
  82%{scale:1.08}
  100%{scale:1;filter:drop-shadow(0 7px 5px rgba(0,0,0,.5))}
}
@keyframes domino-playable-glow{
  0%,100%{filter:brightness(1.03) drop-shadow(0 0 7px rgba(36,241,125,.55))}
  50%{filter:brightness(1.15) drop-shadow(0 0 17px rgba(36,241,125,.9))}
}
@media(max-width:640px){
  .dominos-page{background:#020403!important}
  .dominos-page .dominos-app{padding:0!important}
  .dominos-page .dominos-table.domino-pov-game{
    border-radius:0!important;
    border-inline:0!important;
    padding:0 2px 10px!important;
  }
  .domino-game-title{padding:8px 9px 0}
  .domino-pov-room{
    border-radius:20px!important;
    outline-offset:-5px;
  }
  .domino-cinema-intro strong{font-size:clamp(2.2rem,13vw,3.5rem)}
  .domino-pov-room .pov-board{border-radius:18px!important}
  .domino-pov-room>.pov-action-dock{border-radius:18px!important}

  /* Keep global navigation helpers off the live hand, win message, and
     Submit Win controls. The ID remains reachable at the top; CREATE waits
     until the player leaves the active table. */
  body.domino-game-active #hw-global-create{display:none!important}
  body.domino-game-active #hw-global-my-id{
    top:max(8px,env(safe-area-inset-top))!important;
    right:max(8px,env(safe-area-inset-right))!important;
    bottom:auto!important;
    transform:scale(.82)!important;
    transform-origin:top right!important;
  }
  body.domino-game-active .hw-drag-duck{
    top:max(72px,calc(env(safe-area-inset-top) + 58px))!important;
    left:8px!important;
    right:auto!important;
    bottom:auto!important;
  }
  body.domino-game-active .hw-drag-duck-copy{display:none!important}
  body.domino-game-active .hw-drag-duck-handle{padding:5px!important}
  body.domino-game-active .hw-drag-duck-face{width:34px!important;height:34px!important}
}
@media(prefers-reduced-motion:reduce){
  .domino-cinema-intro{display:none}
  .domino-atmosphere,
  .dominos-page .score-card::after,
  .domino-pov-room .pov-turn-banner::after{display:none}
  .domino-pov-room.is-my-turn .pov-player-hand .domino-tile.is-playable,
  .domino-pov-room>.pov-action-dock .primary{animation:none!important}
}