@charset "UTF-8";
:root {
  color-scheme:light;
  font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  color:#5d321d;
  background:#163e37;
  --cream:#fff5d9;
  --gold:#edc575
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  overflow:hidden
}
button {
  font:inherit;
  cursor:pointer;
  color:inherit;
  border:0;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}
button:disabled {
  cursor:default;
  filter:grayscale(.7);
  opacity:.45
}
button:focus-visible,input:focus-visible {
  outline:5px solid #0877ce;
  outline-offset:4px
}
[hidden] {
  display:none!important
}
.viewport {
  position:relative;
  margin:auto
}
:root:fullscreen,
:root:fullscreen body {
  width:100%;
  height:100%;
  background:#000
}
:root:fullscreen::backdrop {
  background:#000
}
:root:fullscreen body {
  display:flex;
  align-items:center;
  justify-content:center
}
:root:fullscreen .viewport {
  margin:0;
  flex:none
}
.stage {
  position:relative;
  width:1440px;
  height:810px;
  transform-origin:0 0;
  overflow:hidden;
  isolation:isolate;
  background:#9ed8be
}
.scene {
  position:absolute;
  inset:0;
  z-index:-2;
  background:#a1dbc0 url('assets/art/garden.png') center/cover no-repeat
}
.screen {
  position:absolute;
  inset:0
}
.utilities {
  position:absolute;
  right:28px;
  top:22px;
  display:flex;
  align-items:center;
  gap:10px;
  z-index:30
}
.image-button {
  display:grid;
  place-items:center;
  background:transparent;
  padding:0;
  width:65px;
  height:65px;
  transition:transform .16s,filter .16s;
  flex-shrink:0
}
.image-button img {
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none
}
.image-button:hover:not(:disabled) {
  transform:translateY(-3px) scale(1.05);
  filter:brightness(1.08)
}
.plain-button {
  background:var(--cream);
  color:#6d4527;
  border:3px solid var(--gold);
  border-radius:16px;
  box-shadow:0 4px 0 #986c3e;
  font-size:35px;
  width:52px;
  height:52px
}
.brand {
  position:absolute;
  left:40px;
  top:14px;
  font-size:12px;
  letter-spacing:3px;
  font-weight:800;
  color:#fff8df;
  text-shadow:0 2px 3px #215f4277
}
.brand span {
  font-size:9px;
  letter-spacing:5px;
  margin-left:7px
}
.title-wordmark {
  position:absolute;
  top:65px;
  left:420px;
  width:820px;
  text-align:center;
  filter:drop-shadow(0 8px 0 #1c754b) drop-shadow(0 0 1px #67401c)
}
.title-wordmark p {
  font-size:140px;
  line-height:1.08;
  font-weight:1000;
  letter-spacing:10px;
  margin:0;
  color:#fff6d9;
  -webkit-text-stroke:2px #e5be74;
  text-shadow:0 4px 0 #dbc38f,0 -2px 0 white
}
.title-wordmark h1 {
  font-size:103px;
  font-weight:1000;
  letter-spacing:8px;
  line-height:1.15;
  margin:4px 0;
  color:#ffe49d;
  -webkit-text-stroke:1px #af6d35;
  text-shadow:0 4px 0 #bf783e,0 -2px 0 #fff9d7
}
.title-wordmark h1 span {
  font-size:70px;
  color:#ffbc90
}
.title-subline {
  display:inline-block;
  margin-top:28px;
  padding:9px 27px;
  border-radius:30px;
  background:#fff5dbed;
  color:#537554;
  font-size:16px;
  font-weight:700;
  letter-spacing:3px;
  text-shadow:none
}
.title-mascot {
  position:absolute;
  width:480px;
  height:480px;
  object-fit:contain;
  left:95px;
  bottom:10px;
  filter:drop-shadow(0 17px 8px #275f453c);
  animation:mascot-float 4s ease-in-out infinite
}
.title-actions {
  position:absolute;
  left:760px;
  right:150px;
  top:475px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:14px
}
.continue-actions { grid-column:1 / -1; display:flex; gap:12px; }
.continue-actions .secondary-button { flex:1; min-width:0; padding:10px 8px; font-size:17px; }
.title-actions>.secondary-button { width:100%; min-width:0; padding:12px 8px; font-size:21px; }
.primary-button {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  min-height:83px;
  min-width:340px;
  padding:12px 30px;
  border:5px solid #fff2c9;
  border-radius:27px;
  background:linear-gradient(#ffb34f,#ff792a 45%,#f65d20);
  color:#fffaf0;
  box-shadow:0 0 0 2px #e9b367,0 7px 0 #b77435,0 11px 15px #5d441e37,inset 0 3px 0 #fff4bd80,inset 0 -3px 0 #d44d2280;
  text-shadow:0 3px 1px #be542b;
  font-size:30px;
  font-weight:900;
  letter-spacing:2px;
  transition:transform .15s,filter .15s
}
.primary-button img {
  width:51px;
  height:51px;
  object-fit:contain;
  pointer-events:none
}
.primary-button:hover:not(:disabled) {
  transform:translateY(-3px);
  filter:brightness(1.08)
}
.primary-button:active:not(:disabled) {
  transform:translateY(3px)
}
.title-actions>.primary-button {
  grid-column:1 / -1;
  width:100%;
  font-size:38px;
  min-height:100px
}
.secondary-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 27px;
  min-height:49px;
  border:3px solid #ecc68c;
  background:linear-gradient(#fffaf0,#fff0ca);
  border-radius:18px;
  color:#73452b;
  font-size:18px;
  font-weight:800;
  box-shadow:0 4px 0 #b77b47,0 6px 12px #5c3c2427;
  transition:transform .15s
}
.secondary-button img {
  width:36px;
  height:36px
}
.secondary-button:hover {
  transform:translateY(-2px)
}
.title-footer {
  position:absolute;
  bottom:7px;
  left:530px;
  right:55px;
  text-align:center;
  font-size:14px;
  letter-spacing:2px;
  font-weight:700;
  color:#f8f5d7;
  text-shadow:0 2px 4px #164b37
}
.storage-warning {
  position:absolute;
  bottom:49px;
  left:650px;
  right:80px;
  text-align:center;
  font-size:14px;
  color:#673d26;
  background:#fff8dfed;
  border-radius:15px;
  padding:10px
}
.floating-tile {
  position:absolute;
  width:85px;
  height:113px;
  background:linear-gradient(130deg,#fffdf1,#eddfb8);
  border:3px solid #fff3d0;
  box-shadow:3px 7px 0 #d6b87c,4px 11px 0 #a5b78b,9px 17px 18px #395d3444;
  border-radius:14px;
  font:700 64px "Yu Mincho",serif;
  display:grid;
  place-items:center;
  pointer-events:none;
  animation:tile-float 5s ease-in-out infinite
}
.tile-red {
  left:330px;
  top:170px;
  color:#c93822;
  transform:rotate(-14deg)
}
.tile-east {
  right:70px;
  top:295px;
  color:#174d72;
  transform:rotate(17deg);
  animation-delay:-2.4s
}
.plaque {
  display:inline-block;
  border:4px solid #dba669;
  border-radius:28px;
  background:linear-gradient(#fffdf0,#fff0c9);
  box-shadow:0 0 0 3px #fff9df,0 6px 0 #a96d40,0 8px 15px #3f452f30,inset 0 3px 0 white;
  color:#674023;
  font-weight:900;
  letter-spacing:2px;
  margin:0
}
.plaque:before,.plaque:after {
  content:"❧";
  display:inline-block;
  color:#66a85b;
  padding:0 14px
}
.back-button {
  position:absolute;
  left:35px;
  top:28px
}
.mode-heading {
  position:absolute;
  top:35px;
  left:360px;
  right:240px;
  text-align:center;
  font-size:34px;
  padding:13px 15px
}
.mode-cards {
  position:absolute;
  left:218px;
  right:218px;
  top:144px;
  display:flex;
  gap:50px
}
.mode-card {
  position:relative;
  flex:1;
  min-width:0;
  height:360px;
  border:6px solid #fff2c9;
  border-radius:32px;
  overflow:hidden;
  padding:0;
  background:linear-gradient(#fff6df,#ffebbf);
  box-shadow:0 0 0 3px #c8a178,0 9px 0 #ac7a4e,0 14px 20px #31503630;
  transition:transform .2s,box-shadow .2s
}
.mode-card.selected {
  box-shadow:0 0 0 5px #ff9b37,0 9px 0 #c7732c,0 0 35px #fff7bf99;
  transform:translateY(-4px)
}
.mode-card:hover {
  transform:translateY(-6px)
}
.mode-art {
  display:flex;
  align-items:flex-end;
  justify-content:center;
  position:relative;
  height:230px;
  margin:8px 8px 0;
  border-radius:22px;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 90%,#73be93,#d5edd0 70%)
}
.mode-art img {
  position:relative;
  width:235px;
  height:235px;
  object-fit:contain;
  filter:drop-shadow(0 7px 3px #294e3f25)
}
.mini-tile {
  position:absolute;
  right:68px;
  bottom:14px;
  background:#fff9df;
  border:3px solid #e9ca8d;
  border-radius:12px;
  padding:0 9px;
  color:#cf3520;
  font:60px "Yu Mincho",serif;
  transform:rotate(12deg);
  box-shadow:3px 5px 0 #bd9c62
}
.duel-art {
  background:radial-gradient(ellipse at 50% 90%,#f2bb8e,#f8e4c0 70%)
}
.duel-art img {
  width:49%;
  height:210px
}
.duel-art b {
  position:absolute;
  font-size:41px;
  bottom:25px;
  left:41%;
  z-index:2;
  color:#fff9da;
  -webkit-text-stroke:1px #a65d28;
  text-shadow:0 4px #ac722f
}
.mode-label {
  display:block;
  font-size:30px;
  letter-spacing:1px;
  font-weight:1000;
  color:#fff9e7;
  background:linear-gradient(#ff9e3d,#f46d28);
  margin:8px 11px 0;
  border:3px solid #ffc778;
  border-radius:20px;
  padding:11px 2px;
  text-shadow:0 2px #a94e28
}
.duel-card .mode-label {
  background:linear-gradient(#2db7ab,#078e8c);
  border-color:#7bd7c0;
  text-shadow:0 2px #156862
}
.mode-card>small {
  display:block;
  font-size:13px;
  margin-top:8px;
  font-weight:700;
  color:#79613c
}
.selected-mark {
  position:absolute;
  right:18px;
  top:16px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  background:#ff9b37;
  color:white;
  border:3px solid #fff4cd;
  border-radius:50%;
  font-size:23px;
  font-weight:900;
  opacity:0
}
.selected .selected-mark {
  opacity:1
}
.layout-picker {
  position:absolute;
  top:548px;
  left:105px;
  right:105px;
  display:flex;
  gap:15px
}
.layout-choice {
  position:relative;
  flex:1;
  min-width:0;
  padding:9px 8px 12px;
  border:3px solid #e2b77b;
  border-radius:17px;
  background:linear-gradient(#ead8b3,#dec497);
  box-shadow:0 4px 0 #a67647;
  text-align:center;
  transition:background .15s,box-shadow .15s,transform .15s
}
.difficulty-label { display:block; margin-bottom:4px; font-size:12px; font-weight:900; color:#785836; }
.layout-choice:hover { transform:translateY(-2px); }
.layout-choice strong {
  display:block;
  font-size:20px;
  font-weight:900
}
.layout-choice small {
  display:block;
  font-size:12px;
  margin-top:5px;
  color:#8b7654
}
.layout-choice.selected {
  background:linear-gradient(#fffef2,#fff4c1);
  border-color:#ff9a35;
  color:#7a4b21;
  box-shadow:0 0 0 3px #fff8db,0 5px 0 #c67b31,0 0 24px #fff4adbd;
  transform:translateY(-4px)
}
.layout-choice.selected:after { content:'✓'; position:absolute; right:9px; top:8px; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#ff942e; color:#fff; font-weight:900; font-size:16px; }
.layout-choice.selected small { color:#765831; }
.layout-description { position:absolute; top:660px; left:330px; right:330px; margin:0; padding:7px 12px; border-radius:16px; background:#fff9e5f0; color:#6f5837; text-align:center; font-size:15px; font-weight:700; }
.begin-button {
  position:absolute;
  top:716px;
  left:540px;
  min-height:73px;
  font-size:25px
}
.offline-button {
  position:absolute;
  bottom:61px;
  left:32px;
  background:#fff9e5eb;
  border:2px solid #d8bf8b;
  border-radius:14px;
  padding:10px 17px;
  font-size:13px;
  font-weight:700;
  max-width:310px
}
.offline-status {
  position:absolute;
  bottom:15px;
  left:33px;
  max-width:330px;
  font-size:11px;
  line-height:1.5;
  color:#fff9df;
  text-shadow:0 1px 3px #235940;
  font-weight:700
}
.player-panel {
  position:absolute;
  top:25px;
  z-index:6;
  width:300px;
  min-height:128px;
  border:5px solid #fff2cb;
  border-radius:28px;
  background:linear-gradient(#ffb257,#ff7c34);
  box-shadow:0 0 0 2px #e1af67,0 6px 0 #b77c44,0 9px 15px #2b543744;
  color:#fff9eb;
  display:flex;
  align-items:center;
  gap:9px;
  padding:13px 12px
}
.player-one {
  left:32px
}
.player-two {
  right:32px;
  background:linear-gradient(#49cae0,#178ebc);
  box-shadow:0 0 0 2px #99dce3,0 6px 0 #3c7789,0 9px 15px #2b543744
}
.avatar-circle {
  position:relative;
  overflow:hidden;
  flex:none;
  width:77px;
  height:77px;
  background:#ffedc2;
  border:3px solid #ffd597;
  border-radius:50%
}
.avatar-circle img {
  position:absolute;
  width:110px;
  height:110px;
  object-fit:contain;
  top:-7px;
  left:-19px
}
.player-two .avatar-circle {
  background:#dff5f7;
  border-color:#ace1e7
}
.player-panel-content {
  flex:1;
  min-width:0
}
.player-label {
  display:block;
  font-size:20px;
  font-weight:1000;
  letter-spacing:1px;
  text-shadow:0 2px #82493155
}
.player-panel-content small {
  display:block;
  font-size:11px;
  font-weight:700;
  margin:1px 0 3px
}
.player-panel-content strong {
  display:block;
  font-size:34px;
  font-variant-numeric:tabular-nums;
  font-weight:1000;
  line-height:1.1;
  text-shadow:0 2px 0 #79533255;
  white-space:nowrap;
  letter-spacing:1px
}
.stage[data-mode="duel"] .player-panel {
  min-height:134px
}
.stage[data-mode="duel"] .player-panel-content strong {
  font-size:30px
}
.stage[data-mode="duel"] .avatar-circle {
  width:64px;
  height:64px
}
.stage[data-mode="duel"] .avatar-circle img {
  width:94px;
  height:94px;
  top:-8px;
  left:-16px
}
.player-panel.active {
  box-shadow:0 0 0 4px #ffdd73,0 6px 0 #b77c44,0 0 35px #fff0a28a
}
.active-label {
  position:absolute;
  bottom:-19px;
  left:65px;
  right:25px;
  border:3px solid #fff2cb;
  border-radius:20px;
  padding:3px 8px;
  background:#ffe294;
  color:#79441f;
  font-size:17px;
  font-weight:1000;
  text-align:center;
  box-shadow:0 3px 0 #b78043
}
.center-heading {
  position:absolute;
  top:27px;
  left:397px;
  right:397px;
  text-align:center;
  z-index:7
}
.center-heading h2 {
  font-size:24px;
  letter-spacing:1px;
  padding:8px 0;
  white-space:nowrap
}
.center-heading h2:before,.center-heading h2:after {
  padding:0 8px;
  font-size:18px
}
.remaining-pill {
  display:block;
  width:230px;
  margin:12px auto 0;
  padding:5px 10px;
  border:3px solid #e6bc7d;
  border-radius:21px;
  background:#fff5d7;
  font-size:16px;
  font-weight:900;
  box-shadow:0 3px #a77745
}
.remaining-pill strong {
  font-size:30px;
  font-variant-numeric:tabular-nums
}
.mode-badge {
  display:block;
  font-size:10px;
  color:#fff8df;
  font-weight:900;
  letter-spacing:2px;
  margin-top:8px;
  text-shadow:0 2px 2px #28644b
}
.board-frame {
  position:absolute;
  left:133px;
  right:133px;
  top:174px;
  height:538px;
  background:radial-gradient(ellipse at 50% 30%,#74c79e,#3c9875 80%);
  border:9px solid #d28e52;
  border-radius:35px;
  box-shadow:0 0 0 4px #ffdea3,inset 0 0 0 4px #267456,inset 0 0 50px #145f4533,0 12px 0 #8b623d,0 19px 30px #144d3a55;
  isolation:isolate
}
.board-frame:before {
  content:"";
  position:absolute;
  inset:9px;
  border:2px solid #a0dcc044;
  border-radius:23px;
  pointer-events:none
}
.board {
  position:absolute;
  inset:0;
  isolation:isolate
}
.board.covered {
  visibility:hidden
}
.tile {
  position:absolute;
  background:linear-gradient(125deg,#fff9df,#eadbb8);
  border:2px solid #fff6d6;
  border-radius:8px;
  box-shadow:1px 3px 0 #d9be87,2px 6px 0 #afc18c,3px 9px 0 #6c9b70,4px 11px 5px #17422e88;
  padding:2px;
  transform-origin:center;
  transition:filter .18s,box-shadow .18s;
  contain:layout style
}
.tile-art {
  display:block;
  width:100%;
  height:100%;
  border-radius:5px;
  background:url('assets/mahjong-atlas.png') no-repeat var(--atlas-x) var(--atlas-y)/600% 600%;
  pointer-events:none
}
.tile-name {
  position:absolute;
  bottom:3px;
  left:3px;
  right:3px;
  text-align:center;
  color:#2f654c;
  background:#fff8e2d1;
  font:8px "Yu Mincho",serif;
  line-height:10px;
  border-radius:2px;
  pointer-events:none
}
.tile.blocked {
  filter:brightness(.81) saturate(.75);
  cursor:default
}
.tile.free:hover {
  filter:brightness(1.1);
  box-shadow:0 0 0 3px #ffe590,0 0 24px #fff5b47a,1px 4px 0 #c6be86,3px 9px 0 #659362
}
.tile.selected {
  filter:brightness(1.12);
  box-shadow:0 0 0 4px #ffcd35,0 0 0 7px #fff4a288,0 0 35px #fff1a4a6,2px 7px 0 #90a56c;
  z-index:1500!important
}
.tile.selected:after {
  content:"";
  position:absolute;
  inset:-8px;
  border:2px solid #fff1a8;
  border-radius:11px;
  animation:selection-breathe 1.3s infinite
}
.tile.free.hinted {
  z-index:1600!important;
  filter:brightness(1.25) saturate(1.12);
  box-shadow:0 0 0 5px #fff18b,0 0 0 9px #f9b72ae6,0 0 35px 12px #fff1a5,2px 7px 0 #90a56c;
  animation:hint-glow 1s ease-in-out infinite;
  animation-delay:0s
}
.tile.hinted:before { content:''; position:absolute; inset:0; border-radius:9px; background:linear-gradient(135deg,#fffce940,transparent 60%); border:3px solid #fffbd1; pointer-events:none; }
.tile.invalid {
  animation:tile-shake .3s
}
.tile.dealing {
  animation:deal-in .52s cubic-bezier(.1,.7,.2,1) backwards;
  animation-delay:var(--delay)
}
.combo-display {
  position:absolute;
  right:25px;
  top:17px;
  z-index:1700;
  pointer-events:none;
  opacity:0;
  text-align:right;
  color:#fff1ad;
  text-shadow:0 3px #a06a2c,0 0 15px #ffd171
}
.combo-display small {
  display:block;
  font-size:13px;
  letter-spacing:2px;
  font-weight:900
}
.combo-display strong {
  font-size:27px;
  font-weight:1000
}
.combo-display strong>span {
  font-size:48px
}
.combo-display.show {
  animation:combo-pop 1.8s both
}
.match-label {
  position:absolute;
  left:50%;
  top:35%;
  font-size:43px;
  font-weight:1000;
  color:#fff1ab;
  text-shadow:0 3px #92652b,0 0 20px #fff1a4;
  opacity:0;
  z-index:1750;
  pointer-events:none;
  white-space:nowrap
}
.match-label.show {
  animation:score-float 1s both
}
.game-footer {
  position:absolute;
  left:28px;
  right:28px;
  bottom:37px;
  height:65px;
  display:flex;
  gap:10px;
  align-items:center
}
.solo-tools {
  display:flex;
  gap:7px;
  align-items:center
}
.tool-button {
  display:flex;
  align-items:center;
  gap:4px;
  padding:3px 8px 3px 2px;
  background:#fff4dbee;
  border:2px solid #e4c48f;
  border-radius:17px;
  box-shadow:0 4px #a97c4e;
  color:#795031;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  transition:transform .15s
}
.tool-button img {
  width:48px;
  height:48px;
  object-fit:contain;
  pointer-events:none
}
.tool-button kbd {
  font:10px Georgia,serif;
  color:#a28b62;
  border:1px solid #d9bf8f;
  border-radius:4px;
  padding:1px 3px;
  margin-left:3px
}
.tool-button:hover:not(:disabled) {
  transform:translateY(-2px)
}
.status-plaque {
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  font-size:13px;
  font-weight:800;
  color:#604b29;
  line-height:1.4;
  text-align:center;
  padding:7px 10px;
  border:3px solid #ddb575;
  border-radius:19px;
  background:#fff5dfed;
  box-shadow:0 4px 0 #a77949
}
.text-button {
  padding:9px 12px;
  border-radius:13px;
  background:#ffefd5ed;
  border:2px solid #debb83;
  font-weight:800;
  color:#926442;
  white-space:nowrap
}
.save-label {
  position:absolute;
  bottom:3px;
  left:116px;
  right:30px;
  font-size:10px;
  letter-spacing:.5px;
  font-weight:700;
  color:#fff8df;
  text-shadow:0 1px 3px #225538
}
.stage[data-mode="duel"] .status-plaque {
  font-size:19px;
  letter-spacing:1px
}
.stage[data-mode="duel"] .game-footer {
  left:55px;
  right:55px;
  gap:22px
}
.handoff {
  position:absolute;
  inset:0;
  z-index:1800;
  border-radius:23px;
  background:radial-gradient(ellipse at 50% 30%,#fff9e7,#d9f1cf);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  box-shadow:inset 0 0 50px #acc98535;
  overflow:hidden
}
.handoff-player {
  position:absolute;
  top:24px;
  left:28px;
  padding:9px 25px;
  border-radius:20px;
  border:3px solid #fff5d3;
  background:#ff963e;
  color:#fff9e4;
  box-shadow:0 4px #c07a36;
  font-size:26px;
  font-weight:1000;
  letter-spacing:3px
}
.handoff[data-player="1"] .handoff-player {
  background:#1aadb7;
  box-shadow:0 4px #36818c
}
.handoff-character {
  height:160px;
  margin-top:-9px
}
.handoff-character img {
  height:195px;
  width:210px;
  object-fit:contain
}
.handoff h3 {
  font-size:36px;
  color:#476d4c;
  margin:17px 0 4px;
  font-weight:1000
}
.handoff p {
  font-size:17px;
  color:#7c805c;
  margin:8px 0 18px
}
.handoff .primary-button {
  min-height:75px;
  font-size:25px;
  min-width:330px
}
.handoff>small {
  font-size:12px;
  color:#89916c;
  margin-top:21px;
  font-weight:700
}
.toast {
  position:absolute;
  left:50%;
  bottom:112px;
  max-width:1000px;
  transform:translateX(-50%);
  padding:13px 25px;
  background:#fff8e8f5;
  border:3px solid #ddb975;
  border-radius:18px;
  box-shadow:0 5px 0 #a97b48,0 10px 20px #2b50353b;
  color:#6d4b2c;
  font-size:16px;
  font-weight:700;
  z-index:5500;
  text-align:center
}
.modal-layer {
  position:absolute;
  inset:0;
  z-index:3000;
  background:#193e3da6;
  backdrop-filter:blur(7px);
  display:flex;
  align-items:center;
  justify-content:center
}
.modal {
  position:relative;
  width:650px;
  padding:42px 45px 35px;
  border:7px solid #fff4d0;
  border-radius:35px;
  background:linear-gradient(#fff9e8,#fce6bd);
  box-shadow:0 0 0 3px #d9a66e,0 12px 0 #a47243,0 25px 80px #163d3c88;
  text-align:center;
  outline:none;
  animation:modal-in .3s
}
.modal.wide {
  width:840px
}
.modal h2 {
  font-size:32px;
  color:#76502d;
  margin:8px 0 15px;
  font-weight:1000;
  letter-spacing:2px
}
.modal p {
  font-size:17px;
  color:#88734a;
  line-height:1.9;
  margin:12px 0
}
.modal-close {
  position:absolute;
  right:16px;
  top:10px;
  font-size:37px;
  background:transparent;
  color:#b79a6d;
  width:38px;
  height:38px
}
.modal-kicker {
  font-size:11px!important;
  letter-spacing:3px;
  color:#bf9a62!important;
  font-weight:800
}
.modal .primary-button {
  margin:23px auto 0;
  min-height:70px;
  min-width:280px;
  font-size:24px
}
.modal .secondary-button {
  margin:18px auto 0;
  font-size:16px;
  min-height:43px
}
.modal-footnote {
  font-size:12px!important;
  line-height:1.7!important;
  color:#9b8961!important
}
.modal-actions {
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:center;
  margin-top:23px
}
.modal-actions button {
  margin:0!important;
  min-width:190px!important
}
.modal[data-kind="sound"] { width:760px; padding:28px 40px 23px; }
.modal[data-kind="sound"] h2 { margin-bottom:8px; }
.modal .sound-menu-note { font-size:14px; margin:5px 0 17px; }
.bgm-picker { display:flex; align-items:center; gap:15px; text-align:left; font-weight:800; color:#796d46; }
.bgm-picker select { flex:1; min-width:0; padding:12px 10px; border:2px solid #d3ad71; border-radius:12px; background:#fffdf0; color:#6a512f; font:inherit; font-size:17px; }
.modal[data-kind="sound"] .sound-row { margin:18px 0; }
.modal[data-kind="sound"] .primary-button { margin-top:16px; }
.modal[data-kind="sound"] .secondary-button { margin-top:12px; }
.modal[data-kind="ranking"] { padding:25px 30px; }
.modal .ranking-note { font-size:14px; line-height:1.5; margin:8px 0 16px; }
.ranking-tabs { display:flex; gap:8px; margin-bottom:15px; }
.ranking-tabs button { flex:1; min-width:0; border:2px solid #d8b783; border-radius:12px; padding:8px 2px; background:#e9d7b2; color:#765b37; font-size:14px; font-weight:800; }
.ranking-tabs small { display:block; font-size:11px; margin-bottom:4px; }
.ranking-tabs button[aria-pressed="true"] { background:#fffceb; border-color:#ef942c; box-shadow:0 0 0 2px #ffe1a0; color:#884e1a; }
.ranking-records { height:280px; overflow:auto; border:2px solid #e7cf9a; border-radius:14px; background:#fff9e4; }
.ranking-scope-tabs { display:flex; gap:10px; justify-content:center; margin:0 auto 12px; max-width:560px; }
.ranking-scope-tabs button { flex:1; padding:10px 16px; border:2px solid #c5a77a; border-radius:12px; background:#eadbbc; font-size:20px; font-weight:900; }
.ranking-scope-tabs button[aria-selected="true"] { background:#fff9dc; border-color:#ec902c; box-shadow:0 0 0 2px #ffe4a7; }
.ranking-records tr.ranking-you { background:#e6f4db; }
.ranking-records td { overflow-wrap:anywhere; max-width:230px; }
.ranking-records>p { padding-top:90px; }
.ranking-records table { width:100%; border-collapse:collapse; font-size:16px; color:#715732; font-variant-numeric:tabular-nums; }
.ranking-records th { position:sticky; top:0; background:#f4e2b5; padding:9px; font-size:13px; }
.ranking-records td { padding:9px; border-top:1px solid #e4cf9b; }
.ranking-records tbody tr:first-child { background:#fff0b8; font-weight:900; }
.modal .ranking-result { padding:10px; border-radius:12px; background:#fff3cd; font-size:16px; font-weight:800; }
.modal-emblem {
  font-size:56px;
  line-height:1.2;
  color:#e59c40;
  margin-bottom:7px
}
.rules-grid {
  display:flex;
  gap:15px;
  margin:24px 0
}
.rule-card {
  flex:1;
  border:2px solid #e9d0a0;
  border-radius:18px;
  padding:15px 8px;
  background:#fff9e1
}
.rule-card b {
  display:block;
  font:900 32px Georgia,serif;
  color:#dc9a4e
}
.rule-card strong {
  display:block;
  font-size:18px;
  color:#6c6d43;
  margin:9px 0
}
.rule-card small {
  font-size:12px;
  color:#9a8b61;
  line-height:1.8
}
.rules-note {
  text-align:left!important;
  font-size:15px!important;
  background:#edf4d3;
  border:2px solid #d0dbad;
  border-radius:15px;
  padding:13px 19px;
  line-height:1.9!important
}
.sound-row {
  display:flex;
  align-items:center;
  gap:18px;
  margin:25px 0;
  font-size:19px;
  text-align:left;
  font-weight:800;
  color:#796d46
}
.sound-row>span {
  width:85px
}
.sound-row input {
  flex:1;
  accent-color:#ed8c38;
  height:27px;
  cursor:pointer
}
.sound-row output {
  font-size:17px;
  min-width:50px;
  text-align:right
}
.check-row {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  font-size:18px;
  margin:25px 0;
  color:#89744c;
  font-weight:700
}
.check-row input {
  width:23px;
  height:23px;
  accent-color:#ed8c38
}
.result-stars {
  font-size:35px;
  letter-spacing:15px;
  color:#e9b13c;
  text-shadow:0 3px #bd842d
}
.result-stats {
  display:flex;
  gap:30px;
  justify-content:center;
  margin:23px 0;
  padding:18px 5px;
  border-top:2px solid #e7cf9d;
  border-bottom:2px solid #e7cf9d
}
.result-stats span {
  display:block;
  font-size:12px;
  color:#ab925d;
  font-weight:800;
  letter-spacing:2px
}
.result-stats strong {
  display:block;
  font-size:32px;
  margin-top:8px;
  color:#6e5b33;
  font-weight:900
}
.result-player {
  background:#fff8e3;
  border:3px solid #ecc68c;
  border-radius:20px;
  padding:15px 25px;
  min-width:260px
}
.result-player.winner {
  border-color:#e4ac36;
  box-shadow:0 0 0 3px #ffe892;
  background:#fff4c3
}
.scene-loader,.boot-layer {
  position:absolute;
  inset:0;
  z-index:5000;
  background:radial-gradient(ellipse,#daf0cf,#7dc8aa);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  color:#416b4f
}
.scene-loader {
  background:#e5f2d6f5
}
.loader-moon {
  font:110px Georgia;
  color:#fff6c6;
  text-shadow:0 5px #be9c5a;
  animation:loader-breathe 1.6s infinite
}
.boot-layer h2 {
  font-size:45px;
  color:#588459;
  letter-spacing:8px;
  margin:22px 0
}
.boot-layer .brand {
  position:static;
  color:#6b986c;
  font-size:12px;
  text-shadow:none;
  margin-top:18px
}
.boot-layer>p:last-of-type,.scene-loader p {
  font-size:19px;
  font-weight:700
}
.boot-layer .primary-button {
  font-size:22px;
  margin-top:25px
}
.noscript {
  position:absolute;
  inset:0;
  background:#d9efce;
  z-index:8000;
  display:grid;
  place-items:center;
  font-size:25px
}
#effects {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4000
}
.fullscreen-button {
  display:grid;
  place-items:center
}
.ambient-sparkles {
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:radial-gradient(circle at 12% 30%,#fff5b3 0 2px,transparent 3px),radial-gradient(circle at 87% 56%,#fff5b3 0 2px,transparent 3px);
  animation:ambient-breathe 4s infinite
}
@keyframes mascot-float {
  50% {
    transform:translateY(-11px) rotate(-1deg)
  }
}
@keyframes tile-float {
  50% {
    translate:0 -14px
  }
}
@keyframes loader-breathe {
  50% {
    opacity:.45;
    transform:translateY(-7px)
  }
}
@keyframes ambient-breathe {
  50% {
    opacity:.15
  }
}
@keyframes selection-breathe {
  50% {
    opacity:.3;
    transform:scale(1.04)
  }
}
@keyframes hint-glow {
  50% {
    box-shadow:0 0 0 6px #fff9c0,0 0 0 10px #f8c643,0 0 45px 16px #fff9b7;
    filter:brightness(1.4) saturate(1.12)
  }
}
@keyframes tile-shake {
  25% {
    translate:-5px
  }
  75% {
    translate:5px
  }
}
@keyframes deal-in {
  from {
    opacity:0;
    transform:translateY(-65px) rotate(-7deg) scale(.8)
  }
  to {
    opacity:1;
    transform:translateY(0) rotate(0) scale(1)
  }
}
@keyframes combo-pop {
  0% {
    opacity:0;
    transform:scale(.6)
  }
  15%,65% {
    opacity:1;
    transform:scale(1)
  }
  100% {
    opacity:0;
    transform:translateY(-20px)
  }
}
@keyframes score-float {
  0% {
    opacity:0;
    transform:translate(-50%,10px) scale(.7)
  }
  20%,65% {
    opacity:1;
    transform:translate(-50%,-5px) scale(1)
  }
  100% {
    opacity:0;
    transform:translate(-50%,-70px)
  }
}
@keyframes modal-in {
  from {
    opacity:0;
    transform:translateY(15px) scale(.95)
  }
  to {
    opacity:1;
    transform:none
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important
  }
  .ambient-sparkles {
    display:none
  }
}
.sr-only {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important
}
.title-wordmark {
  filter:drop-shadow(0 7px 4px #245a3d41)
}
.title-logo {
  display:block;
  width:100%;
  height:350px;
  object-fit:contain
}
.title-subline {
  margin-top:12px
}
.stage[data-screen="game"] .utilities {
  right:350px;
  top:35px
}
.stage[data-mode="duel"] .player-panel-content strong {
  font-size:34px
}
.viewport {
  /* The scaled logical stage must not scroll when a child receives focus. */
  overflow:clip
}
.sync-button { min-height:54px; padding:8px 13px; border:3px solid #fff4cc; border-radius:16px; background:linear-gradient(#fffce7,#ffe0a5); color:#74502c; font-size:17px; font-weight:900; box-shadow:0 4px 0 #b88748; }
.account-status { position:absolute; right:0; top:61px; width:240px; margin:0; padding:5px 8px; border-radius:9px; color:#725831; background:#fff8e6ed; font-size:11px; line-height:1.5; text-align:right; pointer-events:none; }
.account-status:empty { display:none; }
.stage[data-screen="mode"] .mode-heading { right:275px; }