.domino-page{--uno-bg:#101b18;--uno-surface:#142521;--uno-surface-2:#1c312b;--uno-ink:#f7f0df;--uno-muted:#aebdb8;--uno-border:#355048;--line:var(--uno-border);--muted:var(--uno-muted);--yellow:var(--game-accent);--game-accent:#f0c75e;--game-accent-ink:#201a0d;--game-secondary:#4a9d78;min-height:100dvh;color:var(--uno-ink);background-color:#101b18;background-image:var(--game-texture)}.domino-shell{width:min(1380px,100%);margin:auto;padding:0 20px 28px}.domino-hero-art{position:relative;width:min(430px,40vw);height:250px}.domino-hero-art i{position:absolute;width:82px;height:150px;border:3px solid #2b261e;border-radius:13px;background:linear-gradient(90deg,#fff9e9 0 48%,#29251f 49% 51%,#fff9e9 52%);box-shadow:0 16px 28px rgba(0,0,0,.35)}.domino-hero-art i:nth-child(1){left:42%;top:28px;rotate:14deg}.domino-hero-art i:nth-child(2){left:22%;top:70px;rotate:-18deg}.domino-hero-art i:nth-child(3){left:61%;top:82px;rotate:34deg}.domino-table{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px;padding:18px;border:1px solid #355048;border-radius:18px;background:#142521}.domino-table__head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px}.domino-table__head>div{display:flex;align-items:center;gap:10px}.domino-table__head>div:first-child{display:grid;gap:3px}.domino-table__head span{color:#aabbb5;font-size:.75rem}.domino-table__head button{min-height:38px;padding:0 12px;border:1px solid #536b64;border-radius:8px;background:transparent;color:#eef4f1}.domino-players{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.domino-player{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:9px;padding:9px;border:1px solid #324a43;border-radius:10px;background:#10201c}.domino-player.is-turn{border-color:var(--game-accent);box-shadow:inset 0 0 0 1px var(--game-accent)}.domino-player img{width:42px;height:42px;border-radius:50%;object-fit:cover}.domino-player span{display:grid;min-width:0}.domino-player strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.domino-player small{color:#9caea8}.domino-board-wrap{position:relative;display:grid;grid-template-columns:105px minmax(0,1fr);min-height:410px;overflow:hidden;border:1px solid #3d5a51;border-radius:14px;background:radial-gradient(circle at center,#235e4d,#14362e 72%);box-shadow:inset 0 0 60px rgba(0,0,0,.3)}.domino-stock{display:grid;place-items:center;border-right:1px solid rgba(255,255,255,.1)}.domino-stock button{display:grid;justify-items:center;gap:7px;border:0;background:transparent;color:#fff}.domino-stock button>span{width:52px;height:88px;border:2px solid #d8caa5;border-radius:9px;background:repeating-linear-gradient(45deg,#191d1b 0 5px,#343d38 5px 10px);box-shadow:4px 5px 0 #0a100e}.domino-stock small{color:#b5c8c1}.domino-board{display:flex;align-content:center;align-items:center;justify-content:center;gap:3px;padding:24px;flex-wrap:wrap}.domino-board>p,.domino-hand>p{color:#b5c8c1}.domino-tile{display:flex;width:70px;height:38px;flex:none;padding:0;border:2px solid #312c23;border-radius:6px;background:#fff8e8;color:#181714;box-shadow:0 4px 8px rgba(0,0,0,.28)}button.domino-tile{cursor:pointer}.domino-tile.is-playable{border-color:#ffd85d;box-shadow:0 0 0 3px rgba(255,216,93,.2),0 5px 10px rgba(0,0,0,.3);transform:translateY(-4px)}.pips{position:relative;display:grid;width:50%;height:100%;padding:5px;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,1fr);place-items:center}.pips+.pips{border-left:2px solid #312c23}.pips i{width:6px;height:6px;border-radius:50%;background:#24211c}.pips-1 i{grid-area:2/1/3/3}.pips-2 i:first-child{grid-area:1/1}.pips-2 i:last-child{grid-area:3/2}.pips-3 i:nth-child(1){grid-area:1/1}.pips-3 i:nth-child(2){grid-area:2/1/3/3}.pips-3 i:nth-child(3){grid-area:3/2}.pips-4 i:nth-child(2),.pips-5 i:nth-child(2),.pips-6 i:nth-child(2){grid-column:2}.pips-5 i:nth-child(5){grid-area:2/1/3/3}.domino-hand-panel{display:grid;gap:10px}.domino-hand-panel>p{margin:0;text-align:center}.domino-hand{display:flex;min-height:84px;align-items:center;justify-content:center;gap:8px;overflow-x:auto;padding:12px}.domino-actions{display:flex;justify-content:center;gap:8px}.domino-actions button{min-height:42px;padding:0 18px}.domino-rules{grid-column:2;grid-row:3/5;padding:18px;border:1px solid #344c45;border-radius:13px;background:#10201c}.domino-rules h2{margin:4px 0 14px}.domino-rules p{color:#bdcbc6;line-height:1.5}.domino-result{position:absolute;z-index:10;inset:14px;display:grid;place-content:center;justify-items:center;border-radius:12px;background:rgba(13,30,25,.92);backdrop-filter:blur(6px)}.domino-result[hidden]{display:none}.domino-result small{color:var(--game-accent);font-weight:800;letter-spacing:.15em}.domino-result strong{color:#fff8e7;font:clamp(2rem,6vw,4rem)/1 var(--font-display)}.domino-result span{margin-top:12px;color:#c1d0ca}
@media(max-width:900px){.domino-table{grid-template-columns:1fr}.domino-rules{grid-column:1;grid-row:auto}.domino-players{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.domino-shell{padding-inline:8px}.domino-hero-art{width:100%;height:190px}.domino-table{padding:10px}.domino-table__head{align-items:flex-start;flex-direction:column}.domino-board-wrap{grid-template-columns:1fr;min-height:360px}.domino-stock{position:absolute;z-index:2;right:8px;top:8px;border:0}.domino-stock button>span{width:35px;height:56px}.domino-board{padding:70px 10px 18px}.domino-tile{width:58px;height:32px}.pips{padding:3px}.pips i{width:5px;height:5px}.domino-player{grid-template-columns:34px 1fr}.domino-player img{width:34px;height:34px}.domino-actions{flex-wrap:wrap}}

/* O Dominó compartilha a estrutura visual do UNO, com sua própria paleta. */
.domino-shell{width:min(1180px,calc(100% - 40px));padding:16px 0 40px}
.domino-page .primary{min-height:48px;border:1px solid var(--game-accent);border-radius:var(--radius-sm);background:var(--game-accent);color:var(--game-accent-ink);font-weight:800}
.domino-page .primary:hover{filter:brightness(1.08)}
.domino-page .secondary{min-height:48px;border:1px solid #64776f;border-radius:var(--radius-sm);background:transparent;color:var(--uno-ink);font-weight:700}
.domino-page .secondary:hover{border-color:var(--game-accent);color:var(--game-accent)}
.domino-page dialog{border-radius:var(--radius-lg);background:var(--uno-surface)}
.domino-page dialog::backdrop{background:rgba(7,15,12,.8)}
.domino-page dialog form{padding:28px}
.domino-page dialog h2{font-family:var(--font-display);font-weight:400;letter-spacing:-.03em}
.domino-lobby input,.domino-page dialog input{border-radius:var(--radius-sm)}
.domino-hero-art{margin-left:auto;filter:drop-shadow(0 16px 15px rgba(35,27,17,.3));perspective:700px;animation:deal-in .55s var(--ease-spring) both}
.domino-hero-tile{position:absolute;display:flex;box-sizing:border-box;width:145px;height:70px;padding:4px;border:1px solid #817966;border-radius:9px;background:linear-gradient(155deg,#fffef9 0%,#f8f4e9 58%,#e5dcc8 100%);color:#181714;box-shadow:inset -2px -2px 3px rgba(87,72,47,.14),2px 3px 0 #827967,3px 5px 0 #6d6557,7px 11px 12px rgba(45,34,20,.27);opacity:0;transform-origin:50% 70%;transform-style:preserve-3d;will-change:transform,opacity,translate;transition:translate .35s var(--ease-spring),rotate .35s var(--ease-spring);animation:domino-hero-deal .78s var(--ease-spring) var(--deal-delay) forwards}
.domino-hero-tile:before{content:"";position:absolute;z-index:3;inset:3px;border-radius:5px;background:linear-gradient(120deg,rgba(255,255,255,.24),transparent 38%);box-shadow:inset 0 0 7px rgba(89,68,37,.05);pointer-events:none}
.domino-hero-tile:after{content:"";position:absolute;z-index:5;top:8px;bottom:8px;left:50%;width:2px;border-radius:2px;background:#39352d;box-shadow:1px 0 rgba(255,255,255,.72);transform:translateX(-1px)}
.domino-hero-tile>.pips{z-index:1;width:50%;height:100%;padding:7px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}
.domino-hero-tile>.pips+.pips{border:0}
.domino-hero-tile>.pips i,.domino-hero-tile>.pips i:nth-child(n){position:static;width:8px;height:8px;border:0;border-radius:50%;background:radial-gradient(circle at 38% 30%,#5a554b 0 9%,#191817 37%,#020202 78%);box-shadow:inset 0 1.5px 2px #000,0 1px 0 #fff,0 0 0 .5px rgba(0,0,0,.9);rotate:0deg}
.domino-hero-tile:nth-child(1){z-index:3;left:45%;top:24px;rotate:6deg;--deal-delay:.06s;--deal-x:120px;--deal-y:-70px;--deal-turn:20deg}
.domino-hero-tile:nth-child(2){z-index:2;left:16%;top:96px;rotate:-9deg;--deal-delay:.2s;--deal-x:-105px;--deal-y:55px;--deal-turn:-22deg}
.domino-hero-tile:nth-child(3){z-index:1;left:50%;top:117px;rotate:10deg;--deal-delay:.34s;--deal-x:110px;--deal-y:70px;--deal-turn:25deg}
.domino-hero-art:hover .domino-hero-tile:nth-child(1){translate:5px -5px;rotate:3deg}.domino-hero-art:hover .domino-hero-tile:nth-child(2){translate:-7px 4px;rotate:-12deg}.domino-hero-art:hover .domino-hero-tile:nth-child(3){translate:7px 6px;rotate:13deg}
@keyframes domino-hero-deal{0%{opacity:0;transform:translate3d(var(--deal-x),var(--deal-y),40px) rotateZ(var(--deal-turn)) rotateX(18deg) scale(.62)}68%{opacity:1;transform:translate3d(-4px,3px,0) rotateZ(-2deg) rotateX(0) scale(1.045)}100%{opacity:1;transform:translate3d(0,0,0) rotateZ(0) rotateX(0) scale(1)}}
@media(max-width:760px){.domino-shell{width:min(100% - 24px,620px);padding:8px 0 40px}.domino-hero-art{width:300px;height:190px;margin:0 auto}.domino-page .sheet-dialog form{padding:28px 20px calc(24px + env(safe-area-inset-bottom))}}
@media(max-width:380px){.domino-shell{width:calc(100% - 20px)}}
@media(prefers-reduced-motion:reduce){.domino-hero-tile{opacity:1;animation:none;transform:none;transition:none}.domino-hero-art:hover .domino-hero-tile{translate:0}}

/* Identidade e hierarquia dos controles do lobby. */
.domino-page{
  --domino-gold:#f0c75e;
  --domino-green:#4a9d78;
  --game-accent:var(--domino-gold);
  --game-yellow:var(--domino-gold);
  --uno-accent:var(--domino-gold);
  --game-secondary:var(--domino-green);
  --focus-ring:var(--domino-gold)
}
.domino-page .secondary{
  border-color:color-mix(in srgb,var(--domino-green) 68%,var(--uno-border));
  background:color-mix(in srgb,var(--domino-green) 16%,var(--uno-surface));
  box-shadow:inset 0 1px rgba(255,255,255,.035)
}
.domino-page .secondary:hover{
  border-color:var(--domino-green);
  background:color-mix(in srgb,var(--domino-green) 28%,var(--uno-surface));
  color:#f7fff9
}
.domino-page .refresh-button{
  border-color:color-mix(in srgb,var(--domino-green) 60%,var(--uno-border));
  background:color-mix(in srgb,var(--domino-green) 12%,var(--uno-surface));
  color:#d9e9e2
}
.domino-page .refresh-button:hover{
  border-color:var(--domino-gold);
  background:color-mix(in srgb,var(--domino-gold) 13%,var(--uno-surface));
  color:var(--domino-gold)
}
.domino-page .room-search input{
  border-color:color-mix(in srgb,var(--domino-green) 48%,var(--uno-border));
  background:#0c1512
}
.domino-page .room-search input:focus{
  border-color:var(--domino-gold);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--domino-gold) 16%,transparent)
}
.domino-page .room-row>button,
.domino-page .empty button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 15px;
  border:1px solid var(--domino-gold);
  border-radius:9px;
  background:var(--domino-gold);
  color:var(--game-accent-ink);
  font-weight:800;
  line-height:1;
  box-shadow:0 6px 16px color-mix(in srgb,var(--domino-gold) 14%,transparent);
  transition:filter .16s ease,transform .16s ease,box-shadow .16s ease
}
.domino-page .room-row>button:hover,
.domino-page .empty button:hover{
  filter:brightness(1.08);
  transform:translateY(-1px);
  box-shadow:0 9px 20px color-mix(in srgb,var(--domino-gold) 20%,transparent)
}
.domino-page .segmented-control input:checked+span{
  background:var(--domino-gold);
  color:var(--game-accent-ink)
}
.domino-page .game-header .header-account button{
  background:color-mix(in srgb,var(--domino-gold) 14%,transparent)
}
.domino-page .game-header .header-account button:hover{
  background:var(--domino-gold);
  color:var(--game-accent-ink)
}

/* Cabeçalho da sala no mesmo padrão dos demais jogos. */
.domino-page.is-in-room .game-header{border-bottom-color:transparent}
.domino-header-controls{position:relative;z-index:2;margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.domino-header-controls .live-audience{display:flex;align-items:center;justify-content:center;gap:6px;min-width:54px;height:36px;padding:0 11px;border:1px solid var(--uno-border);border-radius:99px;background:var(--uno-surface);color:var(--uno-muted);font-size:.75rem;font-weight:800;box-shadow:0 5px 14px rgba(0,0,0,.16)}
.domino-header-controls .live-audience>span{color:var(--domino-gold);font-size:.8rem}
.domino-header-controls .live-audience b{font-variant-numeric:tabular-nums}
.domino-header-controls .live-audience.has-viewers{border-color:color-mix(in srgb,var(--domino-green) 75%,white 8%);background:color-mix(in srgb,var(--domino-green) 34%,var(--uno-surface));color:#effff7;box-shadow:0 0 16px color-mix(in srgb,var(--domino-green) 20%,transparent)}
.domino-header-controls .header-leave{width:auto;min-height:36px;height:36px;padding:0 13px;border-radius:18px}
.domino-table__head{padding:2px 0 12px;border-bottom:1px solid color-mix(in srgb,var(--uno-border) 74%,transparent)}
.domino-table__head>div:first-child strong{font:1.12rem/1.1 var(--font-display)}
.domino-table__head #turnTimer{flex:0 0 auto;min-width:44px;padding:7px 9px;border-radius:8px;background:var(--domino-gold);color:var(--game-accent-ink);font:800 .82rem/1 var(--font-body);text-align:center}
.domino-table__head #copyInvite{display:flex;align-items:center;justify-content:center;gap:6px;border-color:color-mix(in srgb,var(--domino-gold) 45%,transparent);background:color-mix(in srgb,var(--domino-gold) 8%,transparent);color:var(--domino-gold);font-weight:800}
.domino-table__head #copyInvite:before{content:"↗";font-size:.85rem}
.domino-table__head #copyInvite:hover{border-color:var(--domino-gold);background:color-mix(in srgb,var(--domino-gold) 16%,transparent);color:#ffe6a1}
@media(max-width:760px){.domino-header-controls{gap:6px}.domino-header-controls .live-audience{min-width:48px;height:32px;padding-inline:9px}.domino-header-controls .header-leave{width:36px;height:36px;padding:0;font-size:0}.domino-header-controls .header-leave:before{content:"↩";font-size:1.05rem}}

/* Escolha da ponta diretamente sobre a mesa. */
.domino-side-picker{position:absolute;z-index:9;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,27,22,.72),transparent 30% 70%,rgba(8,27,22,.72));animation:side-picker-in .18s ease-out}
.domino-side-picker[hidden]{display:none}
.domino-side-picker>div{position:absolute;left:50%;top:15px;display:flex;align-items:center;gap:10px;padding:8px 10px 8px 14px;border:1px solid color-mix(in srgb,var(--domino-gold) 52%,transparent);border-radius:999px;background:rgba(12,31,26,.94);box-shadow:0 8px 24px rgba(0,0,0,.3);translate:-50% 0;pointer-events:auto;white-space:nowrap}
.domino-side-picker>div strong{font-size:.76rem}
.domino-side-picker>div button{min-height:28px;padding:0 9px;border:1px solid var(--uno-border);border-radius:99px;background:var(--uno-surface);color:var(--uno-muted);font-size:.65rem;font-weight:700}
.side-choice{position:absolute;top:50%;display:grid;grid-template-columns:auto auto auto;align-items:center;gap:7px;min-height:54px;padding:7px 12px;border:2px solid var(--domino-gold);border-radius:13px;background:var(--domino-gold);color:var(--game-accent-ink);box-shadow:0 10px 28px rgba(0,0,0,.4),0 0 0 5px color-mix(in srgb,var(--domino-gold) 14%,transparent);translate:0 -50%;pointer-events:auto;font-weight:900;animation:side-choice-pulse 1.35s ease-in-out infinite}
.side-choice--left{left:120px}.side-choice--right{right:15px}
.side-choice span{font-size:1.25rem}.side-choice small{font-size:.67rem;text-transform:uppercase;letter-spacing:.05em}.side-choice b{display:grid;width:29px;height:29px;place-items:center;border-radius:50%;background:rgba(32,26,13,.14);font-size:.92rem}
.side-choice:hover{filter:brightness(1.08);transform:scale(1.04)}
.domino-hand .domino-tile.is-side-selected{border-color:var(--domino-gold);transform:translateY(-10px);box-shadow:0 0 0 4px color-mix(in srgb,var(--domino-gold) 24%,transparent),0 9px 18px rgba(0,0,0,.38)}
@keyframes side-picker-in{from{opacity:0}to{opacity:1}}@keyframes side-choice-pulse{50%{box-shadow:0 12px 30px rgba(0,0,0,.42),0 0 0 8px color-mix(in srgb,var(--domino-gold) 9%,transparent)}}
@media(max-width:600px){.domino-side-picker>div{top:72px}.side-choice{top:58%;min-height:48px;padding:6px 9px}.side-choice--left{left:9px}.side-choice--right{right:9px}.side-choice small{display:none}}
@media(prefers-reduced-motion:reduce){.domino-side-picker,.side-choice{animation:none}}

/* Pedras com volume, marfim e pontos gravados. */
.domino-board-wrap{
  background-color:#16483b;
  background-image:radial-gradient(circle at 48% 42%,rgba(53,130,103,.34),transparent 48%),repeating-linear-gradient(27deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px),repeating-linear-gradient(117deg,rgba(0,0,0,.018) 0 1px,transparent 1px 5px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),inset 0 0 75px rgba(3,20,15,.48),0 12px 28px rgba(0,0,0,.16)
}
.domino-board{gap:7px;padding:30px}
.domino-board .domino-tile,.domino-hand .domino-tile{
  position:relative;
  isolation:isolate;
  box-sizing:border-box;
  width:90px;
  height:39px;
  overflow:hidden;
  padding:3px;
  border:1px solid #817966;
  border-radius:7px;
  background:linear-gradient(155deg,#fffef9 0%,#f8f4e9 58%,#e5dcc8 100%);
  color:#181611;
  box-shadow:inset -2px -2px 3px rgba(87,72,47,.14),0 2px 0 #827967,0 4px 0 #6d6557,0 7px 10px rgba(0,0,0,.28);
  transform:translateY(-1px);
  transition:transform .16s var(--ease-spring),box-shadow .16s ease,border-color .16s ease,filter .16s ease
}
.domino-board .domino-tile:before,.domino-hand .domino-tile:before{
  content:"";
  position:absolute;
  z-index:2;
  inset:3px;
  border:0;
  border-radius:4px;
  background:linear-gradient(120deg,rgba(255,255,255,.2),transparent 38%);
  box-shadow:inset 0 0 7px rgba(89,68,37,.045);
  pointer-events:none
}
.domino-board .domino-tile:after,.domino-hand .domino-tile:after{content:"";position:absolute;z-index:3;top:7px;bottom:7px;left:50%;width:2px;border-radius:2px;background:#39352d;box-shadow:1px 0 rgba(255,255,255,.72);transform:translateX(-1px);pointer-events:none}
.domino-board .domino-tile .pips,.domino-hand .domino-tile .pips{z-index:1;padding:3px 7px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}
.domino-board .domino-tile .pips+.pips,.domino-hand .domino-tile .pips+.pips{border-left:0;box-shadow:none}
.domino-board .domino-tile .pips i,.domino-hand .domino-tile .pips i{
  width:7px;
  height:7px;
  background:radial-gradient(circle at 38% 30%,#5a554b 0 9%,#191817 37%,#020202 78%);
  box-shadow:inset 0 1.5px 2px #000,0 1px 0 #fff,0 0 0 .5px rgba(0,0,0,.9)
}
.domino-hand .domino-tile{width:94px;height:41px}
button.domino-tile:hover:not(:disabled){filter:brightness(1.035);transform:translateY(-5px);box-shadow:0 2px 0 #827967,0 4px 0 #6d6557,0 11px 15px rgba(0,0,0,.36),inset 1px 1px #fff}
.domino-hand .domino-tile.is-playable{border-color:var(--domino-gold);transform:translateY(-5px);box-shadow:0 3px 0 #9b7d35,0 0 0 3px color-mix(in srgb,var(--domino-gold) 24%,transparent),0 9px 15px rgba(0,0,0,.34),inset 1px 1px rgba(255,255,255,.95)}
.domino-hand .domino-tile.is-side-selected{border-color:#ffe49a;transform:translateY(-11px) scale(1.04);box-shadow:0 3px 0 #9b7d35,0 0 0 5px color-mix(in srgb,var(--domino-gold) 32%,transparent),0 13px 20px rgba(0,0,0,.42),inset 1px 1px rgba(255,255,255,.95)}
.domino-hand .domino-tile:not(.is-playable){filter:saturate(.85) brightness(.94);opacity:.72}
.domino-stock button>span{
  position:relative;
  width:58px;
  height:98px;
  overflow:hidden;
  border:2px solid #d3c397;
  border-radius:10px;
  background:repeating-linear-gradient(45deg,#17201d 0 6px,#33423d 6px 12px);
  box-shadow:4px 5px 0 #080e0c,7px 9px 14px rgba(0,0,0,.4),inset 0 0 0 3px #202a26
}
.domino-stock button>span:before{content:"";position:absolute;left:50%;top:50%;width:24px;height:24px;border:2px solid #cdbd91;border-radius:50%;background:#17201d;box-shadow:0 0 0 3px rgba(205,189,145,.12);translate:-50% -50%}
.domino-stock button>span:after{content:"";position:absolute;inset:5px;border:1px solid rgba(230,215,174,.38);border-radius:6px}
@media(max-width:600px){.domino-board{gap:5px;padding:70px 10px 22px}.domino-hand{justify-content:flex-start;padding-inline:12px;scroll-padding-inline:12px;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}.domino-board .domino-tile,.domino-hand .domino-tile{width:72px;height:32px;padding:2px;border-radius:6px}.domino-board .domino-tile:before,.domino-hand .domino-tile:before{inset:2px}.domino-board .domino-tile:after,.domino-hand .domino-tile:after{top:5px;bottom:5px}.domino-board .domino-tile .pips,.domino-hand .domino-tile .pips{padding:2px 5px}.domino-board .domino-tile .pips i,.domino-hand .domino-tile .pips i{width:5.5px;height:5.5px}.domino-stock button>span{width:39px;height:63px}}
@supports(justify-content:safe center){@media(max-width:600px){.domino-hand{justify-content:safe center}}}

/* Padrões tradicionais de pontos, equivalentes às faces de um dado. */
.pips-1 i:nth-child(1){grid-area:2/2}
.pips-2 i:nth-child(1){grid-area:1/1}.pips-2 i:nth-child(2){grid-area:3/3}
.pips-3 i:nth-child(1){grid-area:1/1}.pips-3 i:nth-child(2){grid-area:2/2}.pips-3 i:nth-child(3){grid-area:3/3}
.pips-4 i:nth-child(1){grid-area:1/1}.pips-4 i:nth-child(2){grid-area:1/3}.pips-4 i:nth-child(3){grid-area:3/1}.pips-4 i:nth-child(4){grid-area:3/3}
.pips-5 i:nth-child(1){grid-area:1/1}.pips-5 i:nth-child(2){grid-area:1/3}.pips-5 i:nth-child(3){grid-area:2/2}.pips-5 i:nth-child(4){grid-area:3/1}.pips-5 i:nth-child(5){grid-area:3/3}
.pips-6 i:nth-child(1){grid-area:1/1}.pips-6 i:nth-child(2){grid-area:1/2}.pips-6 i:nth-child(3){grid-area:1/3}.pips-6 i:nth-child(4){grid-area:3/1}.pips-6 i:nth-child(5){grid-area:3/2}.pips-6 i:nth-child(6){grid-area:3/3}

.domino-player{grid-template-columns:42px minmax(0,1fr) auto}
.domino-player .game-avatar-stack{width:42px;height:42px;flex-basis:42px}
.domino-player .game-player-avatar{width:36px;height:36px;border:2px solid var(--game-secondary);border-radius:50%;object-fit:cover}
.domino-player:has(.game-avatar-frame){grid-template-columns:56px minmax(0,1fr) auto;min-height:62px}
.domino-player:has(.game-avatar-frame) .game-avatar-stack{justify-self:center}
.domino-player__remove{display:grid;width:30px;height:30px;min-height:30px;padding:0;place-items:center;border:1px solid rgba(239,125,112,.5);border-radius:50%;background:rgba(130,44,37,.16);color:#f3a096;font-size:1.15rem;font-weight:800;line-height:1;transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease}
.domino-player__remove:hover{border-color:#ef7d70;background:#9f3c34;color:#fff;transform:scale(1.06)}
.domino-player__remove:focus-visible{outline:3px solid rgba(239,125,112,.28);outline-offset:2px}
@media(max-width:600px){.domino-player{grid-template-columns:34px minmax(0,1fr) auto}.domino-player__remove{width:32px;height:32px}}

/* Som e chat da sala. */
.domino-header-controls .sound-toggle{position:static;display:grid;width:40px;height:40px;min-height:40px;padding:0;place-items:center;border:1px solid var(--uno-border);border-radius:50%;background:var(--uno-surface);color:var(--uno-ink);opacity:1;box-shadow:none}
.domino-header-controls .sound-toggle[aria-pressed=true]{border-color:var(--domino-gold);box-shadow:0 0 15px color-mix(in srgb,var(--domino-gold) 16%,transparent)}
.domino-header-controls .sound-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.domino-board-wrap{grid-column:1;grid-row:3}
.domino-board-chat{grid-column:1;grid-row:4;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.domino-board-chat[hidden]{display:none!important}
.domino-board-chat input{width:100%;min-width:0;height:42px;padding:0 12px;border:1px solid var(--uno-border);border-radius:9px;background:#0d1915;color:var(--uno-ink);font-size:.82rem}
.domino-board-chat input:focus{border-color:var(--domino-gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--domino-gold) 14%,transparent)}
.domino-board-chat button{min-height:42px;padding:0 17px;border:1px solid var(--domino-gold);border-radius:9px;background:var(--domino-gold);color:var(--game-accent-ink);font-size:.78rem;font-weight:800}
.domino-hand-panel{grid-column:1;grid-row:5}
.domino-rules{grid-column:2;grid-row:3/6}
.domino-chat-bubbles{position:absolute;z-index:8;inset:10px;overflow:hidden;pointer-events:none}
.domino-chat-bubble{position:absolute;display:grid;gap:4px;width:max-content;max-width:min(74%,360px);padding:11px 15px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(10,29,24,.95);color:#f7f0df;box-shadow:0 8px 22px rgba(0,0,0,.36);opacity:0;transition:opacity .18s ease,transform .18s ease;pointer-events:auto;cursor:pointer;backdrop-filter:blur(8px)}
.domino-chat-bubble.is-top{left:50%;top:12px;transform:translate(-50%,-6px) scale(.96)}
.domino-chat-bubble.is-bottom{left:50%;bottom:12px;transform:translate(-50%,6px) scale(.96)}
.domino-chat-bubble.is-left{left:118px;top:50%;transform:translate(-6px,-50%) scale(.96)}
.domino-chat-bubble.is-right{right:12px;top:50%;transform:translate(6px,-50%) scale(.96)}
.domino-chat-bubble.is-visible.is-top,.domino-chat-bubble.is-visible.is-bottom{opacity:1;transform:translate(-50%,0) scale(1)}
.domino-chat-bubble.is-visible.is-left,.domino-chat-bubble.is-visible.is-right{opacity:1;transform:translate(0,-50%) scale(1)}
.domino-chat-bubble strong{overflow:hidden;color:var(--domino-gold);font-size:.76rem;text-overflow:ellipsis;white-space:nowrap}.domino-chat-bubble span{font-size:.88rem;line-height:1.35;overflow-wrap:anywhere}
@media(max-width:900px){.domino-board-wrap,.domino-board-chat,.domino-hand-panel,.domino-rules{grid-column:1;grid-row:auto}.domino-rules{order:6}.domino-chat-bubble.is-left{left:10px}.domino-chat-bubble.is-right{right:10px}}
@media(max-width:600px){.domino-header-controls .sound-toggle{width:36px;height:36px;min-height:36px}.domino-board-chat{gap:6px}.domino-board-chat button{padding-inline:13px}.domino-chat-bubble{max-width:82%;padding:10px 13px}.domino-chat-bubble span{font-size:.82rem}}
@media(prefers-reduced-motion:reduce){.domino-chat-bubble{transition:none}}