:root {
  --bg: #fff8f4;
  --bg-2: #f7f1ff;
  --card: #fffdfc;
  --paper: #fffefa;
  --text: #443c52;
  --muted: #8d8398;
  --line: #eadff0;
  --pink: #ff6f91;
  --pink-dark: #e84f78;
  --pink-soft: #ffe8ef;
  --lavender: #9f7eff;
  --lavender-dark: #765bd4;
  --lavender-soft: #eee8ff;
  --peach: #ffad73;
  --peach-soft: #fff0e5;
  --yellow: #ffd86b;
  --yellow-soft: #fff8d8;
  --danger: #e85d72;
  --shadow: 0 18px 48px rgba(91, 70, 111, .13);
  --soft-shadow: 0 9px 24px rgba(91, 70, 111, .09);
  font-family: Pretendard, "Arial Rounded MT Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-width: 320px; min-height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 216, 107, .24), transparent 24%),
    radial-gradient(circle at 86% 12%, rgba(159, 126, 255, .14), transparent 28%),
    radial-gradient(circle at 83% 88%, rgba(255, 111, 145, .12), transparent 25%),
    linear-gradient(145deg, #fffaf6 0%, #f8f3ff 52%, #fff6f8 100%);
}
body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: -1;
  border-radius: 50%;
  filter: blur(1px);
}
body::before { width: 220px; height: 220px; left: -90px; bottom: -70px; background: rgba(255, 173, 115, .12); }
body::after { width: 250px; height: 250px; right: -100px; top: -80px; background: rgba(159, 126, 255, .10); }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
.hidden { display: none !important; }

.app-shell {
  position: relative;
  width: min(97vw, calc(97vh * 16 / 9));
  aspect-ratio: 16 / 9;
  margin: 1.5vh auto;
  padding: clamp(18px, 2.3vw, 34px);
  overflow: auto;
  background: rgba(255, 253, 252, .92);
  border: 2px solid rgba(234, 223, 240, .9);
  border-radius: 32px;
  box-shadow: 0 28px 90px rgba(91, 70, 111, .16);
}
.app-shell::before,
.app-shell::after {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  font-size: clamp(23px, 2.645vw, 38.08px);
  opacity: .55;
}
.app-shell::before { content: "✦"; left: 2.4%; top: 2.2%; color: var(--peach); transform: rotate(-14deg); }
.app-shell::after { content: "✧"; right: 2.6%; bottom: 2.4%; color: var(--lavender); transform: rotate(12deg); }
.app-shell > * { position: relative; z-index: 1; }
body[data-view="game"] .app-shell,
body[data-view="result"] .app-shell {
  overflow: hidden;
  padding: 0;
  background: #fffafc;
}

.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.hero-copy { max-width: 72%; }
.hero-side { display: flex; align-items: center; gap: 14px; }
.hero-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.hero-mascot {
  position: relative;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 28px 28px 32px 32px;
  background: linear-gradient(145deg, var(--yellow-soft), #fff3c0);
  border: 2px solid #ffe49b;
  box-shadow: var(--soft-shadow);
  transform: rotate(3deg);
}
.mascot-face { font-size: 51.52px; line-height: 1; filter: saturate(.9); }
.mascot-spark { position: absolute; right: -7px; top: -12px; color: var(--pink); font-size: 29.12px; transform: rotate(10deg); }
.eyebrow, .step-tag { color: var(--pink-dark); font-size: 13px; font-weight: 950; letter-spacing: .14em; }
h1 { margin: 5px 0 7px; font-size: clamp(33.6px, 5.06vw, 60.48px); line-height: 1; letter-spacing: -.055em; color: #453b56; text-shadow: 0 3px 0 #fff; }
h2 { margin: 5px 0 0; font-size: 26.88px; letter-spacing: -.04em; }
h3 { margin: 0; font-size: 19px; }
.sub, .wizard-head p, .setting-block p, .result-titlebar p { margin: 7px 0 0; color: var(--muted); line-height: 1.55; }

.stepper { display: flex; align-items: center; margin: 0 0 18px; padding: 0 5px; }
.step-dot { width: 90px; border: 0; background: transparent; color: #aaa0b5; display: grid; justify-items: center; gap: 5px; padding: 0; }
.step-dot b {
  width: 34px; height: 34px; border-radius: 13px; display: grid; place-items: center;
  background: #f1ebf4; border: 1px solid #e8deed; font-size: 14px;
  transition: transform .18s ease, background .18s ease;
}
.step-dot span { font-size: 13px; font-weight: 900; white-space: nowrap; }
.step-dot.active { color: var(--pink-dark); }
.step-dot.active b { background: var(--pink); border-color: var(--pink); color: white; box-shadow: 0 6px 16px rgba(255,111,145,.24); transform: translateY(-2px) rotate(-2deg); }
.step-dot.done b { background: var(--lavender-soft); border-color: #d9ccff; color: var(--lavender-dark); }
.step-line { height: 3px; flex: 1; min-width: 10px; border-radius: 999px; background: #eee6f1; margin-bottom: 18px; }

.card {
  background: rgba(255,255,255,.96);
  border: 2px solid #f0e5f2;
  border-radius: 28px;
  padding: clamp(22px, 2.4vw, 32px);
  box-shadow: var(--shadow);
}
.wizard-card { min-height: 400px; }
.wizard-head { max-width: 720px; }

.count-stepper { width: min(330px,100%); margin: 34px auto 0; display: grid; grid-template-columns: 72px 1fr 72px; align-items: center; gap: 13px; }
.count-control {
  height: 64px; border: 2px solid #eadff0; border-radius: 23px; background: #fff;
  color: #635873; font-size: 33.6px; font-weight: 950; transition: .16s;
  box-shadow: 0 7px 0 #f1e8f4;
}
.count-control:hover:not(:disabled) { transform: translateY(-2px); border-color: #ffc2d1; background: var(--pink-soft); color: var(--pink-dark); }
.count-control:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 3px 0 #f1e8f4; }
.count-value {
  height: 80px; display: grid; place-items: center; border-radius: 26px;
  background: linear-gradient(145deg, #fff1f5, #f3edff); border: 3px solid #ffc1d1;
  color: var(--pink-dark); font-size: 44.8px; font-weight: 950; box-shadow: inset 0 0 0 5px rgba(255,255,255,.58), 0 10px 24px rgba(255,111,145,.12);
}
.count-help { margin: 13px 0 0; text-align: center; color: var(--muted); font-size: 14px; }

.last-settings-badge {
  width: fit-content; max-width: 100%; margin: 14px auto 0; padding: 9px 14px; border-radius: 999px;
  border: 2px solid #eadff0; background: linear-gradient(145deg, #fff8fb, #f5f0ff);
  color: #756a80; font-size: 14px; font-weight: 900; text-align: center;
}

.mode-switch-panel {
  margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px; border: 2px solid #eadff0; border-radius: 28px;
  background: linear-gradient(145deg, #fffdfb, #f9f5ff); box-shadow: 0 8px 0 #f1eaf4;
}
.mode-current { display: flex; align-items: center; gap: 16px; min-width: 0; }
.mode-current .mode-icon { margin: 0; flex: 0 0 auto; }
.mode-current strong { display: block; margin-top: 3px; font-size: 24.64px; color: #51465f; }
.mode-current p { margin: 5px 0 0; color: var(--muted); font-size: 16px; }
.mode-kicker { color: var(--pink-dark); font-size: 13px; font-weight: 950; letter-spacing: .08em; }
.mode-toggle-btn {
  flex: 0 0 auto; border: 2px solid #dcd0ef; border-radius: 17px; padding: 13px 17px;
  background: var(--lavender-soft); color: var(--lavender-dark); font-weight: 950; box-shadow: 0 5px 0 #ddd3f5;
  transition: .15s;
}
.mode-toggle-btn:hover { transform: translateY(-2px); background: #e7dfff; }
.mode-toggle-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #ddd3f5; }
.mode-toggle-btn.custom-active { background: var(--yellow-soft); color: #886b19; border-color: #f1dda0; box-shadow: 0 5px 0 #eadbaf; }

.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.mode-card {
  min-height: 178px; border: 2px solid #eadff0; border-radius: 27px; background: #fff;
  padding: 25px; display: grid; justify-items: start; align-content: center; text-align: left;
  transition: .18s; box-shadow: 0 7px 0 #f4edf6;
}
.mode-card:hover { transform: translateY(-3px) rotate(-.3deg); box-shadow: 0 12px 26px rgba(91,70,111,.10); }
.mode-card.active { border-color: #ffb6c8; background: linear-gradient(145deg, #fff4f7, #f8f4ff); box-shadow: 0 8px 0 #ffe2e9, 0 16px 30px rgba(255,111,145,.10); }
.mode-icon {
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 20px;
  font-size: 35.84px; margin-bottom: 13px; background: var(--yellow-soft); border: 1px solid #ffe8a7;
}
.mode-card:nth-child(2) .mode-icon { background: var(--lavender-soft); border-color: #ded3ff; }
.mode-title { font-weight: 950; font-size: 22px; margin-bottom: 6px; }
.mode-desc { color: var(--muted); line-height: 1.5; }

.setting-block {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 25px; padding: 19px;
  border: 2px solid #f0e6f2; border-radius: 22px; background: linear-gradient(145deg, #fffdfa, #fcf8ff);
}
.segmented { display: flex; padding: 5px; border-radius: 17px; background: #f1eaf4; flex: 0 0 auto; }
.segment { min-width: 72px; border: 0; background: transparent; border-radius: 13px; padding: 9px 13px; font-weight: 900; color: var(--muted); }
.segment.active { background: white; color: var(--pink-dark); box-shadow: 0 4px 12px rgba(91,70,111,.10); }
.field-block { display: grid; gap: 8px; margin-top: 18px; }
.field-block > span { font-size: 16px; font-weight: 900; color: #62576d; }
input { width: 100%; border: 2px solid #eadff0; border-radius: 16px; padding: 13px 14px; outline: none; transition: .15s; background: #fffdfd; color: var(--text); }
input:focus { border-color: #ffb2c5; box-shadow: 0 0 0 4px rgba(255,111,145,.10); }
.result-preview-wrap { margin-top: 23px; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 21px 0 11px; }
.result-list, .result-input-list { display: grid; gap: 9px; }
.result-row {
  display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 10px; min-height: 50px;
  border: 2px solid #f0e6f2; background: #fffdfd; border-radius: 17px; padding: 6px 12px 6px 7px;
}
.result-row .line-num, .result-input-row .line-num {
  width: 35px; height: 35px; display: grid; place-items: center; border-radius: 13px;
  background: var(--lavender-soft); color: var(--lavender-dark); font-size: 13px; font-weight: 950;
}
.result-row .result-text { font-weight: 900; }
.result-row .result-text.chicken { color: #cf762b; }
.result-row .result-text.penalty { color: var(--danger); }
.result-input-row { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 9px; }

.wizard-actions { display: flex; gap: 10px; margin-top: 28px; }
.wizard-actions.end { justify-content: flex-end; }
.wizard-actions.split { justify-content: space-between; }
.primary-btn, .secondary-btn, .ghost-btn, .tiny-btn, .icon-btn { border: 0; font-weight: 900; transition: .15s; }
.primary-btn {
  min-width: 145px; padding: 13px 18px; border-radius: 16px; background: linear-gradient(135deg, var(--pink), #ff8ca7); color: white;
  box-shadow: 0 7px 0 #d94f71, 0 11px 20px rgba(255,111,145,.18);
}
.primary-btn:hover { transform: translateY(-2px); filter: saturate(1.05); }
.primary-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #d94f71; }
.secondary-btn { padding: 12px 15px; border-radius: 15px; background: #f2ecf5; color: #62576c; box-shadow: 0 5px 0 #e4dae9; }
.secondary-btn:hover { background: #eee5f2; transform: translateY(-1px); }
.ghost-btn { padding: 10px 13px; border-radius: 14px; background: rgba(255,255,255,.75); color: #756a80; border: 2px solid #eadff0; }
.ghost-btn:hover { background: #fff4f7; border-color: #ffc6d4; color: var(--pink-dark); }
.tiny-btn { padding: 8px 11px; border-radius: 12px; background: var(--lavender-soft); color: var(--lavender-dark); font-size: 14px; }
.tiny-btn:hover { transform: translateY(-1px); background: #e8e0ff; }
.icon-btn { width: 36px; height: 36px; border-radius: 13px; background: #f3edf5; font-size: 25.76px; line-height: 1; color: #796e82; }

/* 16:9 game layout */
.game-screen { width: 100%; height: 100%; position: relative; background: #fff9fb; }
.game-titlebar {
  height: 11%; min-height: 64px; padding: 0 2.6%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  border-bottom: 2px solid #f0e4ef; background: rgba(255,253,253,.97);
}
.game-title-group { display: flex; align-items: center; gap: 13px; }
.title-mascot {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 16px;
  background: var(--yellow-soft); border: 1px solid #ffe3a0; font-size: 32.48px; transform: rotate(-3deg);
}
.game-title-group h2 { margin: 0; font-size: clamp(31.36px, 3.105vw, 44.8px); }
.game-status { padding: 8px 12px; border-radius: 999px; background: var(--lavender-soft); color: var(--lavender-dark); font-size: 16px; font-weight: 950; letter-spacing: .11em; }
.title-actions { display: flex; gap: 7px; }
.title-btn { border: 2px solid #eee3ef; border-radius: 14px; padding: 10px 14px; background: #fff; color: #756a80; font-size: 18px; font-weight: 900; }
.title-btn:hover { background: var(--pink-soft); border-color: #ffc4d2; color: var(--pink-dark); }
.sound-toggle { min-width: 124px; }
.sound-toggle.muted { background: #f4eef6; color: #9a8da3; border-color: #e5dbe8; }
.sound-toggle:active { transform: translateY(1px); }

.playfield {
  position: relative; width: 100%; height: 89%; overflow: hidden;
  background:
    radial-gradient(circle at 8% 18%, rgba(255,216,107,.18), transparent 18%),
    radial-gradient(circle at 92% 82%, rgba(159,126,255,.13), transparent 22%),
    linear-gradient(180deg, #fffafb 0%, #f8f2ff 100%);
}
.playfield::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(rgba(255,111,145,.16) 1.1px, transparent 1.1px);
  background-size: 24px 24px;
}

.ladder-paper {
  position: absolute; left: 50%; top: 50%; width: calc(100% - 18px); height: calc(100% - 14px);
  transform: translate(-50%, -50%);
  border: 2px solid #eadcf0; border-radius: 24px;
  background:
    repeating-linear-gradient(to bottom, rgba(159,126,255,.065) 0, rgba(159,126,255,.065) 1px, transparent 1px, transparent 28px),
    linear-gradient(180deg, #fffefa 0%, #fffafd 100%);
  box-shadow: 0 16px 34px rgba(91,70,111,.14);
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(8px, .8vw, 12px) clamp(11px, 1.1vw, 17px);
  z-index: 2;
}
.paper-topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; }
.blind-title { display: flex; align-items: center; gap: 10px; min-width: 0; color: #8b8095; }
.blind-title strong { color: #5f5469; font-size: 19px; letter-spacing: .10em; }
.blind-title > span:last-child { font-size: 18px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blind-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--peach); box-shadow: 0 0 0 5px rgba(255,173,115,.14); flex: 0 0 auto; }
.ladder-toggle-btn {
  border: 0; border-radius: 15px; padding: 11px 16px; background: #554a65; color: #fff; font-size: 19px; font-weight: 900;
  box-shadow: 0 5px 0 #3d3548;
}
.ladder-toggle-btn:hover { background: #493f58; transform: translateY(-1px); }
.ladder-toggle-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #3d3548; }

.board-wrap { min-height: 0; overflow-x: auto; overflow-y: hidden; }
.board-inner { height: 100%; min-width: 620px; display: grid; grid-template-rows: 100px 1fr 60px; position: relative; }
.label-row { position: relative; height: 60px; }
.top-labels { height: 100px; }
.top-label-stack {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: var(--name-width, 88px);
  z-index: 2;
}
.player-name-input {
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 5px 6px;
  border: 2px solid #e8dfea;
  border-radius: 11px;
  outline: none;
  background: rgba(255,255,255,.96);
  color: #554a65;
  text-align: center;
  font-size: 14px;
  font-weight: 850;
  box-shadow: 0 3px 0 rgba(99,82,116,.06);
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.player-name-input::placeholder { color: #b4a9b9; font-weight: 750; }
.player-name-input:focus {
  border-color: #b7a8c4;
  background: #fff;
  box-shadow: 0 3px 0 rgba(99,82,116,.08), 0 0 0 4px rgba(159,126,255,.10);
}
.top-label-stack .label-chip {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  min-width: 52px;
}
.top-label-stack .label-chip:hover,
.top-label-stack .label-chip.active { transform: translateY(-2px); }
.top-label-stack .label-chip.played:hover,
.top-label-stack .label-chip.played.active { transform: translateY(-2px); }
#ladderCanvas { display: block; width: 100%; height: 100%; min-height: 150px; }
.label-chip {
  position: absolute; top: 50%; transform: translate(-50%, -50%); min-width: 52px; max-width: 150px; padding: 10px 13px;
  border: 2px solid #e4dce9;
  border-radius: 17px; text-align: center; font-size: 19px; font-weight: 950; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: .16s; box-shadow: 0 4px 0 rgba(99,82,116,.08);
  color: #51475f; background: #fffafd;
}
.bottom-labels .label-chip { color: #665a6e; background: #fffdfb; }
.label-chip:hover, .label-chip.active {
  border-color: #b9acc5 !important; background: #f5eff8 !important;
  color: #443c52 !important; transform: translate(-50%, calc(-50% - 2px));
}
.label-chip.played {
  border-color: var(--played-color, #b9acc5) !important;
  background: var(--played-bg, #f1ebf5) !important;
  color: var(--played-color, #443c52) !important;
  box-shadow: 0 5px 0 var(--played-shadow, rgba(99,82,116,.11));
}
.label-chip.played:hover,
.label-chip.played.active {
  border-color: var(--played-color, #b9acc5) !important;
  background: var(--played-bg, #f1ebf5) !important;
  color: var(--played-color, #443c52) !important;
}
.label-chip.played::after{content:none!important;}

.paper-footer { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 2px dashed #eee2ef; padding-top: 7px; }
.result-toast { min-width: 0; color: #756b7e; font-size: 19px; font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result-toast.show { color: var(--pink-dark); }
.result-toast.playing { color: #c77239; }
.paper-actions { display: flex; gap: 8px; flex-wrap: nowrap; }
.paper-btn { border: 0; background: transparent; color: #74697e; padding: 10px 12px; border-radius: 12px; font-size: 17px; font-weight: 900; white-space: nowrap; }
.paper-btn:hover { background: #f5edf6; color: #5a4f65; }
.paper-btn.strong { color: #fff; background: var(--pink); box-shadow: 0 4px 0 #d94f71; }
.paper-btn.strong:hover { background: var(--pink-dark); }

/* Separate result screen */
.result-screen { width: 100%; height: 100%; display: grid; grid-template-rows: auto 1fr; background: linear-gradient(145deg, #fff9fb, #f7f2ff); }
.result-titlebar { padding: 3.2% 4%; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 2px solid #efe4ef; background: rgba(255,255,255,.95); }
.result-titlebar h2 { margin-top: 4px; font-size: clamp(28px, 3.68vw, 48.16px); }
.result-actions { display: flex; gap: 8px; }
.result-board { min-height: 0; overflow: auto; padding: 3% 4%; }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 13px; }
.summary-item {
  position: relative; overflow: hidden; border: 2px solid #e9e0ed; border-radius: 22px;
  background: linear-gradient(145deg, #fffafd, #fff); padding: 17px;
  box-shadow: 0 8px 0 #f2ebf4, 0 12px 24px rgba(91,70,111,.07);
}
.summary-item::after { content: "✦"; position: absolute; right: 12px; top: 9px; color: #ffd06a; opacity: .75; }
.summary-item .who { color: var(--muted); font-size: 13px; font-weight: 900; margin-bottom: 7px; }
.summary-item .what { font-size: 22px; font-weight: 950; color: #554a65; }
.summary-item .line { margin-top: 6px; font-size: 12px; color: #aaa0b0; }

.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 18px; background: rgba(65,52,76,.42); backdrop-filter: blur(6px); }
.modal-card { width: min(480px, 96vw); max-height: 86vh; overflow: auto; border: 2px solid #eee2ef; border-radius: 27px; background: #fffdfd; padding: 24px; box-shadow: 0 28px 90px rgba(65,52,76,.26); }
.wide-modal { width: min(720px, 96vw); }
.modal-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.modal-note { margin: 14px 0 0; padding: 12px 13px; border-radius: 15px; background: linear-gradient(145deg, #fff2f6, #f3efff); color: #776b80; font-size: 13px; line-height: 1.55; }
.modal-actions { display: flex; justify-content: flex-end; margin-top: 20px; }
.saved-list { display: grid; gap: 10px; margin-top: 16px; }
.saved-item { display: flex; align-items: center; justify-content: space-between; gap: 15px; border: 2px solid #eee3ef; border-radius: 17px; padding: 13px; background: #fff; }
.saved-name { font-weight: 950; }
.saved-meta { margin-top: 4px; color: var(--muted); font-size: 13px; }
.saved-actions { display: flex; gap: 7px; flex: 0 0 auto; }
.delete-btn { border: 0; border-radius: 13px; padding: 9px 11px; background: #fff0f2; color: #d34f68; font-weight: 900; }
.saved-empty { padding: 29px; text-align: center; color: var(--muted); border: 2px dashed #e7dce9; border-radius: 17px; background: #fffbfd; }

@media (max-width: 820px) {
  .app-shell { width: 100%; min-height: 100vh; height: auto; aspect-ratio: auto; margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
  body[data-view="game"] .app-shell, body[data-view="result"] .app-shell { height: 100svh; aspect-ratio: auto; }
  .hero { align-items: flex-start; flex-direction: column; }
  .hero-copy { max-width: 100%; }
  .hero-side { width: 100%; justify-content: space-between; }
  .hero-mascot { width: 66px; height: 66px; border-radius: 23px; }
  .mascot-face { font-size: 43.68px; }
  .mode-grid { grid-template-columns: 1fr; }
  .mode-switch-panel { align-items: stretch; flex-direction: column; }
  .mode-toggle-btn { width: 100%; }
  .setting-block { align-items: flex-start; flex-direction: column; }
  .step-dot { width: 66px; }
  .step-dot span { display: none; }
  .ladder-paper { width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 18px; }
  .paper-footer { align-items: flex-start; flex-direction: column; }
  .paper-actions { width: 100%; overflow-x: auto; }
  #loadSettingsInGameBtn { display: none; }
  .result-titlebar { flex-direction: column; }
  .result-actions { width: 100%; flex-wrap: wrap; }
}

/* Broadcast Game Land hub */
body[data-view="hub"] .app-shell {
  overflow: hidden;
  padding: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 216, 107, .26), transparent 23%),
    radial-gradient(circle at 89% 16%, rgba(159, 126, 255, .20), transparent 24%),
    linear-gradient(145deg, #fff7fb 0%, #f8f2ff 48%, #fff8e8 100%);
}
body[data-view="hub"] .app-shell::before,
body[data-view="hub"] .app-shell::after { display: none; }

.hub-screen {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: 43% 1fr auto;
  overflow: hidden;
}
.hub-screen::before {
  content: "";
  position: absolute;
  width: 36%;
  aspect-ratio: 1;
  left: -13%;
  top: -24%;
  border-radius: 50%;
  background: rgba(255, 150, 180, .10);
  border: 28px solid rgba(255,255,255,.42);
  pointer-events: none;
}
.hub-screen::after {
  content: "";
  position: absolute;
  width: 30%;
  aspect-ratio: 1;
  right: -12%;
  bottom: -26%;
  border-radius: 50%;
  background: rgba(140,124,255,.10);
  border: 24px solid rgba(255,255,255,.45);
  pointer-events: none;
}
.hub-spark { position: absolute; z-index: 2; font-weight: 950; pointer-events: none; }
.hub-spark-one { left: 8%; top: 10%; color: var(--peach); font-size: clamp(26.88px,3.45vw,56px); transform: rotate(-12deg); }
.hub-spark-two { right: 9%; top: 17%; color: var(--lavender); font-size: clamp(26.88px,3.45vw,53.76px); transform: rotate(14deg); }

.hub-hero {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 3% 5% 1%;
}
.hub-logo {
  width: clamp(62px, 6.3vw, 98px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin-bottom: .7%;
  border-radius: 34% 34% 39% 39%;
  font-size: clamp(38.08px, 4.14vw, 62.72px);
  background: linear-gradient(145deg, #fff7ca, #ffe7ad);
  border: 3px solid #ffe090;
  box-shadow: 0 10px 0 rgba(234,193,92,.22), 0 18px 34px rgba(91,70,111,.10);
  transform: rotate(-3deg);
}
.hub-kicker { margin: 0 0 .6%; color: var(--pink-dark); font-size: clamp(12px, 1.035vw, 17px); font-weight: 950; letter-spacing: .18em; }
.hub-hero h1 {
  margin: 0;
  font-size: clamp(40.32px, 5.75vw, 85.12px);
  line-height: .93;
  letter-spacing: -.07em;
  color: #4c405d;
  text-shadow: 0 4px 0 #fff;
}
.hub-hero h1 span {
  display: inline-block;
  margin-top: .08em;
  color: var(--pink-dark);
}
.hub-sub { margin: 1.1% 0 0; color: #82758d; font-size: clamp(14px, 1.438vw, 22px); font-weight: 850; }

.hub-game-area {
  position: relative;
  z-index: 3;
  min-height: 0;
  padding: 0 5.2% 1.6%;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 2.2%;
}
.hub-section-title { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.hub-section-title span { color: var(--lavender-dark); font-size: clamp(11px,0.92vw,14px); font-weight: 950; letter-spacing: .14em; }
.hub-section-title h2 { margin: 3px 0 0; font-size: clamp(22px,2.3vw,34.72px); }
.hub-count { padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.78); border: 2px solid #eadff0; color: #887b92; font-size: clamp(11px,0.862vw,13px); font-weight: 900; }
.hub-count strong { color: var(--pink-dark); font-size: 1.4em; }

.game-library { min-height: 0; display: grid; grid-template-columns: 1.32fr 1fr 1fr; gap: 1.6%; }
.game-tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 2px solid #eadff0;
  border-radius: clamp(22px, 2vw, 32px);
  padding: clamp(16px, 1.8vw, 27px);
  background: rgba(255,255,255,.91);
  overflow: hidden;
  text-align: left;
  color: var(--text);
  box-shadow: 0 9px 0 rgba(228,218,233,.72), 0 18px 38px rgba(91,70,111,.09);
}
button.game-tile { transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease; }
button.game-tile:hover { transform: translateY(-5px) rotate(-.25deg); border-color: #ffb9ca; box-shadow: 0 12px 0 #f7dce4, 0 24px 45px rgba(91,70,111,.13); }
button.game-tile:active { transform: translateY(1px); box-shadow: 0 5px 0 #f0e5f2; }
.ladder-tile { background: linear-gradient(145deg, rgba(255,247,250,.98), rgba(246,241,255,.98)); }
.ladder-tile::after { content: "✦"; position: absolute; right: 7%; bottom: 7%; color: #ffd167; font-size: clamp(33.6px,4.6vw,69.44px); opacity: .32; transform: rotate(15deg); }
.coming-tile { opacity: .69; background: rgba(255,255,255,.63); box-shadow: 0 7px 0 rgba(228,218,233,.52); }
.tile-badge { display: inline-block; padding: 6px 9px; border-radius: 999px; background: var(--pink-soft); color: var(--pink-dark); font-size: clamp(10px,0.805vw,12px); font-weight: 950; letter-spacing: .11em; }
.tile-badge.muted { background: #f1ebf4; color: #998da1; }
.tile-icon { width: clamp(48px,5vw,75px); aspect-ratio: 1; display: grid; place-items: center; margin: 7% 0 5%; border-radius: 28%; background: var(--yellow-soft); border: 2px solid #ffe5a5; font-size: clamp(31.36px,3.45vw,51.52px); }
.tile-icon.soft { filter: grayscale(.18); background: var(--lavender-soft); border-color: #ddd1ff; }
.tile-copy { display: grid; gap: 5px; }
.tile-copy strong { font-size: clamp(21px,2.3vw,34.72px); letter-spacing: -.045em; }
.tile-copy small { color: var(--muted); font-size: clamp(12px,1.035vw,17px); line-height: 1.45; font-weight: 750; }
.tile-enter { position: absolute; left: clamp(16px,1.8vw,27px); bottom: clamp(13px,1.5vw,22px); color: var(--pink-dark); font-size: clamp(13px,1.15vw,18px); font-weight: 950; }
.tile-enter b { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 4px; border-radius: 9px; background: var(--pink); color: white; font-size: 21px; line-height: 1; }

.hub-footer { position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 18px; padding: .8% 5.2% 1.5%; color: #a092a9; font-size: clamp(11px,0.862vw,14px); font-weight: 850; }

.hub-visitor-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(234,223,240,.95);
  color: #8b7c95;
  white-space: nowrap;
}
.hub-visitor-count b { color: var(--pink-dark); font-size: 1.08em; }
.hub-visitor-count[data-state="error"] { opacity: .58; }

@media (max-width: 820px) {
  body[data-view="hub"] .app-shell { min-height: 100svh; height: auto; overflow: auto; }
  .hub-screen { min-height: 100svh; height: auto; grid-template-rows: auto auto auto; }
  .hub-hero { padding: 34px 20px 24px; }
  .hub-game-area { padding: 0 18px 24px; }
  .game-library { grid-template-columns: 1fr; gap: 16px; }
  .game-tile { min-height: 210px; }
  .coming-tile { min-height: 160px; }
  .hub-footer { padding: 0 18px 24px; }
}

/* =========================
   Fishing game · first-person ocean scene
   ========================= */
.fishing-tile { background: linear-gradient(145deg,#e9f9ff 0%,#eef0ff 58%,#fff7f4 100%); border-color:#c7e8f3 !important; }
.fishing-tile .tile-icon { background:linear-gradient(145deg,#d8f5ff,#e9e4ff); border-color:#bfe5f2; }
.fishing-tile:hover { border-color:#8ed4e7 !important; }
body[data-view="fish-game"] { background:#081b2b; overflow:hidden; }
body[data-view="fish-game"] .app-shell { width:min(100vw,calc(100vh * 16 / 9)); height:min(100vh,calc(100vw * 9 / 16)); aspect-ratio:16/9; margin:0 auto; padding:0; overflow:hidden; border-radius:0; border:0; box-shadow:0 0 100px rgba(0,0,0,.5); background:#cdeef8; }
body[data-view="fish-game"] .app-shell::before,body[data-view="fish-game"] .app-shell::after{display:none}
.fish-setup-screen{display:none!important}
.fish-game-screen{width:100%;height:100%;background:#cdeef8}
.fish-game-titlebar{height:10.5%;min-height:60px;padding:0 2.2%;display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(180deg,rgba(7,28,44,.92),rgba(9,37,55,.84));border-bottom:1px solid rgba(255,255,255,.13);position:relative;z-index:40;box-shadow:0 10px 30px rgba(2,18,29,.18)}
.fish-page-title{display:flex;align-items:center;gap:12px;min-width:0}.fish-page-title>span{width:44px;height:44px;display:grid;place-items:center;border-radius:15px;font-size:28px;background:linear-gradient(145deg,rgba(89,207,235,.2),rgba(120,117,255,.19));border:1px solid rgba(181,236,249,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.fish-page-title small{display:block;color:#78bdcf;font-weight:950;letter-spacing:.16em;font-size:11px}.fish-page-title h2{margin:2px 0 0;font-size:clamp(24.64px,2.415vw,38.08px);color:#f4fbff;letter-spacing:-.04em}.fish-title-actions{display:flex;gap:7px}.fish-title-actions .title-btn{border:1px solid rgba(191,230,240,.19);border-radius:12px;padding:8px 12px;background:rgba(255,255,255,.075);color:#dbeef4;font-size:16px;font-weight:900;box-shadow:none}.fish-title-actions .title-btn:hover{background:rgba(118,211,231,.14);border-color:rgba(157,225,240,.36);color:#fff}
.fishing-scene{position:relative;width:100%;height:89.5%;overflow:hidden;isolation:isolate;background:linear-gradient(180deg,#87d5ed 0%,#c8eef8 33%,#e8f7f5 40%,#2d98b7 41%,#0f6489 69%,#083e61 100%)}
.fishing-scene::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.14),transparent 35%),radial-gradient(circle at 50% 40%,rgba(255,255,255,.2),transparent 23%),linear-gradient(90deg,rgba(4,39,66,.14),transparent 14%,transparent 86%,rgba(4,39,66,.14))}
.sea-sky-glow{position:absolute;left:50%;top:7%;width:58%;height:34%;transform:translateX(-50%);z-index:1;background:radial-gradient(ellipse,rgba(255,246,196,.5),rgba(255,255,255,.05) 48%,transparent 70%);filter:blur(8px)}
.fish-sun{position:absolute;width:7%;aspect-ratio:1;border-radius:50%;left:12%;top:8%;z-index:1;background:radial-gradient(circle at 37% 34%,#fffbe0 0 14%,#ffdc73 47%,#f0b751 100%);box-shadow:0 0 0 14px rgba(255,233,143,.14),0 0 42px rgba(255,229,129,.42)}
.fish-cloud{position:absolute;height:4.7%;width:12%;border-radius:999px;background:rgba(255,255,255,.63);z-index:1;filter:blur(.2px)}.fish-cloud::before,.fish-cloud::after{content:"";position:absolute;bottom:0;border-radius:50%;background:inherit;aspect-ratio:1}.fish-cloud::before{width:42%;left:14%}.fish-cloud::after{width:34%;right:12%}.cloud-a{left:25%;top:12%}.cloud-b{right:15%;top:18%;transform:scale(.78);opacity:.7}
.far-island{position:absolute;top:35.8%;z-index:2;height:7%;background:linear-gradient(180deg,#5f8a7d,#315f5c);clip-path:polygon(0 100%,9% 65%,19% 71%,31% 38%,43% 61%,55% 27%,70% 66%,82% 51%,100% 100%);opacity:.65}.island-a{left:-3%;width:34%}.island-b{right:-4%;width:30%;transform:scaleX(-1);opacity:.5}.shore-line{position:absolute;z-index:3;left:-5%;right:-5%;top:39.7%;height:1.6%;background:linear-gradient(180deg,rgba(236,251,245,.9),rgba(89,169,169,.28));filter:blur(.2px)}
.water-layer{position:absolute;left:-4%;width:108%;pointer-events:none;z-index:4}.water-back{top:41%;height:22%;opacity:.28;background:repeating-radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.8) 0 1px,transparent 2px 28px);animation:seaDrift 7s linear infinite}.water-front{bottom:-8%;height:48%;opacity:.22;background:repeating-radial-gradient(ellipse at 50% 100%,rgba(217,247,255,.95) 0 2px,transparent 3px 38px);animation:seaDrift 9s linear infinite reverse}.sea-sparkles{position:absolute;left:5%;right:5%;top:43%;height:38%;z-index:5;opacity:.54;background-image:radial-gradient(circle,rgba(255,255,255,.78) 0 1px,transparent 1.7px),radial-gradient(circle,rgba(183,236,246,.65) 0 1px,transparent 1.6px);background-size:93px 51px,137px 78px;background-position:17px 2px,0 31px;animation:sparkleDrift 8s linear infinite}
.fish-hud{position:absolute;z-index:25;top:3%;display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid rgba(217,242,249,.22);border-radius:14px;background:rgba(4,35,56,.54);backdrop-filter:blur(8px);color:#d8eff5;box-shadow:0 10px 25px rgba(2,30,48,.11)}.fish-hud-left{left:2.2%}.fish-hud-right{right:2.2%}.fish-hud span{font-size:11px;font-weight:950;letter-spacing:.15em;color:#86c5d7}.fish-hud strong{font-size:17px;color:#fff}.fish-hud i{width:1px;height:18px;background:rgba(255,255,255,.15);margin:0 2px}.fish-hud-right strong{max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cast-zone{position:absolute;left:50%;top:43%;width:13%;aspect-ratio:2.7;transform:translate(-50%,-50%);z-index:8}.cast-ripple{position:absolute;left:50%;top:50%;width:30%;height:25%;transform:translate(-50%,-50%) scale(.2);border:2px solid rgba(230,252,255,.85);border-radius:50%;opacity:0}.waiting-bite .cast-ripple{animation:ripplePulse 1.8s ease-out infinite}.waiting-bite .ripple-two{animation-delay:.82s}.fish-bobber{position:absolute;left:50%;top:44%;width:10px;height:31px;transform:translate(-50%,-50%);z-index:11;opacity:0;transition:opacity .15s}.fish-bobber.visible{opacity:1}.fish-bobber::before{content:"";position:absolute;left:50%;top:0;width:7px;height:17px;transform:translateX(-50%);border-radius:999px;background:linear-gradient(#ff5b59 0 45%,#fff 46% 100%);box-shadow:0 2px 4px rgba(0,0,0,.22)}.fish-bobber span{position:absolute;left:50%;bottom:0;width:12px;height:5px;transform:translateX(-50%);border-radius:50%;background:rgba(222,250,255,.55)}.biting .fish-bobber{filter:drop-shadow(0 0 5px rgba(255,255,255,.7))}
.water-splash{position:absolute;left:50%;top:49%;width:60%;height:80%;transform:translate(-50%,-50%);opacity:0;pointer-events:none}.water-splash.active{opacity:1}.water-splash b{position:absolute;left:50%;bottom:40%;width:5px;height:17px;border-radius:999px;background:linear-gradient(rgba(255,255,255,.95),rgba(194,240,249,.1));transform-origin:50% 130%;animation:splashDrop .55s ease-out both}.water-splash b:nth-child(1){transform:translateX(-50%) rotate(-54deg)}.water-splash b:nth-child(2){transform:translateX(-50%) rotate(-28deg);animation-delay:.03s}.water-splash b:nth-child(3){transform:translateX(-50%) rotate(0deg);animation-delay:.01s}.water-splash b:nth-child(4){transform:translateX(-50%) rotate(31deg);animation-delay:.04s}.water-splash b:nth-child(5){transform:translateX(-50%) rotate(57deg);animation-delay:.02s}.water-splash::after{content:"";position:absolute;left:50%;bottom:31%;width:22%;height:16%;transform:translateX(-50%) scale(.2);border:3px solid rgba(232,252,255,.8);border-radius:50%;animation:splashRing .6s ease-out both}.water-splash.big{transform:translate(-50%,-50%) scale(1.6)}
.first-person-rod{position:absolute;z-index:19;left:50%;bottom:-16%;width:22%;height:83%;transform:translateX(-50%) rotate(-2deg);transform-origin:50% 100%;pointer-events:none;filter:drop-shadow(0 14px 10px rgba(0,34,53,.22))}.fp-rod-grip{position:absolute;left:47%;bottom:0;width:12%;height:38%;transform:translateX(-50%);border-radius:18px;background:repeating-linear-gradient(0deg,#302c2b 0 8px,#4b413b 9px 14px);border:2px solid #1f2427;box-shadow:inset 5px 0 8px rgba(255,255,255,.08)}.fp-rod-reel{position:absolute;left:56%;bottom:25%;width:19%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#112f42 0 24%,#79aab9 26% 33%,#1b4358 35% 61%,#0e2635 63%);border:3px solid rgba(199,229,237,.7);box-shadow:0 4px 8px rgba(0,0,0,.22)}.fp-rod-reel::after{content:"";position:absolute;right:-40%;top:42%;width:55%;height:10%;border-radius:999px;background:#243e4b;transform:rotate(18deg)}.fp-rod-reel span{position:absolute;right:-51%;top:42%;width:14%;aspect-ratio:1;border-radius:50%;background:#ded8c8}.fp-rod-blank{position:absolute;left:49%;bottom:33%;width:3.2%;height:67%;transform:translateX(-50%);border-radius:999px 999px 4px 4px;background:linear-gradient(90deg,#233747,#537588 38%,#162b39 72%);box-shadow:inset 1px 0 rgba(255,255,255,.35);clip-path:polygon(27% 0,73% 0,100% 100%,0 100%)}.fp-rod-blank::before{content:"";position:absolute;left:50%;top:0;width:210%;height:4px;transform:translate(-50%,-30%);border-radius:50%;background:#9abac4}.fp-rod-guide{position:absolute;left:50%;width:8%;height:3%;transform:translateX(-50%);border:2px solid #879da6;border-radius:50%;background:transparent}.guide-a{bottom:63%}.guide-b{bottom:79%;width:6%}.fp-hand{position:absolute;bottom:17%;width:28%;height:17%;border-radius:48% 48% 42% 42%;background:linear-gradient(145deg,#f3c09d,#d89676);border:2px solid rgba(99,58,48,.15);box-shadow:inset 0 -7px 0 rgba(154,92,70,.08)}.hand-left{left:18%;transform:rotate(17deg)}.hand-right{right:10%;bottom:25%;transform:rotate(-17deg)}
.fishing-line{position:absolute;z-index:18;width:1.5px;height:0;transform-origin:top center;background:linear-gradient(rgba(223,244,248,.78),rgba(52,83,96,.55));pointer-events:none;opacity:0;box-shadow:0 0 2px rgba(255,255,255,.28)}
.caught-fish{--fish-body:#7aa1b0;--fish-accent:#d6edf2;--fish-belly:#a7c4ca;--fish-pattern:#eaf6f7;--fish-scale:1;position:absolute;z-index:22;left:50%;top:45%;width:16%;aspect-ratio:1.9;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.2)}.caught-fish.jumping{opacity:1}.catch-fish-body{position:absolute;left:12%;top:7%;width:72%;height:82%;border-radius:54% 46% 48% 54%;background:linear-gradient(180deg,var(--fish-accent) 0 15%,var(--fish-body) 17% 67%,var(--fish-belly) 69% 100%);border:2px solid rgba(14,37,48,.28);box-shadow:inset 0 -7px 0 rgba(21,44,54,.08),0 11px 18px rgba(0,34,50,.22)}.catch-fish-body::before{content:"";position:absolute;right:10%;top:-16%;width:24%;height:32%;background:var(--fish-accent);clip-path:polygon(0 100%,42% 0,100% 100%);filter:brightness(.9)}.catch-fish-tail{position:absolute;right:0;top:19%;width:28%;height:61%;background:linear-gradient(90deg,var(--fish-body),var(--fish-accent));clip-path:polygon(0 50%,100% 0,78% 50%,100% 100%);filter:brightness(.88);border-radius:15%}.catch-fish-eye{position:absolute;left:17%;top:21%;width:8%;aspect-ratio:1;border-radius:50%;background:#162734;border:3px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.18)}.catch-fish-gill{position:absolute;left:30%;top:19%;width:15%;height:55%;border-left:2px solid rgba(28,55,63,.32);border-radius:50%}.catch-fish-fin{position:absolute;left:43%;bottom:-17%;width:24%;height:35%;background:var(--fish-accent);clip-path:polygon(0 0,100% 16%,20% 100%);filter:brightness(.92)}.catch-fish-pattern{position:absolute;left:48%;top:23%;width:30%;height:35%;opacity:.72;background:repeating-linear-gradient(90deg,transparent 0 8px,var(--fish-pattern) 9px 12px);border-radius:50%;transform:skewX(-13deg)}.catch-fish-crown{position:absolute;left:45%;top:-24%;font-size:clamp(21px,2.645vw,42.56px);color:#fff4a9;text-shadow:0 0 12px #ffd246;opacity:0}.caught-fish.legendary .catch-fish-crown{opacity:1;animation:legendSpark .7s ease-in-out infinite alternate}.caught-fish.legendary .catch-fish-body{box-shadow:inset 0 -7px 0 rgba(144,86,0,.1),0 0 25px rgba(255,215,73,.6),0 13px 20px rgba(0,34,50,.24)}.caught-fish.blank-fish{filter:saturate(.7)}
.fish-result-card{position:absolute;z-index:26;left:2.2%;top:auto;bottom:2.6%;min-width:25%;max-width:35%;padding:13px 20px 14px;transform:translate(-14px,12px) scale(.96);opacity:0;border-radius:20px;text-align:center;background:rgba(5,34,52,.82);border:1px solid rgba(211,239,246,.21);backdrop-filter:blur(10px);box-shadow:0 15px 35px rgba(1,25,39,.24);transition:.32s ease;pointer-events:none}.fish-result-card.visible{opacity:1;transform:translate(0,0) scale(1)}.fish-result-badge{display:inline-flex;align-items:center;justify-content:center;min-width:74px;height:23px;padding:0 10px;margin-bottom:5px;border-radius:999px;background:rgba(133,198,214,.16);color:#9bd6e5;font-size:11px;font-weight:950;letter-spacing:.14em}.fish-result-card strong{display:block;color:#fff;font-size:clamp(23.52px,2.76vw,41.44px);letter-spacing:-.04em}.fish-result-card>span{display:block;margin-top:3px;color:#c9e5ed;font-size:clamp(13px,1.208vw,18px);font-weight:700}.fish-result-card.win{background:linear-gradient(145deg,rgba(58,47,24,.86),rgba(8,37,52,.86));border-color:rgba(255,224,128,.38)}.fish-result-card.win .fish-result-badge{background:#ffe394;color:#6d4e00}.fish-result-card.rank-1{box-shadow:0 0 0 1px rgba(255,231,139,.18),0 0 42px rgba(255,210,58,.26),0 15px 40px rgba(1,25,39,.2)}.fish-result-card.blank{background:rgba(27,42,49,.79)}.fish-result-card.blank .fish-result-badge{background:rgba(185,202,206,.18);color:#c7d4d7}
.fish-history{position:absolute;z-index:24;left:auto;right:2.2%;bottom:2.6%;display:flex;gap:6px;max-width:34%;overflow:hidden;justify-content:flex-end}.fish-history-chip{flex:0 0 auto;padding:6px 9px;border-radius:999px;background:rgba(4,34,53,.58);border:1px solid rgba(205,237,246,.15);color:#cce8ef;font-size:11px;font-weight:900;backdrop-filter:blur(6px)}.fish-history-chip.hit{border-color:rgba(255,224,126,.28);color:#fff0b7}.fish-history-chip.legend{background:rgba(98,69,8,.56);color:#fff2aa}
.fish-control-deck{position:absolute;z-index:30;left:50%;bottom:2.6%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:9px}.fish-toast{min-width:320px;max-width:70vw;padding:8px 16px;border-radius:999px;background:rgba(3,31,49,.62);border:1px solid rgba(198,233,242,.2);color:#d8eef4;font-size:clamp(13px,1.173vw,18px);font-weight:850;text-align:center;backdrop-filter:blur(8px);box-shadow:0 8px 20px rgba(0,31,48,.12)}.fishing-start-btn{min-width:220px;height:66px;display:flex;align-items:center;justify-content:center;gap:12px;padding:0 24px;border:1px solid rgba(255,255,255,.42);border-radius:20px;background:linear-gradient(145deg,#ffcf58,#f29b37);color:#3d2b18;box-shadow:0 7px 0 #ad6427,0 13px 28px rgba(47,27,11,.25),inset 0 1px 0 rgba(255,255,255,.55);font-weight:950;transition:.16s ease}.fishing-start-btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.04)}.fishing-start-btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 3px 0 #ad6427,0 8px 16px rgba(47,27,11,.18)}.fishing-start-btn:disabled{opacity:.82;cursor:default}.fishing-start-btn.busy{background:linear-gradient(145deg,#a9c7cf,#739baa);box-shadow:0 6px 0 #506f7b,0 12px 24px rgba(12,47,62,.22);color:#ecfbff}.fishing-start-icon{font-size:31.36px;filter:drop-shadow(0 2px 0 rgba(255,255,255,.25))}.fishing-start-btn small{display:block;font-size:10px;letter-spacing:.15em;opacity:.72;text-align:left}.fishing-start-btn strong{display:block;margin-top:1px;font-size:23px;letter-spacing:-.03em;text-align:left}
.fish-odds-panel{position:absolute;z-index:50;right:1.8%;top:2%;width:min(330px,34%);max-height:94%;padding:16px;border-radius:22px;background:rgba(4,28,44,.92);border:1px solid rgba(185,229,241,.23);box-shadow:0 20px 60px rgba(0,20,33,.38);backdrop-filter:blur(14px);transform:translateX(115%);opacity:0;transition:.28s ease;overflow:auto;color:#e6f5f9}.fish-odds-panel.open{transform:translateX(0);opacity:1}.fish-odds-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.fish-odds-head small{display:block;color:#7ebfd0;font-size:10px;font-weight:950;letter-spacing:.16em}.fish-odds-head strong{display:block;margin-top:2px;font-size:22px}.fish-odds-head button{width:32px;height:32px;border:0;border-radius:10px;background:rgba(255,255,255,.09);color:#d8edf4;font-size:25.76px}.fish-odds-list{display:grid;gap:5px}.fish-odds-row{display:grid;grid-template-columns:43px 1fr 48px;align-items:center;gap:8px;padding:7px 9px;border-radius:11px;background:rgba(255,255,255,.045)}.fish-odds-row.win{background:rgba(255,216,109,.065)}.fish-odds-row.legend{border:1px solid rgba(255,221,109,.22);background:linear-gradient(90deg,rgba(255,216,109,.14),rgba(255,255,255,.035))}.fish-odds-rank{font-size:12px;font-weight:950;color:#82c5d6}.fish-odds-row.win .fish-odds-rank{color:#f7d579}.fish-odds-row strong{font-size:14px}.fish-odds-row em{text-align:right;font-style:normal;font-size:13px;font-weight:950;color:#9fd3df}.fish-odds-panel p{margin:10px 2px 0;color:#8fb3be;font-size:11px;line-height:1.45}
@keyframes seaDrift{from{transform:translateX(0)}to{transform:translateX(32px)}}
@keyframes sparkleDrift{0%{transform:translateX(0);opacity:.45}50%{opacity:.66}100%{transform:translateX(32px);opacity:.45}}
@keyframes ripplePulse{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}20%{opacity:.75}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0}}
@keyframes splashDrop{0%{height:4px;opacity:0}30%{opacity:1}100%{height:34px;opacity:0}}
@keyframes splashRing{0%{transform:translateX(-50%) scale(.2);opacity:.9}100%{transform:translateX(-50%) scale(2.2);opacity:0}}
@keyframes legendSpark{from{transform:translateY(0) rotate(-8deg) scale(.95);opacity:.72}to{transform:translateY(-5px) rotate(8deg) scale(1.15);opacity:1}}

/* Chibi fish illustrations */
.caught-fish{width:18%;aspect-ratio:1.6;filter:none}
.chibi-fish-art{position:absolute;inset:-20%;display:grid;place-items:center;transform-origin:50% 55%}
.chibi-fish-art svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 15px 10px rgba(0,24,38,.38)) drop-shadow(0 2px 1px rgba(255,255,255,.10));}
.caught-fish.legendary .chibi-fish-art svg{filter:drop-shadow(0 0 8px rgba(255,224,92,.72)) drop-shadow(0 0 22px rgba(255,181,37,.38)) drop-shadow(0 16px 11px rgba(0,24,38,.42));}
.caught-fish.blank-fish .chibi-fish-art svg{filter:saturate(.88) contrast(1.02) drop-shadow(0 13px 9px rgba(0,24,38,.34));}
.semi-fish-svg{overflow:visible}
.fish-odds-thumb .semi-fish-svg{filter:drop-shadow(0 4px 3px rgba(0,20,31,.36))}
.semi-fish-outline{stroke:#233642;stroke-width:2.1;stroke-linejoin:round;stroke-linecap:round}
.semi-fin-outline{stroke:#334b55;stroke-width:1.35;stroke-linejoin:round;stroke-linecap:round}
.semi-detail{fill:none;stroke:#314852;stroke-width:1.25;stroke-linecap:round}
.semi-highlight{fill:none;stroke:rgba(255,255,255,.75);stroke-width:2.2;stroke-linecap:round;opacity:.55}
.semi-fish-svg .scale-texture{mix-blend-mode:screen}
.semi-fish-svg .wet-shine{mix-blend-mode:screen}
.semi-fish-svg .fin-ray{fill:none;stroke:rgba(52,66,72,.48);stroke-width:.75;stroke-linecap:round}
.semi-fish-svg .micro-spot{opacity:.74}
.fish-result-portrait{width:82px;height:52px;margin:-1px auto 3px;display:none;align-items:center;justify-content:center}
.fish-result-card.visible .fish-result-portrait.has-fish{display:flex}
.fish-result-portrait svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 5px rgba(0,0,0,.18))}
.fish-result-card.rank-1 .fish-result-portrait svg{filter:drop-shadow(0 0 7px rgba(255,226,92,.8)) drop-shadow(0 6px 5px rgba(0,0,0,.2))}
.fish-odds-row{grid-template-columns:38px 42px 1fr 48px;padding:5px 8px;min-height:48px}
.fish-odds-thumb{width:38px;height:32px;display:grid;place-items:center}
.fish-odds-thumb svg{width:42px;height:32px;overflow:visible;filter:drop-shadow(0 3px 2px rgba(0,0,0,.18))}
.fish-odds-row.legend .fish-odds-thumb svg{filter:drop-shadow(0 0 5px rgba(255,223,90,.72))}
@media(max-width:800px){.caught-fish{width:24%}.fish-result-portrait{width:64px;height:40px}.fish-odds-row{grid-template-columns:32px 36px 1fr 44px}.fish-odds-thumb{width:32px}.fish-odds-thumb svg{width:35px}}
@media(max-width:800px){.fish-game-titlebar{padding:0 1.4%}.fish-page-title small{display:none}.fish-page-title>span{width:38px;height:38px;font-size:24.64px}.fish-page-title h2{font-size:23px}.fish-title-actions .title-btn{padding:7px 8px;font-size:12px}.fish-hud{padding:6px 8px;gap:5px}.fish-hud-right{display:none}.fish-history{display:none}.first-person-rod{width:28%}.fish-result-card{left:1.5%;bottom:1.5%;top:auto;min-width:38%;max-width:48%;padding:9px 12px}.fish-result-card strong{font-size:clamp(20px,3.68vw,26.88px)}.fish-result-card>span{font-size:11px}.fish-result-portrait{width:54px;height:34px}.fish-control-deck{bottom:2%}.fish-toast{min-width:250px;max-width:78vw;font-size:12px}.fishing-start-btn{min-width:180px;height:56px;border-radius:17px;padding:0 18px}.fishing-start-btn strong{font-size:20px}.fishing-start-icon{font-size:25.76px}.fish-odds-panel{width:55%;right:1%;top:1%;max-height:97%}.caught-fish{width:20%}}


/* =========================
   v31 Offline luck battle pack
   ========================= */
.expanded-library{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:1.35%;}
.expanded-library .game-tile{display:grid;grid-template-columns:clamp(46px,4.2vw,64px) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(10px,1vw,16px);align-items:center;padding:clamp(12px,1.25vw,19px);border-radius:clamp(18px,1.6vw,27px);}
.expanded-library .tile-badge{grid-column:1/-1;justify-self:start;padding:5px 8px;margin-bottom:4px}
.expanded-library .tile-icon{grid-column:1;grid-row:2;width:clamp(42px,4vw,60px);margin:0;font-size:clamp(25.76px,2.702vw,39.2px);align-self:center}
.expanded-library .tile-copy{grid-column:2;grid-row:2;align-self:center;gap:3px;padding-right:2px}
.expanded-library .tile-copy strong{font-size:clamp(18px,1.587vw,24.64px);line-height:1.08}
.expanded-library .tile-copy small{font-size:clamp(10px,0.759vw,13px);line-height:1.35}
.expanded-library .tile-enter{display:none}
.tile-badge.luck{background:#e8f6ff;color:#3679aa}.luck-tile{isolation:isolate}.luck-tile::before{content:"";position:absolute;inset:auto -18% -45% 25%;height:65%;border-radius:50%;filter:blur(18px);opacity:.28;z-index:-1}.coin-tile{background:linear-gradient(145deg,#fff9e8,#fffdf6)}.coin-tile::before{background:#ffc646}.card-tile{background:linear-gradient(145deg,#f5fbff,#f2f4ff)}.card-tile::before{background:#5b7cff}.odd-tile{background:linear-gradient(145deg,#f6f1ff,#fff6fd)}.odd-tile::before{background:#9a62ff}.enhance-tile{background:linear-gradient(145deg,#fff3ed,#fff8f3)}.enhance-tile::before{background:#ff755f}.roulette-tile{background:linear-gradient(145deg,#fff7e8,#fff4fb 56%,#eef5ff)}.roulette-tile::before{background:#ff5e91}.luck-icon{background:linear-gradient(145deg,#fff,#f5f3fb);border-color:#e4e0ed;color:#39425a;font-weight:1000;box-shadow:inset 0 0 20px rgba(255,255,255,.9)}.roulette-tile .luck-icon{background:conic-gradient(#ff667f 0 12.5%,#ffc44f 0 25%,#4dd5ad 0 37.5%,#618cff 0 50%,#9e6cff 0 62.5%,#ff76ba 0 75%,#ff9058 0 87.5%,#58cce7 0);color:#fff;border:4px solid #fff;box-shadow:0 5px 13px rgba(87,70,130,.17)}.card-mini{font-family:Georgia,serif;font-size:clamp(20px,1.955vw,30.24px)!important}
body[data-view="luck-game"] .app-shell{width:min(98vw,calc(98vh * 16 / 9));height:min(98vh,calc(98vw * 9 / 16));aspect-ratio:16/9;margin:1vh auto;padding:0;overflow:hidden;border-radius:26px;background:#070b16;border-color:#242c42;box-shadow:0 30px 90px rgba(0,0,0,.42)}
.luck-game-screen{position:absolute!important;inset:0;overflow:hidden;color:#f8fbff;background:#080d1b}
.luck-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 22%,rgba(76,111,188,.2),transparent 32%),linear-gradient(155deg,#10172a 0%,#080c17 48%,#111327 100%)}
.luck-bg::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.023) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.023) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,black,transparent 84%)}
.luck-bg::after{content:"";position:absolute;width:58vw;height:58vw;left:50%;top:45%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(110,164,255,.12);box-shadow:0 0 0 6vw rgba(75,130,255,.025),0 0 0 12vw rgba(75,130,255,.018)}
.luck-topbar{position:relative;z-index:20;height:11%;display:flex;align-items:center;justify-content:space-between;padding:0 3.3%;border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(4,7,14,.78),rgba(4,7,14,.16));backdrop-filter:blur(10px)}
.luck-title{display:flex;align-items:center;gap:14px}.luck-title-icon{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,#24324f,#121a2c);border:1px solid rgba(255,255,255,.12);font-size:25.76px;box-shadow:inset 0 0 18px rgba(255,255,255,.04)}.luck-title small{display:block;color:#7e91b9;font-size:12px;font-weight:900;letter-spacing:.18em}.luck-title h2{margin:2px 0 0;font-size:clamp(21px,2.012vw,30.24px);letter-spacing:-.04em}.luck-back-btn{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.06);color:#dce6ff;border-radius:13px;padding:10px 15px;font-weight:850;transition:.18s}.luck-back-btn:hover{background:rgba(255,255,255,.12);transform:translateY(-1px)}
.luck-stage{position:relative;z-index:5;height:89%;display:grid;grid-template-columns:minmax(0,1fr) 28%;gap:2.4%;padding:2.3% 3.2% 3%}.luck-main{position:relative;min-height:0;border:1px solid rgba(255,255,255,.08);border-radius:27px;overflow:hidden;background:linear-gradient(145deg,rgba(19,27,49,.82),rgba(8,13,25,.9));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 60px rgba(0,0,0,.22)}.luck-main::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 36%,rgba(73,126,255,.12),transparent 42%);pointer-events:none}.luck-side{display:flex;flex-direction:column;gap:5%;min-height:0}.luck-rule-card,.luck-score-card{position:relative;flex:1;border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:8%;background:rgba(13,19,34,.76);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}.luck-rule-card small,.luck-score-card small{color:#7084ad;font-size:11px;font-weight:950;letter-spacing:.16em}.luck-rule-card h3,.luck-score-card h3{margin:6px 0 9px;font-size:clamp(18px,1.438vw,23px)}.luck-rule-card p{margin:0;color:#aebbd4;font-size:clamp(11px,0.897vw,14px);line-height:1.65;font-weight:650}.luck-score-row{display:flex;justify-content:space-between;align-items:center;margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.07);color:#9facc6;font-size:clamp(11px,0.862vw,14px);font-weight:800}.luck-score-row strong{color:white;font-size:1.344em}.luck-score-row .win{color:#7af0bd}.luck-score-row .lose{color:#ff8098}
.luck-game-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3.5% 6%}.luck-kicker{margin-bottom:1%;font-size:clamp(11px,0.92vw,14px);font-weight:950;letter-spacing:.2em;color:#7185ad}.luck-prompt{margin:0;text-align:center;font-size:clamp(24.64px,2.645vw,40.32px);letter-spacing:-.055em}.luck-subprompt{margin:1% 0 0;text-align:center;color:#91a0bc;font-size:clamp(12px,1.035vw,17px);font-weight:700}.choice-row{display:flex;gap:14px;margin-top:4%;justify-content:center}.luck-choice{min-width:clamp(135px,13vw,205px);padding:14px 20px;border:1px solid rgba(255,255,255,.13);border-radius:17px;background:linear-gradient(145deg,#17243e,#10182a);color:#eef4ff;box-shadow:0 8px 20px rgba(0,0,0,.2);font-weight:950;font-size:clamp(17px,1.438vw,22px);transition:.2s}.luck-choice:hover{transform:translateY(-3px);border-color:#6f99ff;box-shadow:0 12px 28px rgba(50,100,220,.18)}.luck-choice.selected{border-color:#85a8ff;background:linear-gradient(145deg,#294983,#17284d);box-shadow:0 0 0 3px rgba(88,137,255,.13),0 0 34px rgba(73,119,255,.2)}.luck-action{min-width:clamp(170px,16vw,245px);margin-top:2.3%;padding:14px 24px;border:0;border-radius:18px;background:linear-gradient(135deg,#6b8cff,#8a69ff);color:white;font-size:clamp(17px,1.38vw,22px);font-weight:1000;box-shadow:0 8px 0 #3c4ea2,0 16px 34px rgba(84,102,255,.3);transition:.15s}.luck-action:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 10px 0 #3c4ea2,0 20px 38px rgba(84,102,255,.34)}.luck-action:active:not(:disabled){transform:translateY(5px);box-shadow:0 3px 0 #3c4ea2}.luck-action:disabled{opacity:.42}.luck-secondary{margin-top:12px;border:0;background:none;color:#8090ae;font-weight:850;text-decoration:underline;text-underline-offset:4px}.result-banner{position:absolute;left:50%;bottom:5%;transform:translateX(-50%) translateY(16px);min-width:48%;max-width:78%;padding:12px 20px;border-radius:15px;text-align:center;font-weight:950;font-size:clamp(16px,1.265vw,20px);opacity:0;transition:.32s;background:rgba(9,14,26,.9);border:1px solid rgba(255,255,255,.13);box-shadow:0 16px 36px rgba(0,0,0,.3);pointer-events:none}.result-banner.show{opacity:1;transform:translateX(-50%) translateY(0)}/* Coin result card: keep it away from the choice/action buttons */
.luck-game-screen[data-game="coin"] .result-banner{left:3.2%;top:48%;bottom:auto;min-width:0;width:27%;max-width:300px;transform:translateY(-50%) translateX(-14px);padding:14px 16px;text-align:left}.luck-game-screen[data-game="coin"] .result-banner.show{transform:translateY(-50%) translateX(0)}
@media(max-width:800px){.luck-game-screen[data-game="coin"] .result-banner{left:2.5%;top:50%;width:25%;max-width:210px;padding:9px 10px;font-size:clamp(12px,1.955vw,16px)}}
.result-banner.win{color:#8ff2c2;border-color:rgba(99,235,174,.38);box-shadow:0 0 36px rgba(61,219,150,.12)}.result-banner.lose{color:#ff9cad;border-color:rgba(255,102,127,.35)}.result-banner.draw{color:#ffd777;border-color:rgba(255,200,85,.35)}
/* coin */
.coin-arena{position:relative;width:clamp(175px,18vw,280px);height:clamp(175px,18vw,280px);margin:2% 0 1%;perspective:1000px}.coin-shadow{position:absolute;left:14%;right:14%;bottom:2%;height:12%;border-radius:50%;background:rgba(0,0,0,.42);filter:blur(12px);transform:scale(.82);transition:.5s}.coin3d{position:absolute;left:10%;top:2%;width:80%;height:80%;transform-style:preserve-3d;transform:rotateY(0deg);will-change:transform}.coin3d.flip{animation:coinFlip 1.85s cubic-bezier(.18,.65,.18,1)}.coin-face{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;backface-visibility:hidden;border:clamp(6px,.65vw,10px) solid #cf8f18;background:radial-gradient(circle at 35% 28%,#fff2a3 0 8%,#f8c94e 27%,#d89a21 67%,#9c6411 100%);box-shadow:inset 0 0 0 5px rgba(255,244,172,.34),inset -13px -16px 24px rgba(111,63,4,.22),0 16px 35px rgba(0,0,0,.28);color:#8e5b0b;text-shadow:0 2px 1px rgba(255,239,149,.6);font-size:clamp(39.2px,5.06vw,78.4px);font-weight:1000}.coin-face::before{content:"";position:absolute;inset:11%;border:2px dashed rgba(125,78,7,.38);border-radius:50%}.coin-face.back{transform:rotateY(180deg)}.coin3d[data-side="back"]{transform:rotateY(180deg)}.coin3d[data-side="front"]{transform:rotateY(0deg)}@keyframes coinFlip{0%{transform:translateY(0) rotateY(0) rotateX(0)}18%{transform:translateY(-45%) rotateY(540deg) rotateX(12deg)}76%{transform:translateY(-8%) rotateY(1810deg) rotateX(-5deg)}100%{transform:translateY(0) rotateY(2160deg) rotateX(0)}}
/* cards */
.card-table{position:relative;width:100%;max-width:720px;height:clamp(190px,23vh,320px);margin-top:1.8%;display:flex;justify-content:center;align-items:center;gap:clamp(35px,7vw,110px)}.playing-card{position:relative;width:clamp(110px,11vw,168px);aspect-ratio:.7;perspective:900px}.playing-card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .72s cubic-bezier(.2,.72,.2,1)}.playing-card.reveal .playing-card-inner{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;border-radius:15px;backface-visibility:hidden;overflow:hidden;box-shadow:0 18px 36px rgba(0,0,0,.32);border:1px solid rgba(255,255,255,.3)}.card-back{background:repeating-linear-gradient(45deg,#152e61 0 6px,#203d77 6px 12px);display:grid;place-items:center}.card-back::before{content:"✦";width:68%;height:78%;display:grid;place-items:center;border:3px double rgba(255,255,255,.55);border-radius:10px;color:#d9e6ff;font-size:42.56px}.card-front{transform:rotateY(180deg);background:linear-gradient(145deg,#fff,#f3f4f7);color:#182033;padding:10%;font-family:Georgia,serif}.card-front.red{color:#d52b48}.card-rank{font-size:clamp(29.12px,3.45vw,51.52px);font-weight:800;line-height:.9}.card-suit{font-size:clamp(24.64px,2.76vw,40.32px)}.card-center{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(50.4px,5.75vw,84px);opacity:.9}.card-label{position:absolute;bottom:-31px;left:0;right:0;text-align:center;color:#7284a7;font-size:13px;font-weight:900;letter-spacing:.12em}.vs-mark{color:#556989;font-size:clamp(19px,1.955vw,29.12px);font-weight:1000}.card-pulse{animation:cardPulse .45s ease 2}@keyframes cardPulse{50%{transform:translateY(-8px) scale(1.04)}}
/* odd-even */
.number-reactor{position:relative;width:clamp(185px,19vw,290px);aspect-ratio:1;margin:2% 0 1%;display:grid;place-items:center}.number-reactor::before,.number-reactor::after{content:"";position:absolute;border-radius:50%;inset:5%;border:2px solid rgba(137,100,255,.35);box-shadow:0 0 45px rgba(120,77,255,.15)}.number-reactor::after{inset:15%;border-style:dashed;animation:reactorSpin 8s linear infinite}.reactor-ring{position:absolute;inset:0;border-radius:50%;border:12px solid transparent;border-top-color:#815fff;border-bottom-color:#4fc3ff;filter:drop-shadow(0 0 12px rgba(112,86,255,.5));animation:reactorSpin 3.4s linear infinite}.reactor-number{position:relative;z-index:3;font-size:clamp(80.64px,9.2vw,138.88px);font-weight:1000;letter-spacing:-.08em;color:#f7f4ff;text-shadow:0 0 28px rgba(130,100,255,.45)}.number-reactor.rolling .reactor-ring{animation-duration:.38s}.number-reactor.rolling .reactor-number{animation:numberJitter .09s linear infinite}@keyframes reactorSpin{to{transform:rotate(360deg)}}@keyframes numberJitter{50%{transform:translateY(-2px) scale(1.03);filter:blur(.5px)}}
/* enhance */
.enhance-wrap{width:min(90%,720px);display:grid;grid-template-columns:1fr 1.05fr;gap:8%;align-items:center;margin-top:2%}.core-area{display:grid;place-items:center;position:relative;min-height:280px}.energy-core{position:relative;width:clamp(150px,16vw,240px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff 0 2%,#ffd8aa 4%,#ff9a58 23%,#ef4a65 55%,#6a1f58 78%,#170e2b 100%);box-shadow:0 0 25px rgba(255,115,87,.35),0 0 80px rgba(255,77,125,.16),inset -18px -22px 38px rgba(37,5,37,.3);transition:.45s}.energy-core::before,.energy-core::after{content:"";position:absolute;inset:-12%;border-radius:50%;border:2px solid rgba(255,160,105,.38);animation:coreOrbit 4s linear infinite}.energy-core::after{inset:-24%;border-style:dashed;border-color:rgba(119,106,255,.3);animation-direction:reverse;animation-duration:7s}.energy-core .multi{font-size:clamp(42.56px,4.6vw,69.44px);font-weight:1000;text-shadow:0 3px 14px rgba(75,4,34,.5)}.energy-core.charging{animation:coreCharge .78s ease-in-out 2}.energy-core.fail{animation:coreFail .65s ease forwards}.energy-core.success{animation:coreSuccess .75s ease}@keyframes coreOrbit{to{transform:rotate(360deg)}}@keyframes coreCharge{50%{transform:scale(1.12);filter:brightness(1.5);box-shadow:0 0 80px rgba(255,130,78,.7)}}@keyframes coreSuccess{45%{transform:scale(1.24);filter:brightness(1.8)}100%{transform:scale(1)}}@keyframes coreFail{40%{transform:scale(1.18);filter:brightness(2)}100%{transform:scale(.75);filter:grayscale(.8) brightness(.45);opacity:.65}}.enhance-info{text-align:left}.enhance-level{font-size:clamp(13px,0.977vw,16px);color:#8798b8;font-weight:900;letter-spacing:.15em}.enhance-multiplier{margin:4px 0;font-size:clamp(38.08px,4.6vw,69.44px);font-weight:1000;letter-spacing:-.06em}.enhance-rate{display:inline-flex;align-items:center;gap:7px;margin-top:5px;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.07);color:#ffbd8b;font-weight:900;font-size:clamp(12px,0.92vw,16px)}.enhance-actions{display:flex;gap:10px;margin-top:22px}.enhance-actions .luck-action{min-width:0;flex:1;margin:0;padding-inline:12px}.claim-btn{background:linear-gradient(135deg,#34b98a,#2b8f79)!important;box-shadow:0 8px 0 #176554,0 16px 34px rgba(38,190,137,.22)!important}.enhance-ladder{margin-top:18px;display:flex;gap:5px;flex-wrap:wrap}.enhance-step{padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.055);color:#61708e;font-size:11px;font-weight:900}.enhance-step.active{background:rgba(255,140,91,.18);color:#ffbd8e;border:1px solid rgba(255,151,100,.3)}.enhance-step.done{color:#76e5b7;background:rgba(65,208,148,.12)}
.luck-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:white;z-index:50}.luck-flash.fire{animation:screenFlash .5s ease}@keyframes screenFlash{0%{opacity:0}18%{opacity:.78}100%{opacity:0}}
@media(max-width:820px){body[data-view="luck-game"] .app-shell{width:100vw;height:100svh;margin:0;border:0;border-radius:0}.luck-stage{grid-template-columns:1fr;height:89%;padding:14px}.luck-side{display:none}.luck-main{border-radius:20px}.luck-topbar{height:11%;padding:0 16px}.luck-title-icon{width:39px;height:39px}.choice-row{flex-wrap:wrap}.enhance-wrap{grid-template-columns:1fr;gap:6px}.core-area{min-height:190px}.energy-core{width:145px}.enhance-info{text-align:center}.enhance-actions{justify-content:center}.expanded-library{grid-template-columns:1fr}.expanded-library .game-tile{min-height:190px}}

/* custom roulette */
.luck-game-screen[data-game="roulette"] .luck-bg{background:radial-gradient(circle at 68% 40%,rgba(255,180,64,.17),transparent 31%),radial-gradient(circle at 30% 25%,rgba(206,81,255,.14),transparent 27%),linear-gradient(155deg,#171026,#080c17 50%,#18142a)}
.luck-game-screen[data-game="roulette"] .luck-game-content{padding:2.4%;align-items:stretch;justify-content:stretch;overflow:hidden}
.roulette-shell{position:relative;width:100%;height:100%;display:grid;grid-template-columns:minmax(220px,.72fr) minmax(330px,1.28fr);gap:3%;align-items:stretch}
.roulette-editor{min-width:0;display:flex;flex-direction:column;padding:clamp(15px,2vw,25px);border-radius:22px;background:linear-gradient(145deg,rgba(32,25,53,.94),rgba(15,18,35,.92));border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 1px rgba(255,255,255,.05),0 16px 35px rgba(0,0,0,.2)}
.roulette-editor-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:10px}.roulette-editor-head small{display:block;color:#a790d7;font-size:10px;font-weight:1000;letter-spacing:.16em}.roulette-editor-head strong{display:block;margin-top:3px;font-size:clamp(19px,1.667vw,25.76px)}.roulette-count{flex:0 0 auto;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.07);color:#ffd98c;font-size:11px;font-weight:950}
.roulette-textarea{width:100%;flex:1;min-height:126px;resize:none;padding:12px 13px;border-radius:14px;border:1px solid rgba(170,139,228,.22);outline:none;background:rgba(4,7,17,.58);color:#f8f5ff;font-family:inherit;font-size:clamp(13px,1.035vw,17px);font-weight:800;line-height:1.65;caret-color:#ffd879;box-shadow:inset 0 5px 16px rgba(0,0,0,.18);touch-action:pan-y}.roulette-textarea:focus{border-color:#a47cfa;box-shadow:0 0 0 3px rgba(145,103,244,.12),inset 0 5px 16px rgba(0,0,0,.18)}
.roulette-editor-help{margin:8px 1px 0;color:#7f88a6;font-size:10.5px;line-height:1.45;font-weight:750}.roulette-editor-actions{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:10px}.roulette-apply,.roulette-reset{border:0;border-radius:12px;padding:10px 12px;font-weight:950}.roulette-apply{background:linear-gradient(135deg,#8a67f6,#e05caf);color:#fff;box-shadow:0 5px 0 #5f358f}.roulette-reset{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#aab4ce}.roulette-notice{min-height:17px;margin-top:7px;color:#ffb8c7;font-size:10.5px;font-weight:850}
.roulette-play{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}.roulette-play::before{content:"";position:absolute;width:min(46vh,38vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,193,70,.18),rgba(116,82,255,.06) 52%,transparent 72%);filter:blur(12px)}
.roulette-wheel-box{position:relative;z-index:2;width:min(42vh,35vw,430px);aspect-ratio:1;border-radius:50%;filter:drop-shadow(0 18px 27px rgba(0,0,0,.42));touch-action:manipulation}.roulette-wheel-ring{position:absolute;inset:-2.3%;border-radius:50%;border:clamp(6px,.65vw,10px) solid #efba4f;box-shadow:inset 0 0 0 3px #7d431a,0 0 0 3px #4a2511,0 0 32px rgba(255,186,65,.3);pointer-events:none;z-index:4}.roulette-canvas{display:block;width:100%;height:100%;border-radius:50%;transform:rotate(0deg);transition:transform 4.8s cubic-bezier(.09,.72,.08,1);will-change:transform}.roulette-center{position:absolute;left:50%;top:50%;z-index:6;width:21%;aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 27%,#fff8c9,#f7b52e 55%,#a95318);border:clamp(4px,.42vw,7px) solid #fff0b3;box-shadow:0 7px 16px rgba(65,26,8,.42),inset 0 2px 4px rgba(255,255,255,.65);color:#54270f;font-size:clamp(11px,0.92vw,14px);font-weight:1000;letter-spacing:.06em}.roulette-pointer{position:absolute;z-index:9;left:50%;top:-5.2%;transform:translateX(-50%);width:0;height:0;border-left:clamp(13px,1.4vw,21px) solid transparent;border-right:clamp(13px,1.4vw,21px) solid transparent;border-top:clamp(28px,3vw,43px) solid #fff3bd;filter:drop-shadow(0 4px 2px rgba(53,21,9,.5))}.roulette-pointer::after{content:"";position:absolute;left:50%;top:clamp(-43px,-3vw,-28px);transform:translateX(-50%);width:7px;height:55%;background:#df432f;border-radius:0 0 99px 99px}.roulette-wheel-box.spinning .roulette-pointer{animation:roulettePointerTick .13s ease-in-out infinite alternate}@keyframes roulettePointerTick{to{transform:translateX(-50%) rotate(9deg);transform-origin:50% 0}}
.roulette-spin{position:relative;z-index:3;min-width:190px;margin-top:clamp(12px,1.5vh,20px);padding:12px 26px;border:1px solid rgba(255,239,178,.5);border-radius:16px;background:linear-gradient(135deg,#ffc94e,#ef654d 54%,#bc4dda);color:#fff;font-size:clamp(18px,1.438vw,22px);font-weight:1000;letter-spacing:.04em;text-shadow:0 2px 2px rgba(94,28,24,.35);box-shadow:0 7px 0 #79325b,0 14px 30px rgba(232,84,98,.25)}.roulette-spin:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.07)}.roulette-spin:disabled{opacity:.5;box-shadow:none}
.roulette-result{position:absolute;z-index:30;left:50%;top:50%;width:min(410px,82%);transform:translate(-50%,-44%) scale(.88);padding:24px;border-radius:24px;background:linear-gradient(145deg,rgba(38,24,57,.98),rgba(11,17,31,.98));border:1px solid rgba(255,222,139,.4);box-shadow:0 25px 70px rgba(0,0,0,.55),0 0 45px rgba(255,172,61,.16);text-align:center;opacity:0;pointer-events:none;transition:.34s}.roulette-result.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}.roulette-result small{color:#eabf69;font-size:11px;font-weight:1000;letter-spacing:.18em}.roulette-result strong{display:block;margin:10px 0 18px;color:#fff6d5;font-size:clamp(28px,2.99vw,47.04px);line-height:1.15;word-break:keep-all;text-shadow:0 0 24px rgba(255,189,68,.25)}.roulette-result-actions{display:flex;justify-content:center;gap:8px}.roulette-result-actions button{padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.07);color:#e6eafa;font-weight:900}.roulette-result-actions .again{background:linear-gradient(135deg,#8d66f4,#d555a6);border:0;color:#fff}.roulette-confetti{position:absolute;inset:0;overflow:hidden;border-radius:24px;pointer-events:none}.roulette-confetti i{position:absolute;top:-12%;width:7px;height:14px;border-radius:2px;animation:rouletteConfetti 1.65s ease-in forwards}@keyframes rouletteConfetti{to{transform:translateY(360px) rotate(620deg);opacity:0}}
.luck-game-screen[data-game="roulette"] .luck-score-row .lose{max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#ffd98c;font-size:1.064em}
@media(min-width:821px){.expanded-library .tile-copy strong{font-size:clamp(16px,1.242vw,21px)}.expanded-library .tile-copy small{font-size:clamp(9.5px,0.667vw,12px)}}
@media(max-width:820px){
  .luck-game-screen[data-game="roulette"] .luck-stage{padding:6px}.luck-game-screen[data-game="roulette"] .luck-main{overflow:hidden}.luck-game-screen[data-game="roulette"] .luck-game-content{padding:7px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;align-items:stretch;justify-content:flex-start}
  .roulette-shell{height:auto;min-height:100%;grid-template-columns:1fr;gap:8px}.roulette-editor{padding:10px;border-radius:15px}.roulette-editor-head{margin-bottom:6px}.roulette-textarea{flex:none;height:92px;min-height:92px;line-height:1.45}.roulette-editor-help{display:none}.roulette-editor-actions{margin-top:7px}.roulette-notice{margin-top:4px}
  .roulette-play{min-height:330px;overflow:visible}.roulette-wheel-box{width:min(64vw,300px)}.roulette-play::before{width:min(72vw,330px)}.roulette-spin{min-width:170px;margin-top:12px;padding:10px 22px}.roulette-result{position:fixed;width:min(360px,86vw)}
}

/* v36 · customizable roulette + 007 survival */
.roulette-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px;padding:4px;border-radius:14px;background:rgba(4,7,17,.52);border:1px solid rgba(255,255,255,.07)}
.roulette-mode-tab{min-width:0;padding:9px 7px;border:0;border-radius:10px;background:transparent;color:#78829f;font-size:12px;font-weight:950;line-height:1.25}.roulette-mode-tab small{display:block;margin-top:2px;color:#59627b;font-size:9px}.roulette-mode-tab.active{color:#fff;background:linear-gradient(135deg,rgba(139,101,244,.88),rgba(214,78,161,.82));box-shadow:0 5px 15px rgba(111,60,166,.2)}.roulette-mode-tab.active small{color:#f0dffa}.roulette-mode-tab:disabled{opacity:.45}
.roulette-editor-body{min-height:0;flex:1;display:flex;flex-direction:column}.roulette-editor-help{flex:0 0 auto}.roulette-item-list{min-height:88px;flex:1;overflow:auto;display:grid;align-content:start;gap:6px;padding:1px 4px 1px 0;scrollbar-width:thin;scrollbar-color:#5b4a75 transparent;overscroll-behavior:contain}
.roulette-item-row{display:grid;grid-template-columns:28px minmax(74px,1fr) auto 25px;align-items:center;gap:6px;padding:6px;border:1px solid rgba(255,255,255,.075);border-radius:12px;background:rgba(255,255,255,.035)}.roulette-item-num{width:27px;height:27px;display:grid;place-items:center;border-radius:9px;background:var(--roulette-color);color:#fff;font-size:10px;font-weight:1000}.roulette-item-input{min-width:0;width:100%;padding:7px 8px!important;border-radius:9px!important;border:1px solid rgba(170,139,228,.14)!important;background:rgba(4,7,17,.44)!important;color:#f8f5ff!important;font-size:12px!important;font-weight:850!important}.roulette-item-input:focus{border-color:#a47cfa!important;outline:none}.roulette-weight{display:flex;align-items:center;gap:3px;padding:3px;border-radius:9px;background:rgba(255,255,255,.055)}.roulette-weight button{width:23px;height:23px;padding:0;border:0;border-radius:7px;background:rgba(255,255,255,.09);color:#e6def6;font-weight:1000}.roulette-weight span{min-width:49px;text-align:center;color:#a895c8;font-size:9px;font-weight:900;white-space:nowrap}.roulette-remove{width:24px;height:24px;padding:0;border:0;border-radius:8px;background:transparent;color:#716d84;font-size:21px;line-height:1}.roulette-remove:hover{background:rgba(255,96,130,.12);color:#ff809a}.roulette-list-actions{display:grid;grid-template-columns:1fr auto;gap:6px;margin-top:8px}.roulette-list-actions button{min-height:34px;border-radius:10px;font-size:11px;font-weight:950}.roulette-add{border:0;background:linear-gradient(135deg,#8a67f6,#e05caf);color:#fff;box-shadow:0 4px 0 #5f358f}.roulette-example{padding:0 10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);color:#aab4ce}
.roulette-lives-setting{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;padding:7px 8px;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:rgba(255,255,255,.035);color:#9aa4be;font-size:10px;font-weight:900}.roulette-lives-buttons{display:flex;gap:3px}.roulette-lives-buttons button{width:25px;height:25px;padding:0;border:0;border-radius:8px;background:rgba(255,255,255,.07);color:#8791aa;font-size:11px;font-weight:1000}.roulette-lives-buttons button.active{background:#32b997;color:#fff;box-shadow:0 0 0 2px rgba(59,211,172,.14)}.roulette-agent-row{grid-template-columns:28px minmax(74px,1fr) auto 25px}.roulette-agent-info{min-width:0;display:grid;grid-template-columns:minmax(60px,1fr) auto;align-items:center;gap:5px}.roulette-agent-hearts{color:#ff7795;font-size:10px;font-weight:950;letter-spacing:.04em;white-space:nowrap}.roulette-agent-row.out{opacity:.45;filter:grayscale(.55)}.roulette-agent-row.out .roulette-agent-hearts{color:#9aa1b2}.roulette-agent-row.out .roulette-item-input{text-decoration:line-through}.roulette-agent-add{background:linear-gradient(135deg,#32b997,#4b80d8);box-shadow:0 4px 0 #1d7465}
.roulette-play{justify-content:flex-start;padding:1.2% 1%;overflow:hidden}.roulette-play-head{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;gap:7px;min-height:22px;color:#929bb5;font-size:10px;font-weight:900}.roulette-play-head b{color:#ffd987}.roulette-wheel-box{width:min(36vh,30vw,370px);touch-action:pan-y;cursor:grab}.roulette-wheel-box:active{cursor:grabbing}.roulette-spin{min-width:170px;margin-top:10px;padding:10px 22px;font-size:clamp(14px,1.15vw,19px)}.roulette-result-dock{position:relative;z-index:5;width:min(540px,94%);min-height:72px;margin-top:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.045);color:#929bb5;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}.roulette-result-dock.ready strong{color:#aeb6cb}.roulette-result-dock.win{border-color:rgba(255,217,118,.4);background:linear-gradient(135deg,rgba(104,57,141,.42),rgba(41,30,62,.78));box-shadow:0 10px 28px rgba(0,0,0,.2)}.roulette-result-dock small{display:block;color:#b194d3;font-size:9px;font-weight:1000;letter-spacing:.16em}.roulette-result-dock strong{display:block;margin-top:3px;color:#fff5d4;font-size:clamp(16px,1.38vw,22px);line-height:1.25;word-break:keep-all}.roulette-result-dock .dock-action{margin-top:7px;padding:7px 11px;border:0;border-radius:9px;background:linear-gradient(135deg,#8d66f4,#d555a6);color:#fff;font-size:10px;font-weight:950}.roulette-result-dock .roulette-confetti{border-radius:16px}.roulette-decision{width:100%}.roulette-decision-head{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left}.roulette-decision-head b{flex:0 0 auto;width:43px;height:43px;display:grid;place-items:center;border-radius:50%;background:rgba(255,203,88,.12);border:2px solid rgba(255,213,113,.42);color:#ffd770;font-size:23px}.roulette-decision-head b.urgent{color:#ff8298;border-color:#ff8298;animation:rouletteUrgent .55s ease-in-out infinite alternate}@keyframes rouletteUrgent{to{transform:scale(1.08)}}.roulette-auto-out{margin:5px 0 0;color:#ff9caf;font-size:9px;font-weight:850}.roulette-targets{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px}.roulette-target{min-width:0;padding:7px 8px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(255,255,255,.055);color:#dce3f5;font-size:10px;font-weight:900}.roulette-target strong{margin:0 0 2px;font-size:13px}.roulette-target.saved{border-color:rgba(76,220,175,.42);background:rgba(44,188,145,.14);color:#80efd0}.roulette-target:disabled{opacity:.75}.roulette-decision-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px}.roulette-decision-actions button{min-height:29px;border-radius:9px;font-size:10px;font-weight:950}.roulette-confirm{border:0;background:#2bb78f;color:#fff}.roulette-skip{border:1px solid rgba(255,119,145,.24);background:rgba(255,89,122,.11);color:#ff9eb0}.roulette-summary small{margin-bottom:3px}.roulette-summary span{display:block;margin-top:4px;color:#8f9ab6;font-size:10px;font-weight:850}.roulette-winner strong{font-size:clamp(25.76px,2.3vw,38.08px);text-shadow:0 0 22px rgba(255,193,66,.35)}
.roulette-record-line{display:block;margin-top:3px;color:#8791ad;font-size:9px;font-weight:850}
.roulette-editor{min-height:0;overflow:hidden}.roulette-editor-body{min-height:0;overflow:hidden}.roulette-item-list{overflow-y:auto!important;overflow-x:hidden!important;padding-right:8px}.roulette-item-list::-webkit-scrollbar{width:7px}.roulette-item-list::-webkit-scrollbar-track{border-radius:999px;background:rgba(255,255,255,.035)}.roulette-item-list::-webkit-scrollbar-thumb{border-radius:999px;background:linear-gradient(#8967d4,#cf579f);border:1px solid rgba(255,255,255,.08)}.roulette-list-actions.basic-only{grid-template-columns:1fr}.roulette-agent-life-control{display:flex;align-items:center;gap:3px;padding:3px;border-radius:9px;background:rgba(255,255,255,.055)}.roulette-agent-life-control button{width:23px;height:23px;padding:0;border:0;border-radius:7px;background:rgba(255,255,255,.09);color:#e6def6;font-weight:1000}.roulette-agent-life-control button:hover:not(:disabled){background:rgba(50,185,151,.2);color:#8ff0d2}.roulette-agent-life-control span{min-width:38px;color:#ff8da5;font-size:10px;font-weight:950;text-align:center;white-space:nowrap}
@media(max-width:820px){.roulette-mode-tabs{position:sticky;top:0;z-index:8}.roulette-item-list{flex:none;max-height:280px;overflow-y:auto!important}.roulette-play{min-height:440px;padding:8px;justify-content:flex-start;overflow:visible}.roulette-shell[data-mode="007"] .roulette-play{min-height:610px}.roulette-wheel-box{width:min(62vw,285px)}.roulette-result-dock{width:min(430px,96%);min-height:72px}.roulette-editor{min-height:380px}.roulette-shell[data-mode="007"] .roulette-editor{min-height:430px}.roulette-targets{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.roulette-item-row{grid-template-columns:27px minmax(0,1fr) 24px}.roulette-weight{grid-column:2}.roulette-agent-row{grid-template-columns:27px minmax(0,1fr) 24px}.roulette-agent-info{grid-template-columns:1fr}.roulette-agent-hearts{font-size:9px}.roulette-play{min-height:455px}.roulette-shell[data-mode="007"] .roulette-play{min-height:610px}.roulette-wheel-box{width:min(70vw,270px)}.roulette-result-dock{padding:8px}.roulette-decision-head strong{font-size:13px}}

/* v37 · pastel editor + midnight roulette stage */
.luck-game-screen[data-game="roulette"]{color:#443951;background:#fff8f3}
.luck-game-screen[data-game="roulette"] .luck-bg{background:radial-gradient(circle at 8% 18%,rgba(255,181,198,.62),transparent 28%),radial-gradient(circle at 88% 14%,rgba(255,224,154,.62),transparent 26%),radial-gradient(circle at 48% 90%,rgba(205,186,255,.58),transparent 36%),linear-gradient(145deg,#fff7f4 0%,#f7f2ff 52%,#fff8e7 100%)}
.luck-game-screen[data-game="roulette"] .luck-topbar{height:10%;padding:0 2.6%;border-bottom:1px solid rgba(117,85,137,.12);background:rgba(255,252,250,.86);box-shadow:0 8px 30px rgba(96,67,112,.08);backdrop-filter:blur(18px)}
.luck-game-screen[data-game="roulette"] .luck-title{gap:12px}.luck-game-screen[data-game="roulette"] .luck-title-icon{width:43px;height:43px;border:4px solid #fff;border-radius:50%;background:conic-gradient(from 20deg,#ff7394,#ffb65e,#77d5bc,#7aa8ff,#bd78e8,#ff7394);color:#fff;box-shadow:0 8px 22px rgba(176,95,143,.22);text-shadow:0 2px 5px rgba(74,38,69,.24)}
.luck-game-screen[data-game="roulette"] .luck-title small{color:#db5278}.luck-game-screen[data-game="roulette"] .luck-title h2{color:#443951}.luck-game-screen[data-game="roulette"] .luck-back-btn{border:1px solid #e8dceb;background:rgba(255,255,255,.82);color:#6c5c78;box-shadow:0 5px 14px rgba(99,71,113,.08)}.luck-game-screen[data-game="roulette"] .luck-back-btn:hover{background:#fff;border-color:#d8c4df}
.luck-game-screen[data-game="roulette"] .luck-stage{height:90%;grid-template-columns:minmax(0,1fr);padding:1.25% 1.8% 1.7%}.luck-game-screen[data-game="roulette"] .luck-side{display:none}.luck-game-screen[data-game="roulette"] .luck-main{border:1px solid rgba(133,99,150,.14);border-radius:30px;background:rgba(255,253,252,.86);box-shadow:0 25px 70px rgba(88,57,103,.15),inset 0 1px 0 #fff}.luck-game-screen[data-game="roulette"] .luck-main::before{display:none}.luck-game-screen[data-game="roulette"] .luck-game-content{padding:1.15%;overflow:hidden}
.luck-game-screen[data-game="roulette"] .roulette-shell{grid-template-columns:minmax(360px,.88fr) minmax(400px,1.32fr);gap:1.25%}
.luck-game-screen[data-game="roulette"] .roulette-editor{padding:clamp(14px,1.55vw,23px);border:1px solid #eadfee;border-radius:24px;background:linear-gradient(155deg,rgba(255,255,255,.96),rgba(251,246,255,.94));box-shadow:0 14px 36px rgba(104,75,121,.1),inset 0 1px 0 #fff;color:#453a52}
.luck-game-screen[data-game="roulette"] .roulette-mode-tabs{border:1px solid #eadfee;background:#f4edf7;box-shadow:inset 0 1px 4px rgba(102,73,118,.06)}.luck-game-screen[data-game="roulette"] .roulette-mode-tab{color:#85748f}.luck-game-screen[data-game="roulette"] .roulette-mode-tab small{color:#aa9bb2}.luck-game-screen[data-game="roulette"] .roulette-mode-tab.active{color:#fff;background:linear-gradient(135deg,#ff688d,#b568df);box-shadow:0 6px 18px rgba(187,85,152,.24)}.luck-game-screen[data-game="roulette"] .roulette-mode-tab.active small{color:#fff2fa}
.luck-game-screen[data-game="roulette"] .roulette-editor-head small{color:#dd527a}.luck-game-screen[data-game="roulette"] .roulette-editor-head strong{color:#41364e}.luck-game-screen[data-game="roulette"] .roulette-count{background:#fff0f5;color:#d54e77;border:1px solid #f4d7e2}.luck-game-screen[data-game="roulette"] .roulette-editor-help{color:#93839d}
.luck-game-screen[data-game="roulette"] .roulette-item-row{border-color:#eadfeb;background:rgba(255,255,255,.78);box-shadow:0 4px 12px rgba(88,60,102,.045)}.luck-game-screen[data-game="roulette"] .roulette-item-input{border-color:#e6d9ea!important;background:#fff!important;color:#4b4057!important;box-shadow:inset 0 2px 5px rgba(92,66,105,.045)}.luck-game-screen[data-game="roulette"] .roulette-item-input:focus{border-color:#c886dd!important;box-shadow:0 0 0 3px rgba(190,111,214,.12)}
.luck-game-screen[data-game="roulette"] .roulette-weight,.luck-game-screen[data-game="roulette"] .roulette-agent-control{background:#f4eef7;border:1px solid #e8dceb}.luck-game-screen[data-game="roulette"] .roulette-weight button,.luck-game-screen[data-game="roulette"] .roulette-agent-control button{background:#fff;color:#7c6688;box-shadow:0 2px 5px rgba(93,67,105,.08)}.luck-game-screen[data-game="roulette"] .roulette-weight button:hover:not(:disabled),.luck-game-screen[data-game="roulette"] .roulette-agent-control button:hover:not(:disabled){background:#fff0f5;color:#db4f79}.luck-game-screen[data-game="roulette"] .roulette-weight span{color:#7e6b89}.luck-game-screen[data-game="roulette"] .roulette-remove{color:#b4a6b9}.luck-game-screen[data-game="roulette"] .roulette-remove:hover{background:#fff0f3;color:#ed5877}.luck-game-screen[data-game="roulette"] .roulette-example{border-color:#dfd2e4;background:#fff;color:#75647f}.luck-game-screen[data-game="roulette"] .roulette-notice{color:#d45176}
.roulette-agent-controls{display:grid;gap:4px}.roulette-agent-control{display:grid;grid-template-columns:auto 23px minmax(48px,auto) 23px;align-items:center;gap:3px;padding:3px;border-radius:9px}.roulette-agent-control em{padding:0 2px;color:#95849f;font-size:9px;font-style:normal;font-weight:950}.roulette-agent-control button{width:23px;height:23px;padding:0;border:0;border-radius:7px;font-weight:1000}.roulette-agent-control span{min-width:48px;text-align:center;font-size:9px;font-weight:950;white-space:nowrap}.roulette-agent-life-control span{color:#df5678}.roulette-agent-weight-control span{color:#765e84}.roulette-agent-weight-control span b{color:#b34fc5}.roulette-agent-row.out .roulette-agent-controls{opacity:.68}
.luck-game-screen[data-game="roulette"] .roulette-item-list{scrollbar-color:#d18ad8 #f0e8f2}.luck-game-screen[data-game="roulette"] .roulette-item-list::-webkit-scrollbar-track{background:#f0e8f2}.luck-game-screen[data-game="roulette"] .roulette-item-list::-webkit-scrollbar-thumb{border-color:#f5eef7;background:linear-gradient(#ff89a5,#b87add)}
.luck-game-screen[data-game="roulette"] .roulette-play{isolation:isolate;justify-content:flex-start;padding:1.15% 1.4% 1%;border:1px solid rgba(255,229,162,.18);border-radius:24px;background:radial-gradient(circle at 50% 38%,rgba(128,76,166,.28),transparent 38%),radial-gradient(circle at 16% 16%,rgba(255,205,100,.09) 0 1px,transparent 2px),radial-gradient(circle at 80% 22%,rgba(255,255,255,.12) 0 1px,transparent 2px),linear-gradient(145deg,#251631 0%,#111522 50%,#27182f 100%);background-size:auto,38px 38px,54px 54px,auto;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 48px rgba(42,25,53,.24)}.luck-game-screen[data-game="roulette"] .roulette-play::before{width:min(45vh,34vw,430px);background:radial-gradient(circle,rgba(255,197,82,.17),rgba(137,85,190,.08) 50%,transparent 72%)}.luck-game-screen[data-game="roulette"] .roulette-play-head{color:#b7adc2}.luck-game-screen[data-game="roulette"] .roulette-play-head b{color:#ffdc83}.luck-game-screen[data-game="roulette"] .roulette-wheel-box{width:min(36vh,29vw,390px);filter:drop-shadow(0 22px 34px rgba(0,0,0,.5))}.luck-game-screen[data-game="roulette"] .roulette-wheel-ring{border-color:#f5c762;box-shadow:inset 0 0 0 3px #8c4e20,0 0 0 3px #4e2515,0 0 38px rgba(255,193,78,.38)}
.luck-game-screen[data-game="roulette"] .roulette-result-dock{width:min(580px,94%);border-color:rgba(255,255,255,.11);background:rgba(255,255,255,.055);backdrop-filter:blur(10px)}.luck-game-screen[data-game="roulette"] .roulette-result-dock.win{border-color:rgba(255,216,117,.38);background:linear-gradient(135deg,rgba(113,61,144,.48),rgba(36,27,53,.82))}
.roulette-mini-stats{position:relative;z-index:4;width:min(580px,94%);display:grid;grid-template-columns:repeat(3,1fr);margin-top:8px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(6,8,16,.24);overflow:hidden}.roulette-mini-stat{padding:7px 6px;text-align:center}.roulette-mini-stat+.roulette-mini-stat{border-left:1px solid rgba(255,255,255,.075)}.roulette-mini-stat small{display:block;color:#766f86;font-size:8.5px;font-weight:950;letter-spacing:.12em}.roulette-mini-stat strong{display:block;margin-top:2px;color:#f5e9ff;font-size:12px;font-weight:950}.roulette-mini-stat:nth-child(2) strong{color:#ffd779}.roulette-mini-stat:nth-child(3) strong{color:#87e6cb}
/* v37 · larger, easier-to-read roulette type */
.luck-game-screen[data-game="roulette"] .roulette-mode-tab{font-size:14px}.luck-game-screen[data-game="roulette"] .roulette-mode-tab small{font-size:11px}.luck-game-screen[data-game="roulette"] .roulette-editor-head small{font-size:12px}.luck-game-screen[data-game="roulette"] .roulette-editor-head strong{font-size:clamp(22px,1.782vw,28px)}.luck-game-screen[data-game="roulette"] .roulette-count{font-size:13px}.luck-game-screen[data-game="roulette"] .roulette-editor-help{font-size:13px;line-height:1.55}.luck-game-screen[data-game="roulette"] .roulette-item-num{font-size:12px}.luck-game-screen[data-game="roulette"] .roulette-item-input{font-size:16px!important}.luck-game-screen[data-game="roulette"] .roulette-weight span{min-width:72px;font-size:12px}.luck-game-screen[data-game="roulette"] .roulette-weight button,.luck-game-screen[data-game="roulette"] .roulette-agent-control button{font-size:19px}.luck-game-screen[data-game="roulette"] .roulette-list-actions button{font-size:14px}.luck-game-screen[data-game="roulette"] .roulette-notice{font-size:13px}.roulette-agent-control em{font-size:11px}.roulette-agent-control span{min-width:70px;font-size:12px}.luck-game-screen[data-game="roulette"] .roulette-play-head{font-size:13px}.luck-game-screen[data-game="roulette"] .roulette-spin{min-width:205px;padding:12px 25px;font-size:19px}.luck-game-screen[data-game="roulette"] .roulette-result-dock{min-height:84px}.luck-game-screen[data-game="roulette"] .roulette-result-dock small{font-size:11px}.luck-game-screen[data-game="roulette"] .roulette-result-dock strong{font-size:clamp(19px,1.495vw,23.52px)}.luck-game-screen[data-game="roulette"] .roulette-record-line{font-size:11px}.luck-game-screen[data-game="roulette"] .roulette-result-dock .dock-action{font-size:13px}.luck-game-screen[data-game="roulette"] .roulette-decision-head b{width:50px;height:50px;font-size:26.88px}.luck-game-screen[data-game="roulette"] .roulette-auto-out{font-size:12px}.luck-game-screen[data-game="roulette"] .roulette-target{font-size:13px}.luck-game-screen[data-game="roulette"] .roulette-target strong{font-size:17px}.luck-game-screen[data-game="roulette"] .roulette-decision-actions button{font-size:13px}.luck-game-screen[data-game="roulette"] .roulette-summary span{font-size:12px}.roulette-mini-stat small{font-size:10.5px}.roulette-mini-stat strong{font-size:16px}
@media(max-width:820px){.luck-game-screen[data-game="roulette"] .luck-topbar{height:10%;padding:0 13px}.luck-game-screen[data-game="roulette"] .luck-stage{height:90%;padding:7px}.luck-game-screen[data-game="roulette"] .luck-main{border-radius:20px}.luck-game-screen[data-game="roulette"] .luck-game-content{padding:7px;overflow-y:auto}.luck-game-screen[data-game="roulette"] .roulette-shell{grid-template-columns:1fr;gap:9px}.luck-game-screen[data-game="roulette"] .roulette-editor{min-height:390px;border-radius:18px}.luck-game-screen[data-game="roulette"] .roulette-shell[data-mode="007"] .roulette-editor{min-height:500px}.luck-game-screen[data-game="roulette"] .roulette-play{min-height:490px;border-radius:18px}.luck-game-screen[data-game="roulette"] .roulette-shell[data-mode="007"] .roulette-play{min-height:620px}.luck-game-screen[data-game="roulette"] .roulette-wheel-box{width:min(62vw,285px)}.roulette-mini-stats{width:min(430px,96%)}}
@media(max-width:480px){.roulette-agent-controls{grid-column:2}.roulette-agent-control{grid-template-columns:28px 24px minmax(58px,1fr) 24px}.roulette-agent-row>.roulette-remove{grid-column:3;grid-row:1}.luck-game-screen[data-game="roulette"] .roulette-editor{padding:10px}.luck-game-screen[data-game="roulette"] .roulette-play{min-height:500px}.luck-game-screen[data-game="roulette"] .roulette-shell[data-mode="007"] .roulette-play{min-height:630px}}


/* v33: keep every result UI away from gameplay/action buttons */
/* Offline luck games: dock results in the upper-right corner, never over bottom choices/actions. */
.luck-game-screen .result-banner,
.luck-game-screen[data-game="coin"] .result-banner{
  left:auto;
  right:2.2%;
  top:2.6%;
  bottom:auto;
  width:auto;
  min-width:min(250px,34%);
  max-width:40%;
  padding:12px 16px;
  text-align:right;
  transform:translateY(-12px) scale(.98);
  z-index:18;
}
.luck-game-screen .result-banner.show,
.luck-game-screen[data-game="coin"] .result-banner.show{
  transform:translateY(0) scale(1);
}

/* Fishing: result card sits under the top-left HUD instead of near the cast button. */
.fish-result-card{
  left:2.2%;
  right:auto;
  top:13.5%;
  bottom:auto;
  min-width:240px;
  max-width:32%;
  transform:translate(-14px,-4px) scale(.96);
  z-index:26;
}
.fish-result-card.visible{
  transform:translate(0,0) scale(1);
}

/* Ladder: result text owns its own flexible row and action buttons never shrink underneath it. */
.paper-footer{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
}
.result-toast{
  min-width:0;
  width:100%;
  padding-right:10px;
}
.paper-actions{
  flex:0 0 auto;
  justify-content:flex-end;
}

@media(max-width:820px){
  .luck-game-screen .result-banner,
  .luck-game-screen[data-game="coin"] .result-banner{
    left:auto;
    right:10px;
    top:10px;
    bottom:auto;
    width:auto;
    min-width:0;
    max-width:min(56%,260px);
    padding:9px 11px;
    text-align:right;
    font-size:clamp(12px,2.3vw,16px);
    transform:translateY(-9px) scale(.98);
  }
  .luck-game-screen .result-banner.show,
  .luck-game-screen[data-game="coin"] .result-banner.show{
    transform:translateY(0) scale(1);
  }
  .fish-result-card{
    left:2.5%;
    top:13%;
    bottom:auto;
    min-width:0;
    width:min(44%,230px);
    max-width:44%;
    padding:9px 11px 10px;
  }
  .paper-footer{
    grid-template-columns:1fr;
    gap:7px;
    align-items:stretch;
  }
  .result-toast{
    padding-right:0;
    white-space:normal;
    line-height:1.35;
  }
  .paper-actions{
    width:100%;
    overflow-x:auto;
    justify-content:flex-start;
    padding-bottom:2px;
  }
}


/* =========================
   v34 · ONLINE ZONE
   ========================= */
.hub-category-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:18px 2px 10px;color:#62576f}.hub-category-row>div{display:flex;align-items:center;gap:8px;min-width:0}.hub-category-row strong{font-size:13px;letter-spacing:.14em;font-weight:1000}.hub-category-row small{font-size:12px;color:#a297ad;font-weight:800}.hub-category-dot{width:8px;height:8px;border-radius:50%;display:inline-block;box-shadow:0 0 0 5px rgba(90,120,255,.08)}.hub-category-dot.offline{background:#ff7897;box-shadow:0 0 0 5px rgba(255,105,143,.09)}.hub-category-dot.online{background:#4bdab6;box-shadow:0 0 0 5px rgba(75,218,182,.1),0 0 18px rgba(55,213,174,.26)}.hub-category-count{font-size:11px;letter-spacing:.12em;font-weight:1000;color:#9f93aa}.hub-category-count.online-count{color:#269a7f}.hub-category-count.online-count i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#42d6ae;margin-right:5px;box-shadow:0 0 10px #42d6ae;animation:onlineBlink 1.5s ease-in-out infinite}.online-library{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.5vw,24px);padding-bottom:8px}.online-tile{min-height:clamp(180px,20vh,250px);border-color:#ccece5!important;overflow:hidden;isolation:isolate}.online-tile::after{content:"";position:absolute;width:55%;aspect-ratio:1;border-radius:50%;right:-17%;bottom:-42%;background:radial-gradient(circle,rgba(63,219,179,.25),transparent 65%);filter:blur(5px);z-index:-1}.rps-online-tile{background:linear-gradient(145deg,#effffb,#f1f7ff 55%,#fbf5ff)}.yut-online-tile{background:linear-gradient(145deg,#fffaf1,#fff5ed 52%,#f4f1ff)}.online-badge{background:#dcfaf1!important;color:#16876d!important;border:1px solid #bfeee1}.online-enter{color:#168a70}.online-enter b{background:linear-gradient(135deg,#3bcda9,#3b9bd7)}.online-icon{position:relative;background:linear-gradient(145deg,#f9fffd,#e7f9f4);border-color:#c5eee3;overflow:hidden}.rps-icon i{position:absolute;font-style:normal;font-size:clamp(23px,2.3vw,32.48px);filter:drop-shadow(0 4px 5px rgba(25,88,75,.12))}.rps-icon i:nth-child(1){left:10%;bottom:11%;transform:rotate(-12deg)}.rps-icon i:nth-child(2){right:9%;bottom:10%;transform:rotate(11deg)}.rps-icon i:nth-child(3){left:50%;top:7%;transform:translateX(-50%)}.yut-icon{display:flex!important;gap:4px!important;align-items:center!important;justify-content:center!important;background:linear-gradient(145deg,#fff9ee,#f3e6d3)!important}.yut-icon i{display:block;width:12%;height:62%;border-radius:999px;background:linear-gradient(90deg,#7d4b26,#d49d63 42%,#f2c98f 63%,#8b562e);box-shadow:inset 2px 0 2px rgba(255,255,255,.45),0 4px 6px rgba(98,51,24,.2);transform:rotate(10deg)}.yut-icon i:nth-child(even){transform:rotate(-10deg);background:linear-gradient(90deg,#75421f,#be824d 40%,#eab879 66%,#75421f)}
@keyframes onlineBlink{50%{opacity:.35;transform:scale(.8)}}

body[data-view="online-game"]{background:#06141c;overflow:hidden}.online-game-screen{width:100%;height:100%;position:relative;overflow:hidden;background:radial-gradient(circle at 50% -20%,#173d4d 0,#0c202c 42%,#07151e 100%);color:#eefbff}.online-grid-bg{position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:linear-gradient(rgba(83,214,190,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(83,214,190,.16) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,black,transparent 75%)}.online-topbar{height:10.5%;min-height:64px;padding:0 2.4%;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5;background:rgba(3,13,19,.74);border-bottom:1px solid rgba(144,235,217,.13);backdrop-filter:blur(12px)}.online-title-wrap{display:flex;align-items:center;gap:12px}.online-title-icon{width:45px;height:45px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#38d0ae,#257fa2);font-weight:1000;letter-spacing:-.04em;box-shadow:0 0 28px rgba(48,207,170,.2)}.online-title-wrap small{display:block;color:#59d5b8;font-size:11px;font-weight:1000;letter-spacing:.18em}.online-title-wrap h2{margin:2px 0 0;color:#f4ffff;font-size:clamp(23px,2.3vw,34.72px);letter-spacing:-.04em}.online-top-actions{display:flex;align-items:center;gap:9px}.online-net-pill{height:36px;padding:0 12px;border-radius:999px;display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);color:#78909a;font-size:12px;font-weight:900}.online-net-pill span{width:7px;height:7px;border-radius:50%;background:#72838b}.online-net-pill.connected{color:#8ff0d4;border-color:rgba(87,222,186,.22);background:rgba(40,170,139,.09)}.online-net-pill.connected span{background:#4de0b6;box-shadow:0 0 12px #4de0b6}.online-net-pill.waiting{color:#ffd88b}.online-net-pill.waiting span{background:#ffc663;box-shadow:0 0 10px #ffc663;animation:onlineBlink 1.1s infinite}.online-leave-btn{height:38px;padding:0 13px;border-radius:11px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:#e5f4f7;font-weight:900}.online-layout{position:relative;z-index:2;height:89.5%;padding:2.2%;display:grid}.online-lobby,.online-match-lobby,.online-arena{height:100%;min-height:0}.online-lobby{display:grid;grid-template-columns:.95fr 1.05fr;gap:4%;align-items:center;padding:2% 5%}.online-lobby-copy{max-width:610px}.online-eyebrow{display:inline-flex;padding:7px 10px;border-radius:999px;background:rgba(56,210,174,.09);border:1px solid rgba(76,224,190,.18);color:#65dfc1;font-size:11px;letter-spacing:.18em;font-weight:1000}.online-lobby-copy h3{margin:14px 0 12px;font-size:clamp(39.2px,4.83vw,76.16px);line-height:.98;letter-spacing:-.065em}.online-lobby-copy h3 em{font-style:normal;color:#75ead0}.online-lobby-copy p{max-width:560px;color:#91a8b3;line-height:1.75;font-size:clamp(14px,1.15vw,18px);font-weight:700}.online-feature-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:22px}.online-feature-row span{padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.065);font-size:12px;color:#b7c9cf;font-weight:850}.online-lobby-panel{padding:clamp(20px,2.5vw,38px);border-radius:28px;background:linear-gradient(145deg,rgba(18,42,52,.88),rgba(7,25,34,.9));border:1px solid rgba(120,224,205,.13);box-shadow:0 28px 70px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05)}.online-field-label{display:block;margin:0 0 7px;color:#8aa4ae;font-size:12px;font-weight:950;letter-spacing:.12em}.online-input{border:1px solid rgba(137,218,205,.15);background:rgba(2,11,17,.55);color:#f4ffff;outline:none;transition:.18s}.online-input:focus{border-color:#4bd9b5;box-shadow:0 0 0 3px rgba(55,211,173,.1)}.online-input.nickname{width:100%;height:48px;padding:0 14px;border-radius:13px;font-size:19px;font-weight:900}.online-room-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:15px}.online-room-card{min-width:0;min-height:166px;padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.085);background:rgba(255,255,255,.04);color:#ecfbff;text-align:left;transition:.17s}.online-room-card.create{cursor:pointer}.online-room-card.create:hover{transform:translateY(-3px);background:rgba(50,210,174,.075);border-color:rgba(67,221,184,.28)}.room-card-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:rgba(73,220,184,.11);color:#6ce3c5;font-size:26.88px;font-weight:700}.online-room-card strong{display:block;margin:12px 0 3px;font-size:20px}.online-room-card small{display:block;color:#78919a;line-height:1.45;font-size:12px;font-weight:750}.room-code-entry{display:flex;gap:5px;margin-top:10px}.online-input.code{width:100%;min-width:0;height:36px;border-radius:9px;padding:0 8px;text-align:center;text-transform:uppercase;font-weight:1000;letter-spacing:.12em}.room-code-entry button{width:55px;border:0;border-radius:9px;background:linear-gradient(135deg,#49d2b1,#368fb0);color:white;font-weight:900;font-size:13px}.online-room-box{margin-top:14px;padding:13px 15px;border-radius:15px;background:rgba(61,214,178,.07);border:1px solid rgba(82,224,190,.16)}.online-room-box>small{display:block;color:#6ccdb8;font-size:10px;letter-spacing:.2em;font-weight:1000}.room-code-display{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:2px}.room-code-display strong{font-size:clamp(30.24px,3.45vw,47.04px);letter-spacing:.13em}.room-code-display button{border:0;border-radius:9px;padding:7px 10px;background:rgba(255,255,255,.08);color:#d8f8ef;font-weight:900}.online-room-box p{margin:4px 0 0;color:#93aaa9;font-size:12px;font-weight:750}.online-lobby-error{margin-top:12px;padding:10px 12px;border-radius:11px;background:rgba(255,80,105,.09);border:1px solid rgba(255,100,123,.19);color:#ff9cab;font-size:13px;font-weight:800;line-height:1.45}

.online-match-lobby{display:grid;place-items:center;align-content:center;gap:22px}.match-lobby-head{text-align:center}.match-lobby-head span{display:block;color:#7be5cb;font-size:14px;font-weight:900;letter-spacing:.12em}.match-lobby-head b{font-size:24.64px;letter-spacing:.16em}.match-lobby-head small{display:block;margin-top:5px;color:#758d97;font-weight:800}.versus-ready-grid{width:min(880px,85%);display:grid;grid-template-columns:1fr 100px 1fr;align-items:center;gap:14px}.ready-player-card{position:relative;padding:28px 20px;border-radius:25px;text-align:center;background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.09);transition:.25s}.ready-player-card.ready{border-color:rgba(74,227,187,.45);box-shadow:0 0 35px rgba(44,207,167,.1)}.player-role{position:absolute;left:13px;top:12px;color:#607c88;font-size:10px;letter-spacing:.16em;font-weight:1000}.ready-avatar{width:76px;height:76px;margin:auto;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#273e54,#142836);color:#84ddca;font-size:25.76px;font-weight:1000;border:1px solid rgba(104,219,197,.16)}.ready-player-card.guest .ready-avatar{color:#9ab5ff;background:linear-gradient(145deg,#2b3457,#181f3b)}.ready-player-card strong{display:block;margin-top:12px;font-size:23px}.ready-player-card em{display:block;margin-top:4px;font-style:normal;color:#718a94;font-size:12px;font-weight:900}.ready-player-card.ready em{color:#66dfc2}.ready-vs{text-align:center}.ready-vs span{font-size:31.36px;font-weight:1000;color:#d3e6ea}.ready-vs i{display:block;width:40px;height:2px;margin:8px auto;background:linear-gradient(90deg,transparent,#4bdab6,transparent)}.online-ready-btn{min-width:220px;padding:14px 28px;border:0;border-radius:17px;background:linear-gradient(135deg,#49d6b3,#348fb1);color:white;font-size:20px;font-weight:1000;box-shadow:0 8px 0 #1b6e73,0 14px 35px rgba(43,191,161,.2)}.online-ready-btn.ready{background:linear-gradient(135deg,#657988,#43545e);box-shadow:0 8px 0 #26343b}.online-ready-hint{margin:0;color:#718993;font-size:13px;font-weight:800}

.online-arena{display:flex;flex-direction:column;gap:12px}.online-player-strip{height:58px;flex:0 0 58px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);overflow:hidden}.strip-player{height:100%;padding:0 18px;display:grid;grid-template-columns:38px 1fr;grid-template-rows:1fr 1fr;align-items:end;column-gap:8px}.strip-player>span{grid-row:1/3;width:34px;height:34px;align-self:center;display:grid;place-items:center;border-radius:11px;background:rgba(75,218,182,.1);color:#5fe0c1;font-size:12px;font-weight:1000}.strip-player strong{align-self:end;font-size:16px}.strip-player small{align-self:start;color:#607984;font-size:10px;font-weight:900;letter-spacing:.1em}.strip-player.guest{text-align:right;grid-template-columns:1fr 38px}.strip-player.guest>span{grid-column:2;grid-row:1/3;background:rgba(107,130,255,.1);color:#9bb0ff}.strip-player.guest strong,.strip-player.guest small{grid-column:1}.strip-room{text-align:center;padding:0 28px}.strip-room span{display:block;color:#8ca2aa;font-size:10px;font-weight:1000;letter-spacing:.18em}.strip-room b{display:block;color:#dffbf5;font-size:14px;letter-spacing:.13em}.online-game-content{position:relative;flex:1;min-height:0;border-radius:24px;overflow:hidden;background:radial-gradient(circle at 50% 35%,rgba(39,104,111,.28),rgba(4,14,20,.78) 70%);border:1px solid rgba(112,210,196,.08)}.online-toast{position:absolute;left:50%;bottom:4.4%;transform:translateX(-50%) translateY(12px);z-index:20;min-width:250px;max-width:70%;padding:10px 16px;border-radius:999px;background:rgba(1,10,15,.88);border:1px solid rgba(255,255,255,.1);color:#dfeff2;font-size:13px;font-weight:900;text-align:center;opacity:0;pointer-events:none;transition:.25s}.online-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.online-toast.win{color:#7df0cf;border-color:rgba(75,225,187,.3)}.online-toast.lose{color:#ffa0af;border-color:rgba(255,111,133,.26)}

/* RPS */
.rps-arena{height:100%;display:grid;grid-template-rows:auto 1fr auto;align-items:center;padding:2.7% 5% 3.5%;position:relative}.rps-scoreboard{display:flex;justify-content:center;align-items:center;gap:18px}.rps-score{width:104px;text-align:center}.rps-score small{display:block;color:#708994;font-size:10px;font-weight:1000;letter-spacing:.15em}.rps-score strong{display:block;font-size:39.2px;line-height:1}.rps-score.host strong{color:#65e1c4}.rps-score.guest strong{color:#9db1ff}.rps-round{padding:7px 15px;border-radius:999px;background:rgba(255,255,255,.055);color:#a2b7bf;font-size:11px;font-weight:1000;letter-spacing:.14em}.rps-stage{width:100%;display:grid;grid-template-columns:1fr 140px 1fr;align-items:center}.rps-hand-side{text-align:center}.rps-hand-label{color:#718c96;font-size:11px;font-weight:1000;letter-spacing:.13em}.rps-hand{width:clamp(110px,13vw,190px);aspect-ratio:1;margin:8px auto 0;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.13),rgba(255,255,255,.025) 58%,transparent 60%);border:1px solid rgba(255,255,255,.08);font-size:clamp(67.2px,9.2vw,134.4px);filter:drop-shadow(0 22px 22px rgba(0,0,0,.3));transition:.25s}.rps-hand.locked{animation:rpsLocked 1s ease-in-out infinite;color:#71909a}.rps-hand.reveal{animation:rpsReveal .65s cubic-bezier(.16,.8,.2,1)}.rps-hand.winner{filter:drop-shadow(0 0 25px rgba(82,233,193,.55)) drop-shadow(0 20px 18px rgba(0,0,0,.35));transform:scale(1.08)}.rps-hand.loser{opacity:.48;filter:grayscale(.3)}@keyframes rpsLocked{50%{transform:scale(.94);opacity:.58}}@keyframes rpsReveal{0%{transform:scale(.4) rotate(-25deg);opacity:0}65%{transform:scale(1.16) rotate(6deg)}100%{transform:scale(1);opacity:1}}.rps-center{text-align:center}.rps-center b{display:block;font-size:clamp(31.36px,3.45vw,51.52px);color:#dceef1;letter-spacing:-.06em}.rps-center span{display:block;margin-top:5px;color:#5c7680;font-size:11px;font-weight:900}.rps-choices{display:flex;justify-content:center;gap:10px}.rps-choice{width:clamp(100px,11vw,150px);padding:12px 9px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);color:white;transition:.15s}.rps-choice:hover:not(:disabled){transform:translateY(-3px);border-color:rgba(78,226,190,.35);background:rgba(62,204,172,.08)}.rps-choice:disabled{opacity:.34}.rps-choice.selected{border-color:#5fe2c2;background:rgba(64,213,177,.13);box-shadow:0 0 25px rgba(57,215,177,.12)}.rps-choice span{display:block;font-size:35.84px}.rps-choice strong{display:block;margin-top:3px;font-size:14px}.rps-match-over{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:rgba(2,11,16,.74);backdrop-filter:blur(8px)}.rps-match-card{text-align:center;padding:30px 48px;border-radius:27px;background:linear-gradient(145deg,#15313c,#091a23);border:1px solid rgba(82,230,193,.2);box-shadow:0 25px 70px rgba(0,0,0,.36)}.rps-match-card small{color:#61ddbe;letter-spacing:.18em;font-size:11px;font-weight:1000}.rps-match-card h3{margin:8px 0 5px;font-size:clamp(35.84px,4.6vw,67.2px)}.rps-match-card p{margin:0 0 18px;color:#809aa4;font-weight:800}.online-rematch-btn{padding:12px 24px;border:0;border-radius:14px;background:linear-gradient(135deg,#4bd5b3,#388cac);color:white;font-weight:1000}

/* YUT · v36 정식 29밭 윷판 */
.yut-arena{height:100%;display:grid;grid-template-columns:minmax(410px,1.08fr) minmax(300px,.72fr);gap:2.4%;padding:2.1%;position:relative}
.yut-board-wrap{display:grid;place-items:center;min-height:0;position:relative}
.yut-board{position:relative;width:min(64vh,100%,610px);aspect-ratio:1;border-radius:34px;background:
  radial-gradient(circle at 28% 22%,rgba(255,255,255,.44),transparent 34%),
  repeating-linear-gradient(13deg,rgba(112,72,38,.024) 0 1px,transparent 1px 6px),
  linear-gradient(145deg,#f2dfb9,#d2ad78 72%,#c89b63);box-shadow:inset 0 0 0 8px rgba(85,50,25,.12),inset 0 0 65px rgba(91,52,22,.16),0 25px 60px rgba(0,0,0,.30);overflow:hidden}
.yut-board::after{content:"";position:absolute;inset:2.4%;border:1px solid rgba(88,51,25,.10);border-radius:28px;pointer-events:none}
.yut-lines{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 1px 0 rgba(255,255,255,.28));pointer-events:none}
.yut-lines path{fill:none;stroke:rgba(78,45,22,.42);stroke-width:2.15;stroke-linecap:round;stroke-linejoin:round}
.yut-lines path.shortcut{stroke:rgba(83,48,23,.33);stroke-width:1.8}
.yut-turn-arrow{position:absolute;z-index:4;font-size:24.64px;font-weight:1000;color:#d88932;text-shadow:0 2px 4px rgba(0,0,0,.25);pointer-events:none}.yut-turn-arrow.a{right:10%;bottom:24%}.yut-turn-arrow.b{left:18%;bottom:78%;transform:rotate(90deg)}.yut-turn-arrow.c{right:20%;top:18%;transform:rotate(180deg)}
.yut-board-caption{position:absolute;left:50%;top:4.3%;transform:translateX(-50%);font-size:10px;font-weight:1000;letter-spacing:.18em;color:rgba(77,44,23,.48);white-space:nowrap}
.yut-home-label{position:absolute;right:3.2%;bottom:3.2%;text-align:right;color:rgba(68,41,24,.62);font-weight:1000;line-height:1.15;font-size:11px;pointer-events:none}.yut-home-label strong{display:block;font-size:16px;color:#4d3324}
.yut-node{position:absolute;width:6.9%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:linear-gradient(145deg,#fff5df,#ead1a8);border:2px solid rgba(101,64,32,.35);box-shadow:inset 0 2px 3px rgba(255,255,255,.7),0 2px 5px rgba(86,50,22,.18);display:flex;align-items:center;justify-content:center;gap:1px;z-index:2}
.yut-node.major{width:9.2%;background:linear-gradient(145deg,#f4d18f,#d8a45c);border-width:2.5px}.yut-node.center{width:10.5%;background:radial-gradient(circle at 35% 30%,#fff6dc,#d9b372 72%);box-shadow:inset 0 0 0 4px rgba(111,68,31,.08),0 4px 10px rgba(70,40,20,.20)}
.yut-node.home-node{background:linear-gradient(145deg,#bfe9d7,#78bda5);border-color:rgba(40,111,91,.45)}
.yut-node.branch-ready{box-shadow:0 0 0 4px rgba(255,249,197,.72),0 0 20px rgba(255,207,79,.68),inset 0 2px 3px rgba(255,255,255,.7)}
.yut-destination-dot{--dot-shift:0px;position:absolute;z-index:15;left:calc(50% + var(--dot-shift));top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;min-width:35px;height:35px;padding:0 5px;border:3px solid #fff7c8;border-radius:50%;background:radial-gradient(circle at 35% 28%,#ffea72,#ff7048 62%,#a92326);color:#fff;border-color:#fff9ca;box-shadow:0 0 0 3px rgba(255,68,54,.35),0 0 22px rgba(255,50,43,.9),0 5px 9px rgba(47,17,8,.42);font-size:11px;font-weight:1000;line-height:1;cursor:pointer;animation:yutDestinationPulse .68s ease-in-out infinite}.yut-destination-dot.finish{background:radial-gradient(circle at 35% 28%,#fff6a7,#50d7ac 62%,#147568);box-shadow:0 0 0 3px rgba(91,236,197,.4),0 0 24px rgba(66,226,186,.92),0 5px 9px rgba(47,17,8,.42)}.yut-destination-dot:hover{animation:none;transform:translate(-50%,-50%) scale(1.18)}@keyframes yutDestinationPulse{50%{transform:translate(-50%,-50%) scale(1.15);filter:brightness(1.12)}}
.yut-node-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:9px;font-weight:1000;color:rgba(70,42,24,.54);pointer-events:none;z-index:1}.yut-node.center .yut-node-label{font-size:19px;color:#694425}.yut-node.major .yut-node-label{font-size:10px}
.yut-piece{width:58%;aspect-ratio:1;border-radius:45% 45% 38% 38%;border:2px solid rgba(255,255,255,.9);box-shadow:0 5px 10px rgba(0,0,0,.32),inset 0 3px 5px rgba(255,255,255,.45);padding:0;position:relative;cursor:default;z-index:6;color:#fff;font-size:11px;font-weight:1000;display:grid;place-items:center;overflow:hidden}.yut-piece::before{content:"";position:absolute;top:8%;width:38%;height:22%;border-radius:50%;background:rgba(255,255,255,.5)}
.yut-piece.host{background:linear-gradient(145deg,#ffe08a,#df5b42 55%,#9b241c)}.yut-piece.guest{background:linear-gradient(145deg,#b9e6ff,#447bd6 55%,#243c8f)}
.yut-piece.selectable{cursor:pointer;animation:yutPieceGlow .88s ease-in-out infinite;box-shadow:0 0 0 3px rgba(255,255,255,.82),0 0 18px rgba(255,235,137,.95),0 3px 7px rgba(0,0,0,.28)}
.yut-piece.chosen{animation:none!important;transform:scale(1.16);box-shadow:0 0 0 4px #fff4a2,0 0 28px rgba(255,85,54,.95),0 5px 10px rgba(0,0,0,.36)!important}
@keyframes yutPieceGlow{50%{transform:scale(1.19)}}
.yut-side-panel{display:flex;flex-direction:column;justify-content:center;min-height:0;padding:1% 0}
.turn-banner{padding:10px 13px;border-radius:13px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);text-align:center;color:#b8cbd0;font-size:13px;font-weight:900}.turn-banner.myturn{background:rgba(52,213,174,.1);border-color:rgba(74,227,187,.22);color:#7ae9cf}
.yut-sticks{height:152px;margin:10px 0 5px;display:flex;align-items:center;justify-content:center;gap:8px;perspective:800px}.yut-stick{width:27px;height:120px;border-radius:999px;transform-style:preserve-3d;transition:.2s;background:linear-gradient(90deg,#5f351c,#bd7f48 33%,#efc184 64%,#6c3a1f);box-shadow:inset 4px 0 4px rgba(255,255,255,.28),0 12px 18px rgba(0,0,0,.3);position:relative}.yut-stick.back::after{content:"";position:absolute;left:50%;top:16%;bottom:16%;width:4px;transform:translateX(-50%);border-radius:99px;background:#3a2317}.yut-sticks.rolling .yut-stick{animation:yutThrow .8s cubic-bezier(.18,.73,.24,1)}.yut-sticks.rolling.power-low .yut-stick{animation-name:yutThrowLow;animation-duration:.65s}.yut-sticks.rolling.power-high .yut-stick{animation-name:yutThrowHigh;animation-duration:1.05s}.yut-sticks.rolling .yut-stick:nth-child(2){animation-delay:.06s}.yut-sticks.rolling .yut-stick:nth-child(3){animation-delay:.1s}.yut-sticks.rolling .yut-stick:nth-child(4){animation-delay:.15s}@keyframes yutThrow{0%{transform:translateY(0) rotateX(0) rotateZ(0)}45%{transform:translateY(-54px) rotateX(620deg) rotateZ(25deg)}100%{transform:translateY(0) rotateX(1080deg) rotateZ(0)}}@keyframes yutThrowLow{0%{transform:translateY(0) rotateX(0)}45%{transform:translateY(-32px) rotateX(430deg) rotateZ(14deg)}100%{transform:translateY(0) rotateX(720deg)}}@keyframes yutThrowHigh{0%{transform:translateY(0) rotateX(0) scale(1)}42%{transform:translateY(-78px) rotateX(880deg) rotateZ(32deg) scale(1.08)}100%{transform:translateY(0) rotateX(1440deg) scale(1)}}
.yut-result-name{text-align:center;min-height:52px}.yut-result-name strong{display:block;font-size:clamp(31.36px,3.795vw,53.76px);letter-spacing:-.05em}.yut-result-name small{display:block;color:#78909a;font-size:11px;font-weight:900;line-height:1.45}
.yut-power-gauge{--power:0;width:min(270px,100%);height:24px;margin:7px auto 0;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(1,10,15,.72);box-shadow:inset 0 2px 8px rgba(0,0,0,.35)}.yut-power-gauge i{position:absolute;inset:2px auto 2px 2px;width:calc(var(--power)*1% - 4px);min-width:0;border-radius:999px;background:linear-gradient(90deg,#51d7b5 0,#ffe05e 58%,#ff654f 100%);box-shadow:0 0 15px rgba(255,111,67,.42);transition:width .035s linear}.yut-power-gauge b{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:1000;letter-spacing:.09em;text-shadow:0 1px 3px #000}.yut-power-gauge.charging{border-color:rgba(255,218,89,.52);animation:yutGaugePulse .55s ease-in-out infinite}.yut-throw-btn{margin:6px auto 0;width:min(270px,100%);min-height:56px;padding:8px 12px;border:0;border-radius:15px;background:linear-gradient(135deg,#4bd7b4,#348fad);color:white;font-weight:1000;font-size:17px;box-shadow:0 7px 0 #1d626c;touch-action:none;user-select:none;-webkit-user-select:none}.yut-throw-btn span,.yut-throw-btn small{display:block}.yut-throw-btn small{margin-top:3px;color:rgba(235,255,251,.78);font-size:10px;font-weight:850}.yut-throw-btn.charging{transform:translateY(5px);box-shadow:0 2px 0 #1d626c;filter:brightness(1.08)}.yut-throw-btn:disabled{opacity:.38;box-shadow:none;transform:none}@keyframes yutGaugePulse{50%{box-shadow:0 0 18px rgba(255,198,61,.25),inset 0 2px 8px rgba(0,0,0,.35)}}
.yut-move-queue{margin:10px auto 0;min-height:42px;width:min(330px,100%);display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap}.yut-move-chip{min-width:50px;padding:7px 10px;border-radius:13px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.055);color:#8fa6af;font-weight:950;font-size:13px}.yut-move-chip b{font-size:17px;color:#dce9ed}.yut-move-chip.selectable{cursor:pointer}.yut-move-chip.active{background:linear-gradient(135deg,rgba(63,215,177,.24),rgba(80,138,205,.22));border-color:rgba(95,229,196,.46);box-shadow:0 0 18px rgba(43,205,166,.13);color:#83efd6}.yut-move-chip.locked{opacity:.7}
.yut-route-choice{margin:9px auto 0;width:min(340px,100%);padding:10px;border-radius:16px;background:rgba(10,28,35,.88);border:1px solid rgba(255,216,115,.2);box-shadow:0 12px 30px rgba(0,0,0,.2)}.yut-route-choice strong{display:block;text-align:center;color:#ffd987;font-size:13px;margin-bottom:7px}.yut-route-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.yut-route-actions button{padding:9px 7px;border-radius:12px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.065);color:#d8e8ec;font-size:12px;font-weight:950;cursor:pointer}.yut-route-actions button:hover{background:rgba(255,214,111,.11);border-color:rgba(255,214,111,.3)}
.yut-benches{margin:10px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:7px}.yut-bench{padding:8px 9px;border-radius:13px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.065)}.yut-bench-head{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:6px}.yut-bench-head strong{font-size:11px;color:#a9c0c8}.yut-bench-head span{font-size:10px;color:#687f88;font-weight:850}.yut-bench-pieces{display:flex;gap:5px;min-height:23px;align-items:center}.yut-bench .yut-piece{width:21px;height:21px}.yut-home-dot{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;border:1px dashed rgba(255,255,255,.16);color:#607780;font-size:11px;font-weight:1000}.yut-home-dot.done{background:rgba(255,218,121,.12);border-style:solid;color:#f1cc72;border-color:rgba(255,215,116,.25)}
.yut-help{margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.07);color:#6d838c;font-size:10.5px;line-height:1.55;text-align:center;font-weight:750}.yut-help b{color:#90aab4}
.yut-win-overlay{position:absolute;inset:0;z-index:15;display:grid;place-items:center;background:rgba(2,10,14,.76);backdrop-filter:blur(7px)}
@media(max-width:900px){body[data-view="online-game"] .app-shell{width:100vw;height:100svh;margin:0;border:0;border-radius:0}.online-topbar{padding:0 13px}.online-net-pill{display:none}.online-layout{padding:12px}.online-lobby{grid-template-columns:1fr;padding:10px;overflow:auto;align-content:start}.online-lobby-copy h3{font-size:47.04px}.online-lobby-copy p{display:none}.online-feature-row{margin-top:12px}.online-room-grid{grid-template-columns:1fr}.online-room-card{min-height:125px}.versus-ready-grid{width:100%;grid-template-columns:1fr 55px 1fr}.ready-player-card{padding:22px 8px}.ready-avatar{width:55px;height:55px;border-radius:17px;font-size:20px}.rps-stage{grid-template-columns:1fr 75px 1fr}.rps-choices{gap:5px}.rps-choice{width:31%;min-width:82px}.yut-arena{grid-template-columns:1fr;grid-template-rows:minmax(250px,1fr) auto;padding:10px}.yut-board{width:min(58vh,92vw)}.yut-side-panel{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center}.yut-sticks{height:120px;margin:0}.yut-stick{height:94px;width:18px}.yut-result-name{min-height:0}.yut-help{display:none}.yut-power-gauge,.yut-throw-btn{grid-column:1/3;margin-left:auto;margin-right:auto}.online-library{grid-template-columns:1fr}.hub-category-row small{display:none}}

.hub-mode-tabs{display:flex;align-items:center;gap:8px;margin:15px 0 12px;padding:4px;border-radius:16px;background:rgba(255,255,255,.52);border:1px solid rgba(200,183,217,.34);width:max-content;max-width:100%}.hub-mode-tab{height:42px;padding:0 15px;border-radius:12px;border:0;background:transparent;color:#8d8198;display:flex;align-items:center;gap:7px;font-size:13px;font-weight:950;transition:.18s}.hub-mode-tab small{font-size:10px;letter-spacing:.08em;color:#aaa0b2}.hub-mode-tab.active{background:white;color:#554961;box-shadow:0 5px 16px rgba(102,75,124,.10)}.hub-mode-tab.active small{color:#6d5fe1}.hub-mode-tab:nth-child(2).active{color:#187f6b}.hub-mode-tab:nth-child(2).active small{color:#20a98c}.online-library:not(.hidden){display:grid}.online-library .game-tile{min-height:clamp(230px,29vh,340px)}
@media(max-width:820px){.hub-mode-tabs{width:100%}.hub-mode-tab{flex:1;justify-content:center}.online-library .game-tile{min-height:210px}}


/* v36 yut responsive */
@media(max-width:900px){
  .yut-arena{grid-template-columns:1fr;grid-template-rows:minmax(310px,1fr) auto;padding:9px;gap:7px;overflow:auto}
  .yut-board{width:min(52vh,90vw,500px)}
  .yut-side-panel{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:center;padding:0}
  .turn-banner{grid-column:1/3}.yut-sticks{height:105px;margin:0}.yut-stick{height:82px;width:18px}.yut-result-name{min-height:0}.yut-power-gauge,.yut-throw-btn{grid-column:1/3;margin-left:auto;margin-right:auto}.yut-move-queue,.yut-route-choice,.yut-benches{grid-column:1/3;margin-top:3px}.yut-help{display:none}
}
@media(max-width:560px){.yut-board{width:min(46vh,92vw,430px)}.yut-node{width:7.5%}.yut-node.major{width:10%}.yut-node.center{width:11%}.yut-benches{grid-template-columns:1fr}.yut-bench{padding:6px 8px}}
@media(min-width:901px) and (max-height:760px){.yut-arena{gap:1.5%;padding:1.2%}.yut-board{width:min(60vh,100%,510px)}.yut-side-panel{justify-content:flex-start;padding:8px 10px;overflow-y:auto}.yut-side-panel .turn-banner{min-height:36px;padding:7px 10px}.yut-sticks{height:96px;margin:2px 0}.yut-stick{height:78px;width:20px}.yut-result-name{min-height:42px}.yut-result-name strong{font-size:34px}.yut-result-name small{font-size:11px}.yut-power-gauge{height:20px;margin-top:3px}.yut-throw-btn{min-height:48px;margin-top:4px}.yut-move-queue{min-height:34px;margin-top:6px}.yut-move-chip{padding:5px 8px}.yut-benches{margin-top:6px}.yut-bench{padding:5px 7px}.yut-help{display:none}}

/* v34 polish */
.online-library .game-tile{display:grid;grid-template-columns:clamp(72px,7vw,105px) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:clamp(16px,2vw,28px);align-items:center;padding:clamp(20px,2vw,30px)}
.online-library .tile-badge{grid-column:1/-1;justify-self:start;margin:0}
.online-library .tile-icon{grid-column:1;grid-row:2;width:clamp(70px,7vw,105px);margin:0;align-self:center}
.online-library .tile-copy{grid-column:2;grid-row:2;align-self:center;padding-right:10px}
.online-library .tile-copy strong{font-size:clamp(24.64px,2.3vw,34.72px);line-height:1.05}
.online-library .tile-copy small{font-size:clamp(12px,0.977vw,16px);line-height:1.45;margin-top:5px}
.online-library .tile-enter{display:none}
.yut-board{width:min(58vh,100%,560px)}
@media(max-width:900px){.yut-board{width:min(50vh,88vw,470px)}.online-library .game-tile{grid-template-columns:68px 1fr;min-height:185px;padding:18px}.online-library .tile-icon{width:64px}.online-library .tile-copy strong{font-size:23px}}


/* v35 compact hub header — more room for game cards */
@media (min-width: 821px) {
  .hub-screen { grid-template-rows: 34% 1fr auto; }
  .hub-hero { padding: 1.15% 5% .35%; }
  .hub-logo {
    width: clamp(44px, 4.1vw, 64px);
    margin-bottom: .35%;
    border-width: 2px;
    border-radius: 30% 30% 35% 35%;
    font-size: clamp(28px, 2.932vw, 42.56px);
    box-shadow: 0 6px 0 rgba(234,193,92,.18), 0 12px 24px rgba(91,70,111,.08);
  }
  .hub-kicker { margin-bottom: .3%; font-size: clamp(10px, 0.805vw, 13px); }
  .hub-hero h1 { font-size: clamp(34.72px, 4.485vw, 64.96px); line-height: .92; }
  .hub-sub { margin-top: .55%; font-size: clamp(12px, 1.15vw, 18px); }
  .hub-game-area { padding: 0 5.2% 1.15%; gap: 1.5%; grid-template-rows: auto auto minmax(0, 1fr); }
  .hub-section-title h2 { font-size: clamp(21px, 2.012vw, 30.24px); }
  .hub-section-title span { font-size: clamp(10px, 0.782vw, 12px); }
  .hub-count { padding: 6px 10px; }
  .hub-mode-tabs { margin: 7px 0 7px; align-self: start; }
  .hub-mode-tab { height: 35px; padding: 0 13px; }
  .expanded-library { gap: 1.5%; }
  .expanded-library .game-tile { padding: clamp(10px, 1vw, 15px); }
  .expanded-library .tile-badge { padding: 4px 7px; margin-bottom: 2px; }
  .expanded-library .tile-icon { width: clamp(40px, 3.7vw, 55px); }
  .hub-footer { padding: .45% 5.2% .85%; }
}


/* Mobile-only ladder layout: uses the full phone viewport instead of the desktop 16:9 frame. */
@media (max-width: 700px) {
  html, body { min-width: 0; width: 100%; overflow-x: hidden; }
  body[data-view="game"] {
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    background: #fffafc;
  }
  body[data-view="game"] .app-shell {
    width: 100vw;
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-padding-top: 54px;
    touch-action: pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }
  body[data-view="game"] .app-shell::before,
  body[data-view="game"] .app-shell::after { display: none; }
  body[data-view="game"] .game-screen {
    display: grid;
    grid-template-rows: auto auto;
    height: auto;
    min-height: 0;
    align-content: start;
    padding: 0;
  }
  body[data-view="game"] .game-titlebar {
    width: 100%;
    height: auto;
    min-height: 54px;
    padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left));
    gap: 6px;
    position: sticky;
    top: 0;
    z-index: 20;
  }
  body[data-view="game"] .game-title-group { min-width: 0; gap: 7px; }
  body[data-view="game"] .title-mascot { width: 34px; height: 34px; border-radius: 11px; font-size: 23px; }
  body[data-view="game"] .game-title-group h2 { font-size: 21px; white-space: nowrap; }
  body[data-view="game"] .game-status { display: none; }
  body[data-view="game"] .title-actions { min-width: 0; margin-left: auto; gap: 4px; }
  body[data-view="game"] .title-btn {
    min-height: 38px;
    padding: 7px 8px;
    border-radius: 10px;
    border-width: 1px;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
  }
  body[data-view="game"] .sound-toggle { min-width: 38px; width: 38px; padding-inline: 0; font-size: 0; }
  body[data-view="game"] .sound-toggle::before { content: "🔊"; font-size: 19px; }
  body[data-view="game"] .sound-toggle.muted::before { content: "🔇"; }
  body[data-view="game"] .playfield {
    height: auto;
    min-height: clamp(470px, 70svh, 590px);
    min-height: clamp(470px, 70dvh, 590px);
    padding: 4px;
    overflow: visible;
  }
  body[data-view="game"] .ladder-paper {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    min-height: clamp(462px, calc(70svh - 8px), 582px);
    min-height: clamp(462px, calc(70dvh - 8px), 582px);
    transform: none;
    padding: 6px;
    border-radius: 16px;
    grid-template-rows: auto minmax(0, 1fr) auto;
    box-shadow: 0 8px 22px rgba(91,70,111,.12);
  }
  body[data-view="game"] .paper-topbar { min-height: 40px; gap: 7px; }
  body[data-view="game"] .blind-title { gap: 7px; }
  body[data-view="game"] .blind-dot { width: 8px; height: 8px; box-shadow: 0 0 0 4px rgba(255,173,115,.14); }
  body[data-view="game"] .blind-title strong { font-size: 13px; letter-spacing: .07em; }
  body[data-view="game"] .blind-title > span:last-child { display: none; }
  body[data-view="game"] .ladder-toggle-btn {
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 11px;
    font-size: 14px;
    box-shadow: 0 3px 0 #3d3548;
    white-space: nowrap;
  }
  body[data-view="game"] .board-wrap {
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    touch-action: pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }
  body[data-view="game"] .board-inner {
    min-width: 0;
    grid-template-rows: 72px minmax(120px, 1fr) 46px;
  }
  body[data-view="game"] .top-labels { height: 72px; }
  body[data-view="game"] .label-row { height: 46px; }
  body[data-view="game"] .top-label-stack { gap: 4px; }
  body[data-view="game"] .player-name-input {
    height: 28px;
    padding: 3px 2px;
    border-width: 1px;
    border-radius: 8px;
    font-size: 12px;
  }
  body[data-view="game"] .label-chip {
    width: var(--chip-width, 38px);
    min-width: 0;
    max-width: none;
    min-height: 34px;
    padding: 6px 2px;
    border-width: 1px;
    border-radius: 10px;
    font-size: 13px;
    box-shadow: 0 3px 0 rgba(99,82,116,.08);
  }
  body[data-view="game"] .label-chip.played::after { font-size: 11px; }
  body[data-view="game"] #ladderCanvas { width: 100%; min-height: 120px; }
  body[data-view="game"] .paper-footer {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 5px;
    padding-top: 5px;
    padding-bottom: max(3px, env(safe-area-inset-bottom));
    align-items: stretch;
  }
  body[data-view="game"] .result-toast {
    min-height: 18px;
    padding: 0 2px;
    font-size: 13px;
    line-height: 1.35;
    white-space: normal;
  }
  body[data-view="game"] .paper-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 5px;
    overflow: visible;
    padding-bottom: 0;
  }
  body[data-view="game"] .paper-btn {
    width: 100%;
    min-height: 34px;
    padding: 6px 5px;
    border-radius: 9px;
    font-size: 12px;
  }
  body[data-view="result"] .result-screen { min-height: 100svh; height: auto; }
  body[data-view="result"] .result-titlebar { padding: max(16px, env(safe-area-inset-top)) 16px 14px; gap: 12px; }
  body[data-view="result"] .result-titlebar h2 { font-size: 29.12px; }
  body[data-view="result"] .result-titlebar p { display: none; }
  body[data-view="result"] .result-actions > * { flex: 1 1 130px; min-width: 0; }
  body[data-view="result"] .summary-grid { grid-template-columns: 1fr; }
}

@media (max-width: 380px) {
  body[data-view="game"] .game-title-group h2 { font-size: 19px; }
  body[data-view="game"] #backToHubFromGameBtn { padding-inline: 6px; }
  body[data-view="game"] .board-inner { grid-template-rows: 68px minmax(112px, 1fr) 44px; }
  body[data-view="game"] .top-labels { height: 68px; }
  body[data-view="game"] .label-row { height: 44px; }
}

@media (max-width: 700px) and (orientation: landscape) and (max-height: 500px) {
  body[data-view="game"] .game-titlebar { min-height: 46px; padding-top: max(4px, env(safe-area-inset-top)); padding-bottom: 4px; }
  body[data-view="game"] .title-mascot { width: 30px; height: 30px; font-size: 21px; }
  body[data-view="game"] .game-title-group h2 { font-size: 19px; }
  body[data-view="game"] .title-btn { min-height: 34px; padding-block: 5px; }
  body[data-view="game"] .paper-topbar { min-height: 34px; }
  body[data-view="game"] .playfield { min-height: max(340px, calc(100dvh - 46px)); }
  body[data-view="game"] .ladder-paper { min-height: max(332px, calc(100dvh - 54px)); }
  body[data-view="game"] .ladder-toggle-btn { min-height: 31px; padding-block: 5px; }
  body[data-view="game"] .board-inner { grid-template-rows: 58px minmax(88px, 1fr) 40px; }
  body[data-view="game"] .top-labels { height: 58px; }
  body[data-view="game"] .label-row { height: 40px; }
  body[data-view="game"] .player-name-input { height: 24px; }
  body[data-view="game"] .label-chip { min-height: 29px; padding-block: 4px; }
  body[data-view="game"] #ladderCanvas { min-height: 88px; }
  body[data-view="game"] .paper-footer { grid-template-columns: minmax(120px, 1fr) auto; align-items: center; }
  body[data-view="game"] .result-toast { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body[data-view="game"] .paper-actions { display: flex; width: auto; gap: 3px; }
  body[data-view="game"] .paper-btn { width: auto; min-height: 29px; padding: 4px 6px; font-size: 11px; }
}

/* v39 · scratch lottery */
.scratch-tile{background:linear-gradient(145deg,#fff8df 0%,#fff3e9 50%,#f4efff 100%)}
.scratch-tile::before{background:#f4b83d}.scratch-tile .scratch-icon{border:4px solid #fff;background:linear-gradient(145deg,#ffe88a,#e7ad32 55%,#8f5b17);color:#fff8d9;font-family:Georgia,serif;font-weight:1000;text-shadow:0 2px 3px rgba(83,48,6,.38);box-shadow:inset 0 0 0 2px rgba(125,74,8,.2),0 5px 14px rgba(150,95,15,.2)}
.luck-game-screen[data-game="scratch"] .luck-bg{background:radial-gradient(circle at 70% 32%,rgba(255,198,74,.18),transparent 31%),radial-gradient(circle at 21% 74%,rgba(168,103,255,.13),transparent 31%),linear-gradient(145deg,#171020,#080d18 52%,#191426)}
.luck-game-screen[data-game="scratch"] .luck-game-content{padding:2.2%;align-items:stretch;justify-content:stretch;overflow:hidden}
.scratch-shell{width:100%;height:100%;min-height:0;display:block;}
.scratch-settings{min-width:0;min-height:0;display:flex;flex-direction:column;padding:clamp(15px,1.8vw,24px);border:1px solid rgba(255,255,255,.09);border-radius:22px;background:linear-gradient(145deg,rgba(35,26,49,.96),rgba(14,19,33,.94));box-shadow:inset 0 1px rgba(255,255,255,.06),0 16px 35px rgba(0,0,0,.23)}
.scratch-settings-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.scratch-settings-head small{display:block;color:#e5b54d;font-size:11px;font-weight:1000;letter-spacing:.16em}.scratch-settings-head strong{display:block;margin-top:4px;color:#fff5dd;font-size:clamp(21px,1.782vw,26.88px)}.scratch-save-pill{flex:0 0 auto;padding:6px 9px;border-radius:999px;background:rgba(70,205,160,.11);border:1px solid rgba(83,226,179,.2);color:#79dfbf;font-size:10px;font-weight:950}.scratch-setting-help{margin:9px 0 11px;color:#929ab2;font-size:12px;font-weight:750;line-height:1.5}
.scratch-prob-list{min-height:0;overflow-y:auto;display:grid;align-content:start;gap:7px;padding:1px 7px 1px 0;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#bf8b36 rgba(255,255,255,.04)}.scratch-prob-list::-webkit-scrollbar{width:7px}.scratch-prob-list::-webkit-scrollbar-track{border-radius:99px;background:rgba(255,255,255,.04)}.scratch-prob-list::-webkit-scrollbar-thumb{border-radius:99px;background:linear-gradient(#f1c45b,#b17b2e)}
.scratch-prob-row{display:grid;grid-template-columns:40px minmax(62px,1fr) auto;align-items:center;gap:8px;padding:8px;border:1px solid rgba(255,255,255,.075);border-radius:13px;background:rgba(255,255,255,.04)}.scratch-rank-medal{width:39px;height:39px;display:grid;place-items:center;border-radius:13px;color:#3d2608;font-size:13px;font-weight:1000;background:linear-gradient(145deg,#fff0a5,#d99d29);box-shadow:inset 0 1px rgba(255,255,255,.6)}.scratch-prob-row.rank2 .scratch-rank-medal{color:#384253;background:linear-gradient(145deg,#f5f7fb,#9faaba)}.scratch-prob-row.rank3 .scratch-rank-medal{color:#482315;background:linear-gradient(145deg,#ffc49b,#bd714b)}.scratch-prob-row.blank .scratch-rank-medal{color:#c7ccdb;background:linear-gradient(145deg,#596174,#2d3444)}.scratch-prob-copy strong{display:block;color:#f2edf8;font-size:16px}.scratch-prob-copy small{display:block;margin-top:3px;color:#898fa5;font-size:10px;font-weight:800}.scratch-weight-control{display:flex;align-items:center;gap:3px;padding:3px;border-radius:10px;background:rgba(255,255,255,.055)}.scratch-weight-control button{width:27px;height:27px;padding:0;border:0;border-radius:8px;background:rgba(255,255,255,.09);color:#f3e7ff;font-size:20px;font-weight:1000}.scratch-weight-control button:hover{background:rgba(242,190,73,.17);color:#ffdd82}.scratch-weight-control span{min-width:70px;text-align:center;color:#d9c9e7;font-size:11px;font-weight:950;white-space:nowrap}.scratch-weight-control b{color:#ffd66d}
.scratch-prob-footer{margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.07)}.scratch-total-line{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#8c93aa;font-size:11px;font-weight:850}.scratch-total-line strong{color:#ffd56f;font-size:13px}.scratch-settings-actions{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:9px}.scratch-settings-actions button{min-height:36px;border-radius:11px;font-size:12px;font-weight:950}.scratch-new-settings{border:0;background:linear-gradient(135deg,#e3aa34,#c36a43);color:#fff;box-shadow:0 4px 0 #774325}.scratch-reset-settings{padding:0 11px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);color:#aeb5c8}.scratch-setting-notice{min-height:18px;margin-top:6px;color:#ffafbd;font-size:11px;font-weight:850}
.scratch-stage{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(255,219,122,.13);border-radius:23px;background:radial-gradient(circle at 50% 44%,rgba(235,176,56,.14),transparent 38%),linear-gradient(145deg,rgba(24,18,35,.84),rgba(7,12,22,.94));box-shadow:inset 0 1px rgba(255,255,255,.05)}.scratch-stage::before,.scratch-stage::after{content:"✦";position:absolute;color:rgba(255,214,111,.2);font-size:38.08px;pointer-events:none}.scratch-stage::before{left:8%;top:13%;transform:rotate(-12deg)}.scratch-stage::after{right:9%;bottom:14%;transform:rotate(17deg)}.scratch-kicker{color:#c9a65e;font-size:11px;font-weight:1000;letter-spacing:.2em}.scratch-title{margin:5px 0 2px;color:#fff5db;font-size:clamp(23.52px,2.3vw,34.72px);letter-spacing:-.05em}.scratch-subtitle{margin:0 0 12px;color:#939bb2;font-size:12px;font-weight:750}
.scratch-ticket{position:relative;z-index:3;width:min(88%,560px);aspect-ratio:1.78;border-radius:24px;overflow:hidden;border:2px solid #f4ca66;background:#fff6cf;box-shadow:0 16px 0 #71441c,0 28px 55px rgba(0,0,0,.38),inset 0 0 0 5px rgba(255,255,255,.45)}.scratch-ticket::before,.scratch-ticket::after{content:"";position:absolute;z-index:8;top:50%;width:29px;height:29px;border-radius:50%;background:#11121e;transform:translateY(-50%);box-shadow:inset 0 0 0 1px rgba(255,217,122,.16)}.scratch-ticket::before{left:-16px}.scratch-ticket::after{right:-16px}.scratch-reveal{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:8%;background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.9),transparent 24%),repeating-linear-gradient(135deg,rgba(119,74,15,.045) 0 8px,transparent 8px 16px),linear-gradient(145deg,#fff4ad,#f1bc48 57%,#dc8e28)}.scratch-reveal small{display:block;color:#8b5b1c;font-size:12px;font-weight:1000;letter-spacing:.18em}.scratch-reveal strong{display:block;margin:4px 0;color:#59330e;font-size:clamp(41.44px,4.83vw,73.92px);line-height:1;text-shadow:0 3px 0 rgba(255,255,255,.45)}.scratch-reveal span{color:#80501a;font-size:14px;font-weight:950}.scratch-reveal.rank2{background:linear-gradient(145deg,#f8fbff,#bec9d7 58%,#8996a9)}.scratch-reveal.rank2 small,.scratch-reveal.rank2 span{color:#445165}.scratch-reveal.rank2 strong{color:#273447}.scratch-reveal.rank3{background:linear-gradient(145deg,#ffe6d5,#d99670 58%,#a75f3d)}.scratch-reveal.rank3 small,.scratch-reveal.rank3 span{color:#653522}.scratch-reveal.rank3 strong{color:#552916}.scratch-reveal.blank{background:linear-gradient(145deg,#414858,#202634 60%,#111620)}.scratch-reveal.blank small,.scratch-reveal.blank span{color:#aeb6c8}.scratch-reveal.blank strong{color:#e1e5ee;text-shadow:0 3px 0 rgba(0,0,0,.2)}.scratch-canvas{position:absolute;z-index:7;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none;transition:opacity .35s}.scratch-canvas.revealed{opacity:0;pointer-events:none}
.scratch-actions{position:relative;z-index:3;display:flex;gap:8px;margin-top:18px}.scratch-actions button{min-width:132px;padding:11px 16px;border-radius:13px;font-size:13px;font-weight:950}.scratch-reveal-all{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.07);color:#c7cedf}.scratch-new-ticket{border:0;background:linear-gradient(135deg,#f2bc45,#d96c45);color:#fff;box-shadow:0 5px 0 #794229}.scratch-result-line{position:relative;z-index:3;min-height:19px;margin-top:10px;color:#a3aabd;font-size:13px;font-weight:900}.scratch-result-line.win{color:#ffdc80}.scratch-result-line.lose{color:#aeb5c6}.scratch-mini-stats{position:relative;z-index:3;width:min(86%,540px);display:grid;grid-template-columns:repeat(3,1fr);margin-top:9px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(4,8,16,.28);overflow:hidden}.scratch-mini-stat{padding:7px;text-align:center}.scratch-mini-stat+.scratch-mini-stat{border-left:1px solid rgba(255,255,255,.07)}.scratch-mini-stat small{display:block;color:#777f95;font-size:9px;font-weight:950}.scratch-mini-stat strong{display:block;margin-top:2px;color:#f0eafa;font-size:13px}.scratch-mini-stat:nth-child(2) strong{color:#ffdc7d}.scratch-mini-stat:nth-child(3) strong{color:#efb2be}
@media(max-width:820px){.luck-game-screen[data-game="scratch"] .luck-game-content{padding:8px;overflow-y:auto;align-items:stretch;justify-content:flex-start}.scratch-shell{height:auto;min-height:100%;grid-template-columns:1fr;gap:10px}.scratch-settings{min-height:410px;border-radius:17px;padding:12px}.scratch-prob-list{max-height:270px}.scratch-stage{min-height:520px;border-radius:18px;padding:18px 7px}.scratch-ticket{width:min(94%,540px)}.scratch-title{font-size:28px}.scratch-subtitle{font-size:13px}.scratch-actions{flex-wrap:wrap;justify-content:center}.scratch-mini-stats{width:min(94%,540px)}}
@media(max-width:460px){.scratch-prob-row{grid-template-columns:38px minmax(58px,1fr);gap:7px}.scratch-weight-control{grid-column:2}.scratch-weight-control span{flex:1}.scratch-settings{min-height:525px}.scratch-prob-list{max-height:370px}.scratch-stage{min-height:500px}.scratch-ticket{aspect-ratio:1.58}.scratch-reveal strong{font-size:47.04px}.scratch-actions button{min-width:126px}}

/* v39 · custom ladder result list scroll */
#customSettings{max-height:min(55vh,580px);overflow-y:auto;overflow-x:hidden;padding-right:10px;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#c58bd8 #f2eaf4}
#customSettings::-webkit-scrollbar{width:9px}#customSettings::-webkit-scrollbar-track{border-radius:99px;background:#f2eaf4}#customSettings::-webkit-scrollbar-thumb{border:2px solid #f2eaf4;border-radius:99px;background:linear-gradient(#ff8ba7,#ae7ae0)}
#customSettings .result-input-list{padding-bottom:12px}
@media(max-width:700px){#customSettings{max-height:48dvh;padding-right:7px}.wizard-actions{position:relative;z-index:2}}

/* v38 · mobile hub cards: keep every game card in its own row */
@media (max-width: 820px) {
  body[data-view="hub"] .hub-game-area {
    display: block;
    min-height: 0;
    padding-bottom: 30px;
  }
  body[data-view="hub"] .expanded-library {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: auto;
    min-height: 0;
    margin-top: 14px;
    gap: 26px;
    grid-template-columns: none;
    grid-template-rows: none;
    grid-auto-rows: auto;
  }
  body[data-view="hub"] .expanded-library .game-tile {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 200px;
    margin: 0;
    transform: none;
    overflow: hidden;
  }
  body[data-view="hub"] .expanded-library button.game-tile:hover,
  body[data-view="hub"] .expanded-library button.game-tile:active {
    transform: none;
  }
}
@media (max-width: 430px) {
  body[data-view="hub"] .expanded-library { gap: 24px; }
  body[data-view="hub"] .expanded-library .game-tile { min-height: 190px; }
}

/* v40 · ladder game scroll and result visibility on every screen size */
body[data-view="game"] .setup-only{display:none!important}
body[data-view="game"] .app-shell{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-y:contain;
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
  touch-action:pan-y pinch-zoom;
  -webkit-overflow-scrolling:touch;
}
body[data-view="game"] #step4{min-height:100%;overflow:visible}
body[data-view="game"] .playfield{overflow:visible}
body[data-view="game"] .paper-footer{scroll-margin-block:90px 24px}
@media(max-width:700px){
  body[data-view="game"] #step4{
    display:block;
    width:100%;
    height:auto;
    min-height:100dvh;
    padding-bottom:max(28px,env(safe-area-inset-bottom));
  }
  body[data-view="game"] .playfield{
    width:100%;
    height:auto!important;
    min-height:740px!important;
    padding:6px 5px 24px;
    overflow:visible!important;
  }
  body[data-view="game"] .ladder-paper{
    position:relative;
    left:auto;
    top:auto;
    width:100%;
    height:auto;
    min-height:700px!important;
    transform:none;
    grid-template-rows:auto minmax(520px,auto) auto;
    overflow:visible;
  }
  body[data-view="game"] .board-wrap{
    min-height:520px;
    overflow-x:auto;
    overflow-y:clip;
  }
  body[data-view="game"] .board-inner{
    height:520px;
    grid-template-rows:72px minmax(400px,1fr) 48px;
  }
  body[data-view="game"] #ladderCanvas{min-height:400px}
  body[data-view="game"] .paper-footer{
    min-height:96px;
    padding:10px 2px max(8px,env(safe-area-inset-bottom));
    background:rgba(255,254,250,.96);
    border-radius:0 0 13px 13px;
  }
  body[data-view="game"] .result-toast{
    min-height:32px;
    display:flex;
    align-items:center;
    font-size:16px;
    font-weight:950;
  }
}
@media(max-width:700px) and (orientation:landscape) and (max-height:500px){
  body[data-view="game"] .playfield{min-height:590px!important}
  body[data-view="game"] .ladder-paper{min-height:560px!important;grid-template-rows:auto minmax(400px,auto) auto}
  body[data-view="game"] .board-wrap{min-height:400px}
  body[data-view="game"] .board-inner{height:400px;grid-template-rows:58px minmax(298px,1fr) 44px}
  body[data-view="game"] #ladderCanvas{min-height:298px}
}

/* v41 · real three-picture scratch ticket */
.scratch-ticket{width:min(84%,500px);aspect-ratio:1.55;border-color:#ffd978;background:#8c1d32;box-shadow:0 14px 0 #5b1425,0 28px 55px rgba(0,0,0,.4),inset 0 0 0 5px rgba(255,255,255,.24)}
.scratch-reveal,.scratch-reveal.rank2,.scratch-reveal.rank3,.scratch-reveal.blank{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:7px;place-items:stretch;padding:12px 24px 13px;background:radial-gradient(circle at 50% -10%,rgba(255,255,255,.88),transparent 36%),repeating-linear-gradient(135deg,rgba(132,68,12,.045) 0 7px,transparent 7px 14px),linear-gradient(145deg,#fff7cf,#f5ce63 66%,#e99b39);color:#55240e}
.scratch-ticket-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.scratch-ticket-brand{flex:0 0 auto;text-align:left}.scratch-ticket-brand small{display:block;color:#8b291f!important;font-size:10px!important;font-weight:1000;letter-spacing:.16em}.scratch-ticket-brand strong{display:block!important;margin:1px 0 0!important;color:#7a1726!important;font-size:clamp(17px,1.84vw,23.52px)!important;line-height:1.05!important;text-shadow:0 1px rgba(255,255,255,.5)!important}
.scratch-prize-key{min-width:0;display:flex;justify-content:flex-end;gap:5px}.scratch-prize-key span{display:flex!important;align-items:center;gap:3px;padding:3px 6px;border:1px solid rgba(117,47,20,.15);border-radius:999px;background:rgba(255,255,255,.4);color:#6b3219!important;font-size:10px!important;font-weight:1000!important;white-space:nowrap}.scratch-prize-key i{font-style:normal;font-size:16px;line-height:1}
.scratch-symbol-grid{align-self:stretch;justify-self:center;min-height:0;height:100%;max-height:220px;max-width:220px;aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:5px;padding:6px;border:2px dashed rgba(123,48,24,.26);border-radius:17px;background:rgba(255,252,224,.62);box-shadow:inset 0 0 0 3px rgba(255,255,255,.35)}
.scratch-symbol-cell{position:relative;min-width:0;min-height:0;display:grid;place-items:center;border:1px solid rgba(122,57,26,.18);border-radius:12px;background:linear-gradient(145deg,#fffef0,#ffe7a2);box-shadow:inset 0 2px rgba(255,255,255,.8),0 2px 4px rgba(90,45,12,.13);overflow:hidden}.scratch-symbol-cell::after{content:"";position:absolute;inset:4px;border:1px solid rgba(158,83,31,.08);border-radius:9px;pointer-events:none}.scratch-reveal .scratch-symbol{position:relative;z-index:1;color:inherit!important;font-size:clamp(25.76px,3.45vw,43.68px)!important;line-height:1;filter:drop-shadow(0 2px 1px rgba(77,34,9,.22));transform:translateY(-1px)}
.scratch-reveal.checked .scratch-symbol-cell.match{border-color:#d31f3e;background:linear-gradient(145deg,#fff6b6,#ffbf3e);box-shadow:0 0 0 3px rgba(211,31,62,.26),0 0 18px rgba(255,183,35,.65);animation:scratchMatchPop .55s ease both}.scratch-reveal.checked .scratch-symbol-cell.match:nth-child(2n){animation-delay:.08s}.scratch-reveal.checked .scratch-symbol-cell.match:nth-child(3n){animation-delay:.16s}@keyframes scratchMatchPop{0%{transform:scale(.84)}60%{transform:scale(1.1)}100%{transform:scale(1)}}
.scratch-ticket-foot{display:flex;align-items:center;justify-content:center;gap:9px;min-height:23px;text-align:center}.scratch-ticket-rule{color:#7a3a1b!important;font-size:11px!important;font-weight:1000!important}.scratch-verdict{display:none!important;margin:0!important;padding:4px 9px;border-radius:999px;background:#7b1729;color:#fff8d8!important;font-size:13px!important;line-height:1.15!important;text-shadow:none!important}.scratch-reveal.checked .scratch-verdict{display:inline-flex!important;align-items:center;animation:scratchVerdictIn .4s ease both}@keyframes scratchVerdictIn{from{opacity:0;transform:translateY(5px) scale(.9)}to{opacity:1;transform:none}}
@media(max-width:820px){.scratch-stage{min-height:600px}.scratch-ticket{width:min(94%,500px)}.scratch-reveal,.scratch-reveal.rank2,.scratch-reveal.rank3,.scratch-reveal.blank{padding:10px 18px}.scratch-symbol-grid{max-height:210px;max-width:210px}}
@media(max-width:460px){.scratch-stage{min-height:560px}.scratch-ticket{aspect-ratio:1.45}.scratch-reveal,.scratch-reveal.rank2,.scratch-reveal.rank3,.scratch-reveal.blank{padding:8px 11px;gap:5px}.scratch-ticket-head{gap:5px}.scratch-prize-key{gap:2px}.scratch-prize-key span{padding:2px 4px;font-size:9px!important}.scratch-prize-key i{font-size:13px}.scratch-symbol-grid{max-height:190px;max-width:190px;gap:4px;padding:5px;border-radius:14px}.scratch-symbol-cell{border-radius:10px}.scratch-ticket-rule{font-size:10px!important}.scratch-verdict{font-size:12px!important}}

/* v43 · three-ticket sequential scratch challenge */
.luck-game-screen[data-game="scratch"] .scratch-stage{justify-content:flex-start;padding:clamp(14px,1.8vw,24px);overflow-y:auto;overscroll-behavior:contain}
.scratch-choice-panel{position:relative;z-index:3;width:min(96%,650px);margin:auto;text-align:center}
.scratch-choice-guide{display:flex;align-items:center;justify-content:center;gap:7px;margin:8px 0 15px;color:#aeb4c9;font-size:13px;font-weight:900}
.scratch-choice-guide b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,206,94,.14);border:1px solid rgba(255,218,128,.3);color:#ffda7d}
.scratch-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(9px,1.4vw,16px)}
.scratch-choice-card{position:relative;min-width:0;aspect-ratio:.72;padding:12px 8px;border:2px solid #edc45c;border-radius:18px;overflow:hidden;background:repeating-linear-gradient(135deg,rgba(255,255,255,.08) 0 8px,transparent 8px 16px),linear-gradient(155deg,#b82843,#71162a);color:#fff1c7;box-shadow:0 9px 0 #4c1020,0 18px 30px rgba(0,0,0,.27),inset 0 0 0 4px rgba(255,236,169,.1);transition:.2s ease}
.scratch-choice-card::before{content:"";position:absolute;inset:8px;border:1px dashed rgba(255,224,139,.46);border-radius:13px;pointer-events:none}
.scratch-choice-card:hover{transform:translateY(-5px) rotate(-1deg);filter:brightness(1.08);box-shadow:0 13px 0 #4c1020,0 25px 38px rgba(0,0,0,.32)}
.scratch-choice-card:nth-child(2):hover{transform:translateY(-5px) rotate(1deg)}
.scratch-choice-card:nth-child(3):hover{transform:translateY(-5px) rotate(-.5deg)}
.scratch-choice-no{position:absolute;left:13px;top:12px;color:#f6c95e;font-size:12px;font-weight:1000;letter-spacing:.12em}
.scratch-choice-seal{position:relative;z-index:1;width:64px;aspect-ratio:1;margin:18px auto 11px;display:grid;place-items:center;border:3px solid #ffe29a;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff4bf,#e8aa2f 58%,#8a3e19);color:#6d241b;font-family:Georgia,serif;font-size:38px;font-weight:1000;box-shadow:0 7px 0 #5c1724,0 13px 20px rgba(0,0,0,.22)}
.scratch-choice-card strong{position:relative;z-index:1;display:block;color:#fff2bf;font-size:18px}.scratch-choice-card small{position:relative;z-index:1;display:block;margin-top:4px;color:#e4afba;font-size:11px;font-weight:850}
.scratch-play-area{position:relative;z-index:3;width:min(98%,680px);margin:auto}.scratch-play-area.hidden{display:none}
.scratch-selected-ticket{position:relative;padding:16px 20px 14px;border:2px solid #ffd978;border-radius:24px;background:radial-gradient(circle at 50% -15%,rgba(255,255,255,.9),transparent 34%),repeating-linear-gradient(135deg,rgba(132,68,12,.045) 0 7px,transparent 7px 14px),linear-gradient(145deg,#fff7cf,#f5ce63 66%,#e99b39);box-shadow:0 14px 0 #5b1425,0 28px 55px rgba(0,0,0,.4),inset 0 0 0 5px rgba(255,255,255,.24);color:#55240e;overflow:hidden}
.scratch-selected-ticket::before,.scratch-selected-ticket::after{content:"";position:absolute;top:50%;width:28px;height:28px;border-radius:50%;background:#11121e;transform:translateY(-50%)}.scratch-selected-ticket::before{left:-16px}.scratch-selected-ticket::after{right:-16px}
.scratch-ticket-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.scratch-ticket-top small{display:block;color:#8b291f;font-size:10px;font-weight:1000;letter-spacing:.16em}.scratch-ticket-top strong{display:block;margin-top:2px;color:#7a1726;font-size:21px}.scratch-ticket-number{flex:0 0 auto;padding:6px 10px;border-radius:999px;background:#7b1729;color:#fff3c9;font-size:11px;font-weight:1000}
.scratch-sequence-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.scratch-step-card{position:relative;min-width:0;text-align:center;transition:.3s ease}.scratch-step-label{display:flex;align-items:center;justify-content:center;gap:5px;margin-bottom:6px;color:#8a5422;font-size:11px;font-weight:1000}.scratch-step-label b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#873047;color:#fff7d5;font-size:10px}
.scratch-slot-surface{position:relative;aspect-ratio:1;border:2px solid rgba(122,57,26,.25);border-radius:17px;overflow:hidden;background:linear-gradient(145deg,#fffef0,#ffe7a2);box-shadow:inset 0 3px rgba(255,255,255,.84),0 5px 11px rgba(87,44,13,.18)}
.scratch-slot-symbol{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(48px,5.2vw,78px);filter:drop-shadow(0 4px 2px rgba(77,34,9,.18));opacity:0;transform:scale(.9);transition:opacity .12s ease,transform .38s cubic-bezier(.2,.8,.2,1)}
.scratch-slot-canvas{position:absolute;z-index:3;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none;transition:opacity .34s ease}.scratch-slot-canvas.revealed{opacity:0;pointer-events:none}
.scratch-slot-lock{position:absolute;z-index:5;inset:0;display:grid;place-items:center;padding:10px;background:linear-gradient(145deg,rgba(69,47,49,.98),rgba(29,29,40,.99));color:#b9afac;font-size:12px;font-weight:950;line-height:1.35;transition:.28s ease}.scratch-step-card.active .scratch-slot-lock,.scratch-step-card.revealed .scratch-slot-lock{opacity:0;pointer-events:none}.scratch-step-card.active .scratch-slot-surface{border-color:#d9982c;box-shadow:0 0 0 4px rgba(255,204,83,.2),0 8px 18px rgba(103,54,15,.22)}.scratch-step-card.scratching .scratch-slot-symbol,.scratch-step-card.revealed .scratch-slot-symbol{opacity:1}.scratch-step-card.revealed .scratch-slot-symbol{transform:scale(1.04)}.scratch-step-card.revealed .scratch-step-label b{background:#2ca47f}
.scratch-step-card.suspense .scratch-slot-surface{animation:scratchHeartbeat .68s ease-in-out infinite;box-shadow:0 0 0 4px rgba(209,37,65,.23),0 0 32px rgba(209,37,65,.3)}
@keyframes scratchHeartbeat{0%,100%{transform:scale(1)}35%{transform:scale(1.045)}50%{transform:scale(1)}68%{transform:scale(1.025)}}
.scratch-countdown{min-height:38px;margin-top:10px;display:flex;align-items:center;justify-content:center;text-align:center;color:#7b3c21;font-size:13px;font-weight:950}.scratch-countdown b{display:inline-grid;place-items:center;width:34px;height:34px;margin-right:7px;border-radius:50%;background:#7b1729;color:#fff5cf;font-size:21px;box-shadow:0 4px 0 #4f1020;animation:scratchCountPop .7s ease both}@keyframes scratchCountPop{0%{transform:scale(.5);opacity:0}55%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.scratch-ticket-status{min-height:25px;margin-top:8px;text-align:center;color:#71381d;font-size:13px;font-weight:950}.scratch-ticket-status.win{color:#9b142d}.scratch-ticket-status.lose{color:#584a46}.scratch-selected-ticket.checked.win{animation:scratchWinGlow .8s ease both;box-shadow:0 14px 0 #5b1425,0 0 45px rgba(255,200,65,.68),inset 0 0 0 5px rgba(255,255,255,.28)}@keyframes scratchWinGlow{45%{transform:scale(1.025)}}
.scratch-result-actions{display:flex;justify-content:center;margin-top:12px}.scratch-result-actions button{min-width:170px;padding:11px 18px;border:0;border-radius:13px;background:linear-gradient(135deg,#f2bc45,#d96c45);color:#fff;font-size:13px;font-weight:1000;box-shadow:0 5px 0 #794229}.scratch-result-actions button:disabled{display:none}
@media(max-width:820px){.luck-game-screen[data-game="scratch"] .scratch-stage{min-height:620px}.scratch-choice-panel,.scratch-play-area{margin-top:6px}.scratch-choice-card{aspect-ratio:.8}.scratch-selected-ticket{padding:14px 14px 13px}.scratch-slot-symbol{font-size:clamp(44px,12vw,70px)}}
@media(max-width:460px){.scratch-choice-grid{gap:6px}.scratch-choice-card{padding:8px 4px;border-radius:14px}.scratch-choice-card::before{inset:5px;border-radius:10px}.scratch-choice-seal{width:48px;margin:16px auto 8px;font-size:29px}.scratch-choice-card strong{font-size:14px}.scratch-choice-card small{font-size:9px}.scratch-choice-no{left:9px;top:8px;font-size:9px}.scratch-selected-ticket{padding:12px 10px}.scratch-ticket-top strong{font-size:17px}.scratch-sequence-grid{gap:6px}.scratch-slot-surface{border-radius:13px}.scratch-step-label{font-size:9px}.scratch-slot-lock{font-size:10px;padding:5px}.scratch-countdown{font-size:11px}.scratch-slot-symbol{font-size:clamp(40px,13vw,58px)}}

/* v44 · broadcast-first game surfaces and modal settings */
.scratch-broadcast-shell{display:block!important;height:100%;min-height:0}.scratch-broadcast-shell .scratch-stage{width:100%;height:100%;min-height:0}
.scratch-settings-open,.roulette-settings-open{position:absolute;z-index:40;right:18px;top:16px;padding:10px 15px;border:1px solid rgba(255,255,255,.16);border-radius:13px;background:rgba(7,10,20,.72);color:#fff3cd;font-size:15px;font-weight:1000;box-shadow:0 8px 22px rgba(0,0,0,.24);backdrop-filter:blur(10px)}
.scratch-settings-open:hover,.roulette-settings-open:hover{transform:translateY(-1px);filter:brightness(1.12)}
.scratch-broadcast-shell .scratch-title{font-size:clamp(37px,4.4vw,66px);line-height:1}.scratch-broadcast-shell .scratch-subtitle{font-size:clamp(18px,1.65vw,25px)}
.scratch-broadcast-shell .scratch-choice-panel{width:min(94%,820px)}.scratch-broadcast-shell .scratch-choice-grid{gap:clamp(16px,2vw,28px)}.scratch-broadcast-shell .scratch-choice-card{aspect-ratio:.86}.scratch-broadcast-shell .scratch-choice-seal{width:clamp(76px,7vw,108px);font-size:clamp(45px,4.5vw,67px)}.scratch-broadcast-shell .scratch-choice-card strong{font-size:clamp(22px,2vw,31px)}.scratch-broadcast-shell .scratch-choice-card small{font-size:clamp(14px,1.1vw,18px)}.scratch-broadcast-shell .scratch-choice-no{font-size:14px}
.scratch-broadcast-shell .scratch-play-area{width:min(96%,900px)}.scratch-broadcast-shell .scratch-ticket-top strong{font-size:clamp(24px,2.2vw,34px)}.scratch-broadcast-shell .scratch-ticket-top small,.scratch-broadcast-shell .scratch-ticket-number{font-size:14px}.scratch-broadcast-shell .scratch-step-label{font-size:16px}.scratch-broadcast-shell .scratch-step-label b{width:27px;height:27px;font-size:14px}.scratch-broadcast-shell .scratch-slot-symbol{font-size:clamp(76px,8.5vw,126px)}.scratch-broadcast-shell .scratch-slot-lock{font-size:clamp(15px,1.25vw,20px)}.scratch-broadcast-shell .scratch-countdown{font-size:clamp(18px,1.6vw,25px)}.scratch-broadcast-shell .scratch-ticket-status{font-size:clamp(18px,1.5vw,24px)}
.scratch-broadcast-stats{width:min(700px,86%)!important;margin-top:16px!important}.scratch-broadcast-stats .scratch-mini-stat{padding:10px}.scratch-broadcast-stats small{font-size:13px}.scratch-broadcast-stats strong{font-size:18px}
.scratch-settings-modal,.roulette-settings-modal{position:absolute;z-index:100;inset:0;display:grid;place-items:center;padding:20px;background:rgba(3,5,12,.78);backdrop-filter:blur(12px)}.scratch-settings-modal.hidden,.roulette-settings-modal.hidden{display:none}
.scratch-settings-dialog,.roulette-settings-dialog{position:relative;width:min(760px,94vw);max-height:88%;overflow:auto;padding:24px;border:1px solid rgba(255,255,255,.13);border-radius:24px;background:linear-gradient(145deg,#271d35,#111827);box-shadow:0 30px 90px rgba(0,0,0,.55);color:#f7f1ff}.scratch-settings-dialog .scratch-prob-list{max-height:48vh}.scratch-settings-close,.roulette-settings-close{position:absolute;right:14px;top:13px;width:40px;height:40px;border:0;border-radius:12px;background:rgba(255,255,255,.08);color:#fff;font-size:28px;line-height:1}.scratch-settings-dialog .scratch-settings-head{padding-right:48px}.scratch-settings-dialog .scratch-settings-head strong{font-size:28px}.scratch-settings-dialog .scratch-setting-help{font-size:15px}.scratch-settings-dialog .scratch-prob-copy strong{font-size:19px}.scratch-settings-dialog .scratch-prob-copy small,.scratch-settings-dialog .scratch-weight-control span{font-size:14px}.scratch-settings-dialog .scratch-settings-actions button{min-height:45px;font-size:15px}
.scratch-step-card.skipped{opacity:.62}.scratch-step-card.skipped .scratch-slot-lock{background:linear-gradient(145deg,rgba(75,54,52,.93),rgba(35,35,43,.96));color:#ddd1c8}

.luck-game-content>.luck-prompt{font-size:clamp(34px,3.8vw,58px)}.luck-game-content>.luck-subprompt{font-size:clamp(17px,1.5vw,23px)}.luck-game-content>.luck-kicker{font-size:clamp(14px,1.15vw,18px)}
.luck-game-content>.choice-row{flex-wrap:wrap;max-width:94%}.luck-game-content>.choice-row .luck-choice{width:auto;min-width:clamp(190px,18vw,280px);min-height:64px;height:auto;padding:18px 28px;font-size:clamp(22px,1.85vw,29px);line-height:1.25;white-space:normal;overflow:visible}.luck-game-content>.luck-action,.enhance-actions .luck-action{width:auto;min-width:clamp(230px,21vw,330px);min-height:66px;height:auto;padding:17px 30px;font-size:clamp(21px,1.75vw,28px);line-height:1.25;white-space:normal;overflow:visible}
.luck-game-screen .result-banner{width:max-content;min-width:56%;max-width:min(88%,960px);padding:17px 27px;font-size:clamp(22px,1.8vw,29px);line-height:1.35;white-space:normal;overflow:visible;overflow-wrap:anywhere}
.fish-toast{width:max-content;min-width:360px;max-width:min(78vw,900px);font-size:clamp(17px,1.4vw,22px);padding:11px 22px;line-height:1.35;white-space:normal}.fishing-start-btn{width:auto;min-width:300px;height:auto;min-height:82px;padding:12px 30px}.fishing-start-btn strong{font-size:28px;line-height:1.2}.fishing-start-btn small{font-size:13px;line-height:1.35}.fishing-start-icon{font-size:38px}.fish-result-card{min-width:320px;max-width:46%;padding:17px 24px}.fish-result-card strong{font-size:clamp(30px,3.2vw,49px);line-height:1.12;overflow-wrap:anywhere}.fish-result-card>span{font-size:clamp(16px,1.35vw,21px);line-height:1.4}
.game-title-group{min-width:0;flex:1}.game-title-group h2{min-width:0;line-height:1.15;white-space:normal;overflow:visible}.title-actions{flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}.title-btn{min-height:44px;height:auto;line-height:1.25;white-space:normal}
.scratch-choice-card strong,.scratch-choice-card small,.scratch-ticket-top strong,.scratch-ticket-status{white-space:normal;overflow:visible;overflow-wrap:anywhere}.scratch-result-actions button{width:auto;min-width:210px;min-height:48px;height:auto;line-height:1.25;white-space:normal}
.online-title-wrap h2{font-size:clamp(28px,2.7vw,42px)}.online-lobby-copy p{font-size:18px}.online-room-card strong{font-size:22px}.rps-choice strong{font-size:17px}.yut-throw-btn{font-size:18px}.yut-result-name small{font-size:13px}.turn-banner{font-size:15px}
@media(max-width:820px){.scratch-settings-open,.roulette-settings-open{right:10px;top:9px;padding:8px 11px;font-size:12px}.scratch-broadcast-shell .scratch-title{font-size:34px}.scratch-broadcast-shell .scratch-subtitle{font-size:16px}.scratch-broadcast-shell .scratch-choice-grid{gap:9px}.scratch-broadcast-shell .scratch-choice-card{aspect-ratio:.8}.scratch-broadcast-shell .scratch-choice-seal{width:62px;font-size:38px}.scratch-broadcast-shell .scratch-choice-card strong{font-size:18px}.scratch-broadcast-shell .scratch-choice-card small{font-size:11px}.scratch-broadcast-shell .scratch-slot-symbol{font-size:clamp(55px,15vw,88px)}.luck-game-content>.luck-prompt{font-size:34px}.luck-game-content>.luck-subprompt{font-size:16px}.luck-game-content>.choice-row{max-width:100%}.luck-game-content>.choice-row .luck-choice{min-width:145px;min-height:54px;padding:14px 19px;font-size:20px}.luck-game-content>.luck-action,.enhance-actions .luck-action{min-width:190px;min-height:56px;padding:14px 21px;font-size:19px}.luck-game-screen .result-banner{width:auto;min-width:0;max-width:min(72%,360px);font-size:19px;line-height:1.35}.fishing-start-btn{min-width:230px;min-height:64px;padding:9px 20px}.fishing-start-btn strong{font-size:22px}.fish-toast{width:auto;min-width:260px;max-width:82vw;font-size:15px}.fish-result-card{min-width:0;width:min(52%,260px);max-width:52%;padding:12px 14px}.fish-result-card strong{font-size:clamp(22px,5vw,30px)}.fish-result-card>span{font-size:14px}.online-title-wrap h2{font-size:22px}.online-room-card strong{font-size:18px}.turn-banner{font-size:12px}.yut-throw-btn{font-size:15px}}

/* v45 · prevent enlarged enhancement controls from overflowing their column */
.enhance-wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(18px,4vw,58px)}
.enhance-info{min-width:0;width:100%}
.enhance-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:100%;gap:10px}
.enhance-actions .luck-action{width:100%!important;min-width:0!important;max-width:100%;min-height:64px;margin:0;padding:15px 10px!important;font-size:clamp(18px,1.75vw,25px)!important;line-height:1.2;white-space:normal;overflow:visible}
@media(max-width:820px){.enhance-wrap{grid-template-columns:1fr;gap:6px}.enhance-actions{width:min(100%,620px);margin-inline:auto}.enhance-actions .luck-action{min-width:0!important;min-height:56px;padding:13px 8px!important;font-size:clamp(17px,4.6vw,21px)!important}}
@media(max-width:420px){.enhance-actions{grid-template-columns:1fr}.enhance-actions .luck-action{min-height:50px}}

/* v45 · numbered nine-cell scratch ticket */
.luck-game-screen[data-game="scratch"] .scratch-stage{align-items:center;justify-content:flex-start;gap:clamp(8px,1.2vh,15px);padding:clamp(12px,1.7vh,20px) clamp(14px,2vw,28px);overflow-y:auto}
.scratch-nine-intro{position:relative;z-index:2;flex:0 0 auto;width:min(88%,920px);text-align:center}
.scratch-nine-kicker{color:#ffd66f;font-size:clamp(12px,1vw,16px);font-weight:1000;letter-spacing:.18em}
.scratch-nine-title{margin:3px 0 0;color:#fff7df;font-size:clamp(28px,3.1vw,48px);font-weight:1000;line-height:1.08;text-shadow:0 4px 20px rgba(0,0,0,.4)}
.scratch-nine-subtitle{margin:5px 0 0;color:#ccd1e3;font-size:clamp(15px,1.35vw,21px);font-weight:850;line-height:1.35}
.scratch-nine-ticket{position:relative;z-index:3;flex:0 0 auto;width:min(62vh,54vw,620px);min-width:390px;padding:clamp(12px,1.5vw,20px);border:3px solid #ffd978;border-radius:clamp(20px,2vw,28px);background:radial-gradient(circle at 50% -10%,rgba(255,255,255,.9),transparent 32%),repeating-linear-gradient(135deg,rgba(132,68,12,.05) 0 8px,transparent 8px 16px),linear-gradient(145deg,#fff7cf,#f5ce63 66%,#e99b39);box-shadow:0 12px 0 #5b1425,0 24px 50px rgba(0,0,0,.42),inset 0 0 0 5px rgba(255,255,255,.25);color:#55240e;overflow:visible}
.scratch-nine-ticket::before,.scratch-nine-ticket::after{content:"";position:absolute;top:50%;width:26px;height:26px;border-radius:50%;background:#11121e;transform:translateY(-50%)}.scratch-nine-ticket::before{left:-15px}.scratch-nine-ticket::after{right:-15px}
.scratch-nine-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:clamp(8px,1vh,12px);text-align:left}.scratch-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.scratch-nine-brand small{display:block;color:#8b291f;font-size:clamp(9px,.8vw,12px);font-weight:1000;letter-spacing:.16em}.scratch-nine-brand strong{display:block;margin-top:2px;color:#7a1726;font-size:clamp(19px,1.8vw,27px);font-weight:1000;line-height:1.1}.scratch-nine-rule{flex:0 0 auto;padding:7px 11px;border-radius:999px;background:#7b1729;color:#fff3c9;font-size:clamp(11px,1vw,15px);font-weight:1000}.scratch-top-shuffle{border:0;min-width:136px;min-height:42px;padding:9px 16px;border-radius:12px;background:linear-gradient(135deg,#f2bc45,#d96c45);color:#fff;font-size:15px;font-weight:1000;line-height:1.1;box-shadow:0 5px 0 #794229;white-space:nowrap}.scratch-top-shuffle:active{transform:translateY(2px);box-shadow:0 3px 0 #794229}.scratch-top-shuffle.hidden{display:none!important}
.scratch-nine-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,.75vw,10px);padding:clamp(7px,.8vw,11px);border:2px dashed rgba(123,48,24,.28);border-radius:clamp(15px,1.5vw,21px);background:rgba(255,252,224,.62);box-shadow:inset 0 0 0 3px rgba(255,255,255,.34)}
.scratch-pick-cell{position:relative;min-width:0;aspect-ratio:1;border-radius:clamp(12px,1.2vw,17px);transition:transform .2s ease,filter .2s ease,opacity .2s ease}
.scratch-pick-surface{position:absolute;inset:0;border:2px solid rgba(122,57,26,.25);border-radius:inherit;overflow:hidden;background:linear-gradient(145deg,#fffef0,#ffe7a2);box-shadow:inset 0 3px rgba(255,255,255,.84),0 5px 11px rgba(87,44,13,.18)}
.scratch-pick-number{position:absolute;z-index:6;left:7px;top:7px;display:grid;place-items:center;width:clamp(28px,2.6vw,40px);height:clamp(28px,2.6vw,40px);border:2px solid rgba(255,246,209,.85);border-radius:50%;background:#7b1729;color:#fff7d9;font-size:clamp(16px,1.5vw,23px);font-weight:1000;line-height:1;box-shadow:0 3px 0 #4c1020,0 5px 12px rgba(0,0,0,.28);pointer-events:none}
.scratch-pick-symbol{position:absolute;z-index:1;inset:0;display:grid;place-items:center;padding-top:5%;font-size:clamp(55px,6.1vw,94px);line-height:1;opacity:0;transform:scale(.86);filter:drop-shadow(0 4px 2px rgba(77,34,9,.2));transition:opacity .08s linear,transform .35s cubic-bezier(.2,.8,.2,1)}
.scratch-pick-canvas{position:absolute;z-index:4;inset:0;width:100%;height:100%;border-radius:inherit;cursor:crosshair;touch-action:none;transition:opacity .3s ease,filter .2s ease}
.scratch-pick-cell.scratching .scratch-pick-symbol,.scratch-pick-cell.revealed .scratch-pick-symbol{opacity:1}.scratch-pick-cell.revealed .scratch-pick-symbol{transform:scale(1.04)}.scratch-pick-cell.revealed .scratch-pick-canvas{opacity:0;pointer-events:none}.scratch-pick-cell.selected:not(.revealed){transform:translateY(-2px);filter:drop-shadow(0 0 9px rgba(255,183,35,.68))}.scratch-pick-cell.revealed{transform:scale(1.02)}.scratch-pick-cell.revealed .scratch-pick-surface{border-color:#d31f3e;box-shadow:0 0 0 3px rgba(211,31,62,.2),0 5px 14px rgba(87,44,13,.2)}.scratch-pick-cell.closed{opacity:.62}.scratch-pick-cell.closed .scratch-pick-canvas{cursor:not-allowed;filter:saturate(.45) brightness(.82)}
.scratch-nine-progress{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:clamp(8px,1vh,12px);color:#71381d;font-size:clamp(14px,1.25vw,19px);font-weight:950}.scratch-nine-progress strong{display:inline-grid;place-items:center;min-width:78px;padding:5px 12px;border-radius:999px;background:#7b1729;color:#fff6d4;font-size:clamp(17px,1.55vw,23px);box-shadow:0 4px 0 #4f1020}
.scratch-nine-ticket .scratch-ticket-status{min-height:clamp(25px,3.6vh,40px);margin-top:7px;display:flex;align-items:center;justify-content:center;padding:0 8px;font-size:clamp(15px,1.35vw,21px);line-height:1.25}.scratch-nine-ticket .scratch-result-actions{margin-top:8px}.scratch-nine-ticket .scratch-result-actions button{min-height:44px;padding:10px 20px;font-size:clamp(14px,1.2vw,18px)}
.scratch-nine-ticket.checked.win{animation:scratchWinGlow .8s ease both;box-shadow:0 12px 0 #5b1425,0 0 48px rgba(255,200,65,.75),inset 0 0 0 5px rgba(255,255,255,.3)}
.scratch-nine-stats{flex:0 0 auto;width:min(560px,76%)!important;margin-top:1px!important}
@media(max-width:820px){.luck-game-screen[data-game="scratch"] .scratch-stage{min-height:0;padding:11px 9px 20px}.scratch-nine-intro{width:85%;padding-right:2px}.scratch-nine-title{font-size:clamp(24px,7vw,34px)}.scratch-nine-subtitle{font-size:clamp(13px,3.8vw,17px)}.scratch-nine-ticket{width:min(92vw,58vh,510px);min-width:0;padding:10px;border-radius:19px}.scratch-nine-head{gap:7px}.scratch-head-actions{gap:6px}.scratch-nine-brand strong{font-size:clamp(16px,4.7vw,22px)}.scratch-nine-rule{padding:5px 8px;font-size:11px}.scratch-top-shuffle{min-width:112px;min-height:36px;padding:7px 12px;font-size:13px}.scratch-nine-grid{gap:6px;padding:7px}.scratch-pick-number{left:5px;top:5px;width:clamp(25px,8vw,34px);height:clamp(25px,8vw,34px);font-size:clamp(14px,4.7vw,19px)}.scratch-pick-symbol{font-size:clamp(42px,15vw,72px)}.scratch-nine-ticket .scratch-ticket-status{font-size:clamp(13px,3.7vw,17px)}.scratch-nine-stats{width:min(90%,480px)!important}}
@media(max-width:460px){.scratch-nine-kicker{font-size:10px}.scratch-nine-title{font-size:23px}.scratch-nine-subtitle{font-size:13px}.scratch-nine-rule{white-space:normal;text-align:center;line-height:1.15}.scratch-top-shuffle{min-width:100px;min-height:34px;padding:6px 10px;font-size:12px}.scratch-nine-ticket{width:min(94vw,56vh,390px);padding:8px}.scratch-nine-grid{gap:5px;padding:6px}.scratch-pick-number{left:4px;top:4px;border-width:1px}.scratch-nine-progress{margin-top:7px;font-size:13px}.scratch-nine-progress strong{min-width:64px;font-size:16px}.scratch-nine-ticket .scratch-result-actions button{min-width:160px;min-height:40px;padding:8px 13px;font-size:13px}.scratch-nine-stats{font-size:12px}}

/* v46 · instant four-card selection */
.luck-game-screen[data-game="scratch"] .result-banner{display:none!important}
.luck-game-screen[data-game="scratch"] .luck-game-content{padding:clamp(10px,1.4vw,20px);overflow:hidden}
.scratch-pick-stage{display:grid!important;place-items:center!important;width:100%;height:100%;min-height:0!important;padding:0!important;overflow:hidden!important}
.scratch-pick-layout{width:100%;height:100%;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(205px,.58fr) minmax(410px,1.42fr);gap:clamp(14px,1.6vw,24px);align-items:center}
.scratch-pick-copy{min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.scratch-pick-copy .scratch-nine-title{margin-top:6px;font-size:clamp(30px,3.15vw,47px);line-height:1.08}
.scratch-outcome-key{width:100%;display:grid;grid-template-columns:1fr;gap:7px;margin-top:clamp(12px,2vh,20px)}
.scratch-outcome-key span{display:flex;align-items:center;justify-content:center;min-height:42px;padding:8px 11px;border:1px solid rgba(255,255,255,.1);border-radius:13px;background:rgba(255,255,255,.055);color:#f5efff;font-size:clamp(16px,1.45vw,21px);font-weight:1000}
.scratch-pick-copy .scratch-nine-progress{color:#cbd2e6;margin-top:clamp(12px,2vh,20px)}
.scratch-pick-copy .scratch-ticket-status{width:100%;min-height:48px;margin-top:10px;display:flex;align-items:center;justify-content:center;padding:8px 10px;border-radius:13px;background:rgba(255,255,255,.055);color:#fff3cf;font-size:clamp(14px,1.25vw,18px);font-weight:950;line-height:1.3;overflow-wrap:anywhere}
.scratch-pick-copy .scratch-ticket-status.win{color:#ffe089;background:rgba(255,201,76,.11)}.scratch-pick-copy .scratch-ticket-status.lose{color:#f2b0bd;background:rgba(233,83,116,.1)}
.scratch-pick-copy .scratch-result-actions{margin-top:10px}.scratch-pick-copy .scratch-result-actions button{min-width:170px;min-height:44px;padding:9px 17px;font-size:16px}
.scratch-choice-ticket{width:min(100%,560px)!important;min-width:0!important;padding:clamp(12px,1.25vw,18px)!important;justify-self:center;overflow:visible}
.scratch-choice-ticket .scratch-nine-head{margin-bottom:8px}.scratch-choice-ticket .scratch-nine-brand strong{font-size:clamp(18px,1.7vw,25px)}
.scratch-choice-ticket .scratch-nine-grid{gap:clamp(6px,.7vw,9px);padding:clamp(7px,.7vw,10px)}
.scratch-choice-cell{appearance:none;position:relative;display:block;min-width:0;width:100%;aspect-ratio:1;padding:0;border:0;border-radius:clamp(12px,1.2vw,17px);background:transparent;color:inherit;cursor:pointer;overflow:visible;transition:transform .18s ease,filter .18s ease,opacity .28s ease}
.scratch-choice-cell:disabled{opacity:1}.scratch-choice-cell:not(:disabled):hover{transform:translateY(-3px) scale(1.025);filter:brightness(1.08)}
.scratch-choice-cell .scratch-pick-surface{display:block;background:linear-gradient(145deg,#f1f3f5,#9ba3ab 50%,#dfe3e7);border-color:rgba(94,74,46,.35)}
.scratch-pick-cover{position:absolute;z-index:4;inset:0;display:grid;place-items:center;border-radius:inherit;background:radial-gradient(circle at 25% 18%,rgba(255,255,255,.74),transparent 24%),repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 8px,rgba(71,78,86,.08) 8px 16px),linear-gradient(145deg,#e8ecef,#8d969e 55%,#d2d8dd);color:#4c535b;transition:opacity .24s ease,transform .24s ease;box-shadow:inset 0 2px rgba(255,255,255,.8)}
.scratch-pick-cover strong{font-size:clamp(15px,1.35vw,20px);font-weight:1000;text-shadow:0 1px rgba(255,255,255,.7)}
.scratch-choice-cell .scratch-pick-symbol{z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 4px 0;opacity:0;transform:scale(.78);filter:none}
.scratch-choice-cell .scratch-pick-symbol b{font-size:clamp(38px,4.2vw,62px);font-weight:400;line-height:1}.scratch-choice-cell .scratch-pick-symbol em{font-style:normal;color:#542b1e;font-size:clamp(14px,1.35vw,19px);font-weight:1000;line-height:1.1}
.scratch-choice-cell.revealed .scratch-pick-cover{opacity:0;transform:scale(.82);pointer-events:none}.scratch-choice-cell.revealed .scratch-pick-symbol{opacity:1;transform:scale(1)}
.scratch-choice-cell.win .scratch-pick-surface{background:linear-gradient(145deg,#fffbd6,#ffd24e)}.scratch-choice-cell.blank .scratch-pick-surface{background:linear-gradient(145deg,#f4f5f7,#c9ced4)}.scratch-choice-cell.penalty .scratch-pick-surface{background:linear-gradient(145deg,#ffd8d8,#e77777)}
.scratch-choice-cell.selected{z-index:3;transform:scale(1.035);filter:drop-shadow(0 0 10px rgba(255,210,81,.75))}.scratch-choice-cell.selected .scratch-pick-surface{border:4px solid #d31f3e;box-shadow:0 0 0 3px #fff1a8,0 7px 15px rgba(93,40,16,.28)}.scratch-choice-cell.selected::after{content:"내 선택";position:absolute;z-index:8;right:4px;bottom:4px;padding:3px 6px;border-radius:999px;background:#7b1729;color:#fff8d8;font-size:clamp(8px,.72vw,11px);font-weight:1000;line-height:1.1;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.scratch-choice-cell.unchosen{opacity:.54;filter:saturate(.65)}.scratch-choice-cell.unchosen .scratch-pick-number{background:#626974;box-shadow:0 3px 0 #363a40}
.scratch-pick-copy .scratch-nine-stats{width:100%!important;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:10px!important}.scratch-pick-copy .scratch-mini-stat{padding:6px}.scratch-pick-copy .scratch-mini-stat:nth-child(3){border-left:0;border-top:1px solid rgba(255,255,255,.07)}.scratch-pick-copy .scratch-mini-stat:nth-child(4){border-top:1px solid rgba(255,255,255,.07)}
@media(max-width:900px){.luck-game-screen[data-game="scratch"] .luck-game-content{overflow-y:auto}.scratch-pick-stage{height:auto;min-height:100%!important;overflow:visible!important}.scratch-pick-layout{height:auto;grid-template-columns:1fr;gap:14px;padding:10px 0}.scratch-pick-copy .scratch-nine-title br{display:none}.scratch-outcome-key{grid-template-columns:repeat(3,1fr);width:min(96%,560px)}.scratch-pick-copy .scratch-nine-stats{width:min(96%,560px)!important;grid-template-columns:repeat(4,minmax(0,1fr))}.scratch-pick-copy .scratch-mini-stat:nth-child(3),.scratch-pick-copy .scratch-mini-stat:nth-child(4){border-top:0}.scratch-pick-copy .scratch-mini-stat:nth-child(3){border-left:1px solid rgba(255,255,255,.07)}.scratch-choice-ticket{width:min(88vw,430px)!important}}
@media(max-width:520px){.scratch-outcome-key{gap:5px}.scratch-outcome-key span{min-height:36px;padding:6px 4px;font-size:13px}.scratch-pick-copy .scratch-nine-title{font-size:27px}.scratch-choice-ticket{width:min(94vw,390px)!important}.scratch-choice-cell .scratch-pick-symbol b{font-size:clamp(32px,13vw,50px)}.scratch-choice-cell .scratch-pick-symbol em{font-size:13px}.scratch-pick-copy .scratch-nine-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.scratch-pick-copy .scratch-mini-stat:nth-child(3),.scratch-pick-copy .scratch-mini-stat:nth-child(4){border-top:1px solid rgba(255,255,255,.07)}.scratch-pick-copy .scratch-mini-stat:nth-child(3){border-left:0}}

/* v47 · match-three card tension + AI practice entry */
.scratch-match-meter span{gap:6px;transition:transform .22s ease,background .22s ease,box-shadow .22s ease}.scratch-match-meter span b{display:inline-grid;place-items:center;min-width:30px;height:30px;border-radius:9px;background:rgba(0,0,0,.24);color:#fff4b4;font-size:21px;line-height:1}.scratch-match-meter span i{font-style:normal;color:#9ea7be;font-size:14px}.scratch-match-meter span.near{transform:scale(1.045);background:rgba(255,205,75,.16);box-shadow:0 0 22px rgba(255,205,75,.2)}.scratch-match-meter span.matched{animation:scratchMeterHit .55s ease both;background:rgba(255,213,81,.25);box-shadow:0 0 26px rgba(255,213,81,.42)}
.scratch-choice-cell.pair-glow{z-index:2;filter:drop-shadow(0 0 13px rgba(255,211,78,.92))}.scratch-choice-cell.triple-hit{animation:scratchTripleHit .58s ease both;filter:drop-shadow(0 0 18px rgba(255,221,95,1))}.scratch-pick-copy .scratch-ticket-status.suspense{color:#fff0a6;background:rgba(255,198,46,.13);box-shadow:inset 0 0 0 1px rgba(255,213,93,.16)}
@keyframes scratchMeterHit{0%{transform:scale(1)}45%{transform:scale(1.14) rotate(-2deg)}100%{transform:scale(1.05)}}@keyframes scratchTripleHit{0%{transform:scale(1.035)}45%{transform:scale(1.13) rotate(2deg)}100%{transform:scale(1.055)}}
.online-ai-practice{width:100%;min-height:78px;margin-top:13px;display:grid;grid-template-columns:54px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:13px;padding:13px 16px;border:1px solid rgba(145,119,255,.52);border-radius:18px;background:linear-gradient(120deg,rgba(119,84,255,.28),rgba(43,201,173,.16));color:#fff;text-align:left;cursor:pointer;box-shadow:inset 0 1px rgba(255,255,255,.12),0 10px 28px rgba(0,0,0,.18);transition:transform .2s ease,filter .2s ease,border-color .2s ease}
.online-ai-practice:hover{transform:translateY(-2px);filter:brightness(1.09);border-color:rgba(181,164,255,.88)}.online-ai-practice>span{grid-row:1/3;display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:linear-gradient(145deg,#7e65ff,#35c9ad);font-size:29px;box-shadow:0 6px 18px rgba(71,59,185,.38)}.online-ai-practice strong{min-width:0;font-size:22px;font-weight:1000;line-height:1.15}.online-ai-practice small{min-width:0;margin-top:3px;color:#c8cde1;font-size:14px;font-weight:800;line-height:1.25;white-space:normal}.online-ai-practice b{grid-column:3;grid-row:1/3;padding-left:8px;color:#e7ddff;font-size:17px;font-weight:1000;white-space:nowrap}
.word-online-tile{background:linear-gradient(145deg,#f4fbff,#f3f0ff 55%,#fff8ed)}.chain-online-tile{background:linear-gradient(145deg,#f1fff8,#eff8ff 55%,#fff4fa)}.word-icon{display:grid!important;place-items:center!important;background:linear-gradient(145deg,#735cf3,#31bca5)!important;color:white!important}.word-icon b{font-size:clamp(27px,2.8vw,40px);font-weight:1000;letter-spacing:-.08em}.word-icon i{position:absolute;right:9px;bottom:6px;font-style:normal;color:#fff39d;font-size:20px;font-weight:1000}.chain-icon{background:linear-gradient(145deg,#2dbd9d,#3186cc)!important}
.online-library .game-tile{min-height:clamp(178px,22vh,235px)}
.word-arena{height:100%;min-height:0;position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:13px;padding:clamp(16px,2.5vw,34px);isolation:isolate}.word-rule-banner{display:flex;align-items:center;justify-content:center;gap:10px;min-height:45px;padding:8px 14px;border:1px solid rgba(107,227,201,.16);border-radius:15px;background:rgba(255,255,255,.045);color:#a8c2ca;font-size:clamp(13px,1.2vw,17px);font-weight:900;text-align:center}.word-rule-banner b{color:#79e8cd;font-size:clamp(16px,1.5vw,21px)}.word-playfield{min-height:0;display:grid;grid-template-columns:minmax(220px,.7fr) minmax(330px,1.3fr);gap:clamp(14px,2.4vw,30px);align-items:stretch}.word-required-card{min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;border-radius:25px;background:radial-gradient(circle at 50% 28%,rgba(86,226,194,.18),rgba(255,255,255,.035) 60%);border:1px solid rgba(99,225,197,.15);text-align:center}.word-required-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px}.word-required-head>small{color:#718c96;font-size:12px;font-weight:1000;letter-spacing:.18em}.word-required-letter{display:grid;place-items:center;width:clamp(112px,15vw,190px);aspect-ratio:1;margin:10px auto;border-radius:36%;background:linear-gradient(145deg,#58e0bd,#337ba0);color:#fff;font-size:clamp(70px,9vw,126px);font-weight:1000;line-height:1;box-shadow:0 14px 0 #17566a,0 25px 50px rgba(0,0,0,.26),inset 0 3px rgba(255,255,255,.28)}.word-required-card p{margin:16px 0 0;color:#d9eef0;font-size:clamp(16px,1.6vw,23px);font-weight:950;line-height:1.35}.word-history-panel{min-width:0;min-height:0;display:flex;flex-direction:column;padding:clamp(14px,1.8vw,24px);border-radius:25px;background:rgba(2,12,18,.42);border:1px solid rgba(255,255,255,.07)}.word-history-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,.07)}.word-history-head strong{font-size:clamp(18px,1.8vw,25px)}.word-history-head span{color:#718993;font-size:13px;font-weight:900}.word-history-list{flex:1;min-height:0;display:flex;align-content:flex-start;gap:9px;flex-wrap:wrap;overflow-y:auto;padding:14px 3px}.word-chip{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:8px 12px;border-radius:13px;background:rgba(85,220,188,.09);border:1px solid rgba(91,224,194,.17);color:#efffff;font-size:clamp(17px,1.45vw,21px);font-weight:1000}.word-chip.guest{background:rgba(114,136,255,.09);border-color:rgba(131,151,255,.18)}.word-chip small{color:#58d6b8;font-size:10px;letter-spacing:.08em}.word-chip.guest small{color:#9fb1ff}.word-history-empty{margin:auto;color:#617984;font-size:18px;font-weight:900;text-align:center}.word-last-event{min-height:44px;display:grid;place-items:center;padding:9px 12px;border-radius:13px;background:rgba(255,255,255,.045);color:#9bb0b8;font-size:14px;font-weight:900;text-align:center;line-height:1.35}.word-controls{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:9px;width:min(900px,100%);margin:auto}.word-input{min-width:0;height:58px;padding:0 18px;border:1px solid rgba(119,223,205,.2);border-radius:16px;background:rgba(1,10,15,.72);color:white;outline:none;font-size:clamp(20px,2vw,29px);font-weight:1000;text-align:center}.word-input:focus{border-color:#54dfbd;box-shadow:0 0 0 4px rgba(78,220,185,.1)}.word-input:disabled{opacity:.48}.word-submit-btn,.word-giveup-btn{min-width:120px;padding:0 20px;border:0;border-radius:16px;color:#fff;font-size:17px;font-weight:1000}.word-submit-btn{background:linear-gradient(135deg,#4bd7b4,#358cac);box-shadow:0 6px 0 #1d626c}.word-submit-btn:disabled{opacity:.4;box-shadow:none}.word-giveup-btn{min-width:88px;background:rgba(255,94,119,.12);border:1px solid rgba(255,113,134,.2);color:#ffafbb}.word-turn-wait{grid-column:1/-1;color:#7f979f;font-size:13px;font-weight:900;text-align:center}.word-win-overlay,.word-round-overlay{position:absolute;inset:0;z-index:15;display:grid;place-items:center;background:rgba(2,10,14,.79);backdrop-filter:blur(8px)}

/* v51 · three-round word match, 30-second clock, and pressure effects */
.word-match-banner{min-height:64px;justify-content:space-between;text-align:left}.word-match-title{display:flex;align-items:center;gap:9px;white-space:nowrap}.word-match-title small{color:#718c96;font-size:10px;font-weight:1000;letter-spacing:.14em}.word-match-title b{font-size:clamp(24px,2.25vw,33px);letter-spacing:.04em}.word-round-rail{display:flex;align-items:center;justify-content:center;gap:7px}.word-round-step{position:relative;display:grid;grid-template-columns:auto auto;align-items:center;gap:5px;min-width:55px;height:42px;padding:5px 8px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(2,12,18,.38);opacity:.54}.word-round-step i{font-style:normal;color:#8da0aa;font-size:9px;font-weight:1000}.word-round-step strong{color:#f3f8fa;font-size:23px;line-height:1}.word-round-step em{position:absolute;right:4px;bottom:2px;font-style:normal;color:#79e8cd;font-size:8px;font-weight:1000}.word-round-step.active{opacity:1;border-color:rgba(94,232,201,.55);background:rgba(61,205,175,.14);box-shadow:0 0 20px rgba(59,220,185,.16);transform:translateY(-1px)}.word-round-step.done{opacity:.82}.word-round-step.done strong{color:#ffd86e}.word-rule-copy{max-width:310px;color:#9cb0b8;font-size:11px;line-height:1.25;text-align:right}.word-clock{--clock:100;flex:0 0 auto;display:flex;align-items:baseline;justify-content:center;gap:2px;min-width:72px;height:40px;padding:0 9px;border:2px solid rgba(92,226,195,.45);border-radius:999px;background:linear-gradient(90deg,rgba(71,214,181,.22) calc(var(--clock)*1%),rgba(4,17,23,.72) 0);color:#dffef7;box-shadow:inset 0 0 14px rgba(75,225,191,.1)}.word-clock span{font-size:16px}.word-clock strong{font-size:25px;line-height:1}.word-clock small{color:inherit;font-size:10px;letter-spacing:0}.word-clock.urgent{border-color:#ffc04d;color:#ffe49a;animation:wordClockUrgent .72s ease-in-out infinite}.word-clock.critical{border-color:#ff5878;color:#ffb0bd;background:linear-gradient(90deg,rgba(255,58,91,.35) calc(var(--clock)*1%),rgba(35,5,12,.82) 0);animation:wordClockCritical .35s ease-in-out infinite}.word-head-rule{display:inline-flex;margin-top:7px;padding:4px 8px;border-radius:999px;background:rgba(255,214,91,.11);color:#ffe18a;font-size:12px;font-weight:950}.word-arena.word-pressure::before{content:"";position:absolute;z-index:-1;inset:4px;border:2px solid rgba(255,75,105,.34);border-radius:27px;box-shadow:inset 0 0 55px rgba(255,37,76,.08),0 0 28px rgba(255,46,83,.09);pointer-events:none;animation:wordPressure 1s ease-in-out infinite}.word-arena.word-pressure .word-required-letter{animation:wordLetterPressure .8s ease-in-out infinite}.word-last-event.danger{color:#ffb4c0;background:rgba(255,62,96,.12);box-shadow:inset 0 0 0 1px rgba(255,103,128,.18)}.word-round-card{width:min(510px,88%);padding:clamp(24px,4vw,42px);border:1px solid rgba(255,221,112,.34);border-radius:28px;background:radial-gradient(circle at 50% 0,rgba(255,205,78,.2),transparent 48%),linear-gradient(160deg,#142430,#081319);text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.55);animation:wordRoundReveal .5s cubic-bezier(.2,.8,.2,1) both}.word-round-card small{color:#ffd978;font-size:12px;font-weight:1000;letter-spacing:.18em}.word-round-card h3{margin:10px 0 8px;color:#fff;font-size:clamp(30px,4vw,52px);font-weight:1000}.word-round-card p{margin:7px 0;color:#a9bec5;font-size:clamp(15px,1.7vw,21px);font-weight:900}.word-round-card p b{color:#7ff0d4;font-size:1.35em}.word-match-scoreline{display:flex;align-items:center;justify-content:center;gap:13px;margin:16px 0;padding:11px;border-radius:15px;background:rgba(0,0,0,.25);font-size:20px;font-weight:1000}.word-match-scoreline strong{color:#ffe077;font-size:33px}.word-win-overlay .rps-match-card{animation:wordRoundReveal .5s cubic-bezier(.2,.8,.2,1) both}.word-win-overlay .online-rematch-btn{min-width:210px}.word-win-overlay .match-starter{color:#ffdc76;font-size:18px;font-weight:1000}
@keyframes wordClockUrgent{50%{transform:scale(1.045);box-shadow:0 0 18px rgba(255,185,55,.28)}}@keyframes wordClockCritical{50%{transform:scale(1.075);box-shadow:0 0 24px rgba(255,47,86,.42)}}@keyframes wordPressure{50%{opacity:.48}}@keyframes wordLetterPressure{50%{transform:scale(1.035);filter:saturate(1.2) brightness(1.08)}}@keyframes wordRoundReveal{0%{opacity:0;transform:scale(.72) rotate(-2deg)}65%{transform:scale(1.035) rotate(1deg)}100%{opacity:1;transform:scale(1)}}
@media(max-width:520px){.online-ai-practice{grid-template-columns:46px minmax(0,1fr);min-height:72px;padding:11px 12px}.online-ai-practice>span{width:44px;height:44px;font-size:25px}.online-ai-practice strong{font-size:19px}.online-ai-practice small{font-size:12px}.online-ai-practice b{display:none}}
@media(max-width:900px){.word-arena{padding:10px;gap:9px;overflow-y:auto}.word-playfield{grid-template-columns:1fr;grid-template-rows:auto minmax(190px,1fr);gap:9px}.word-required-card{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;padding:11px 16px}.word-required-head{grid-column:2;grid-row:1}.word-required-letter{grid-row:1/3;width:82px;margin:0 14px 0 0;border-radius:25px;font-size:54px;box-shadow:0 8px 0 #17566a,0 12px 22px rgba(0,0,0,.22)}.word-required-card p{margin:4px 0 0;font-size:16px}.word-history-panel{padding:11px}.word-controls{grid-template-columns:minmax(0,1fr) 94px}.word-input{height:52px}.word-submit-btn{min-width:90px;padding:0 12px}.word-giveup-btn{grid-column:1/-1;min-height:38px}.word-rule-banner{font-size:12px}.word-rule-banner b{font-size:15px}.word-match-banner{min-height:92px;display:grid;grid-template-columns:auto 1fr;gap:5px 10px}.word-match-title{justify-content:flex-start}.word-round-rail{justify-content:flex-end}.word-rule-copy{grid-column:1/-1;max-width:none;text-align:center}.word-round-step{min-width:47px;height:37px;padding:4px 6px}.word-round-step strong{font-size:20px}.word-clock{min-width:66px;height:36px;padding:0 7px}.word-clock strong{font-size:22px}}

.word-chip.system{background:linear-gradient(135deg,rgba(255,205,83,.18),rgba(255,151,75,.11));border-color:rgba(255,211,104,.36);box-shadow:0 0 18px rgba(255,197,76,.1)}.word-chip.system small{color:#ffd778}

/* v50 · short-window word games: keep the input row outside the playfield */
@media(min-width:901px) and (max-height:760px){
  body[data-view="online-game"] .online-layout{padding:1.2% 2%}
  .online-arena{gap:8px}
  .online-player-strip{height:50px;flex-basis:50px}
  .word-arena{padding:12px 18px;gap:8px;grid-template-rows:62px minmax(0,1fr) auto}
  .word-rule-banner{min-height:40px;padding:6px 12px}.word-match-banner{min-height:62px}
  .word-playfield{gap:14px}
  .word-required-card{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-rows:auto auto;padding:12px 14px}
  .word-required-head{grid-column:2;grid-row:1;align-self:end}
  .word-required-letter{grid-column:1;grid-row:1/3;width:100px;margin:0 12px 0 0;border-radius:27px;font-size:64px;box-shadow:0 8px 0 #17566a,0 14px 26px rgba(0,0,0,.24),inset 0 3px rgba(255,255,255,.28)}
  .word-required-card p{grid-column:2;grid-row:2;align-self:start;margin:5px 0 0;font-size:16px}
  .word-history-panel{padding:12px 14px}
  .word-history-head{padding-bottom:7px}
  .word-history-list{padding:8px 2px}
  .word-last-event{min-height:36px;padding:6px 10px;font-size:12px}
  .word-controls{grid-template-columns:minmax(0,1fr) 110px 84px;gap:8px}
  .word-input{height:50px;font-size:22px}
  .word-submit-btn,.word-giveup-btn{min-width:0;padding:0 12px;font-size:16px}
  .word-turn-wait{font-size:11px;line-height:1.2}
}
@media(min-width:901px) and (max-height:620px){
  .word-arena{padding:8px 14px;grid-template-rows:54px minmax(0,1fr) auto}
  .word-rule-banner{min-height:36px}.word-match-banner{min-height:54px}.word-rule-copy{display:none}.word-round-step{height:36px}.word-match-title b{font-size:22px}
  .word-required-card{grid-template-columns:94px minmax(0,1fr);padding:9px 12px}
  .word-required-letter{width:82px;margin-right:10px;border-radius:23px;font-size:52px}
  .word-history-head{padding-bottom:5px}.word-history-list{padding:5px 2px}.word-chip{min-height:35px;padding:5px 9px}
  .word-input{height:44px}.word-turn-wait{display:none}
}

/* v42 · policy-aware AdSense-ready home banner */
.adsense-zone{display:none}
body.adsense-enabled[data-view="hub"] .adsense-zone{position:relative;display:block;width:min(728px,86vw);min-height:90px;margin:18px auto 0;padding:15px 8px 5px;border:1px solid rgba(136,119,151,.18);border-radius:13px;background:rgba(255,255,255,.46);overflow:hidden}
.adsense-label{position:absolute;left:50%;top:3px;transform:translateX(-50%);color:#a298aa;font-size:9px;font-weight:900;letter-spacing:.12em;line-height:1}
.adsense-zone .adsbygoogle{display:block;width:100%;min-width:250px;min-height:72px}
body.adsense-load-failed .adsense-zone{display:none!important}
@media(min-width:821px){body.adsense-enabled[data-view="hub"] .hub-screen{grid-template-rows:auto minmax(440px,1fr) auto;overflow-y:auto;overscroll-behavior-y:contain}body.adsense-enabled[data-view="hub"] .hub-hero{min-height:320px;padding:22px 5% 18px}}
@media(max-width:500px){body.adsense-enabled[data-view="hub"] .adsense-zone{width:min(320px,88vw);min-height:100px;margin-top:20px;padding-top:16px}.adsense-zone .adsbygoogle{min-height:82px}}



/* 캐릭터 윷말 스타일 업그레이드 */
.yut-piece, .piece, .token {
  filter: drop-shadow(0 8px 8px rgba(0,0,0,.22));
  transform-origin: center bottom;
}
.character-yut-badge {
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  background: linear-gradient(145deg,#ffd86b,#ff8c69);
}
.start-up-guide {
  position:absolute;
  pointer-events:none;
  font-weight:900;
  color:#fff;
  text-shadow:0 2px 5px #333;
  letter-spacing:1px;
}
.start-up-guide::after{content:'START ↑';font-size:23px;color:#fff;}


/* 완성형 윷놀이 · 왕실 목판, 경로 안내, 진영별 캐릭터 말 */
.yut-arena{
  background:
    radial-gradient(circle at 28% 38%,rgba(240,179,73,.12),transparent 35%),
    radial-gradient(circle at 80% 8%,rgba(76,221,190,.08),transparent 28%);
}
.yut-board-wrap::before{
  content:"";position:absolute;width:min(69vh,105%,650px);aspect-ratio:1;border-radius:42px;
  background:radial-gradient(circle,rgba(243,184,76,.19),transparent 69%);filter:blur(22px);pointer-events:none;
}
.yut-board{
  border:8px solid #57321f;outline:2px solid #c68a3c;outline-offset:-5px;border-radius:42px;
  background:
    radial-gradient(circle at 28% 20%,rgba(255,248,218,.62),transparent 33%),
    radial-gradient(circle at 79% 76%,rgba(117,58,22,.15),transparent 38%),
    repeating-linear-gradient(9deg,rgba(100,52,20,.035) 0 1px,transparent 1px 7px),
    linear-gradient(145deg,#f1d49e 0,#d9aa68 53%,#bd7e43 100%);
  box-shadow:
    inset 0 0 0 5px rgba(255,230,171,.3),inset 0 0 72px rgba(74,34,15,.3),
    0 0 0 3px #26150f,0 22px 55px rgba(0,0,0,.5),0 0 40px rgba(224,154,57,.15);
}
.yut-board::before{
  content:"";position:absolute;inset:3.2%;border:2px solid rgba(91,48,22,.28);border-radius:29px;
  box-shadow:inset 0 0 0 1px rgba(255,240,201,.32);pointer-events:none;z-index:1;
}
.yut-board::after{inset:1.3%;border:1px solid rgba(255,221,151,.35);border-radius:34px;z-index:1}
.yut-lines{z-index:1;filter:drop-shadow(0 2px 0 rgba(255,235,190,.4)) drop-shadow(0 3px 3px rgba(63,29,12,.24))}
.yut-lines path.road{stroke:url(#yutRoadGold);stroke-width:2.65}
.yut-lines path.shortcut{stroke-width:2.35;opacity:.86}
.yut-lines .route-guide{stroke:#ff3d33;stroke-width:1.12;opacity:.92;marker-end:url(#yutGuideArrow);animation:yutRoutePulse 1.75s ease-in-out infinite}
.yut-lines marker path{fill:#ff3d33;stroke:none}
@keyframes yutRoutePulse{50%{opacity:.5}}
.yut-route-legend{
  position:absolute;left:50%;bottom:3.5%;z-index:5;transform:translateX(-50%);display:flex;align-items:center;gap:6px;
  padding:5px 9px;border-radius:999px;background:rgba(58,27,15,.76);border:1px solid rgba(255,218,144,.36);
  color:#fff3d1;font-size:9px;font-weight:950;letter-spacing:.02em;white-space:nowrap;box-shadow:0 4px 12px rgba(52,23,11,.2);
}
.yut-route-legend i{width:15px;height:3px;border-radius:99px;background:#ff4439;box-shadow:0 0 8px #ff3d33;position:relative}
.yut-route-legend i::after{content:"";position:absolute;right:-2px;top:-3px;border-left:6px solid #ff4439;border-top:4px solid transparent;border-bottom:4px solid transparent}
.yut-board-caption{top:4.5%;color:rgba(68,35,18,.58);font-size:9.5px;letter-spacing:.2em;z-index:4}
.yut-home-label{right:3.6%;bottom:7.1%;z-index:4;color:#3e2518;font-size:9px;text-shadow:0 1px rgba(255,245,211,.75)}
.yut-home-label strong{font-size:14px;color:#21483f;letter-spacing:.04em}.yut-home-label span{display:block;margin-top:2px}
.yut-node{
  z-index:3;border:2px solid #95622f;background:radial-gradient(circle at 34% 25%,#fffdf1 0,#f4dfb5 52%,#c99555 100%);
  box-shadow:inset 0 3px 4px rgba(255,255,255,.92),inset 0 -3px 5px rgba(95,48,20,.2),0 4px 7px rgba(62,31,15,.35),0 0 0 2px rgba(255,235,185,.3);
}
.yut-node.major{background:radial-gradient(circle at 34% 23%,#fff5c8,#e8b85d 58%,#a8672c);border-color:#73401e;box-shadow:inset 0 3px 4px rgba(255,255,255,.72),inset 0 -5px 8px rgba(89,40,17,.25),0 6px 10px rgba(58,28,13,.38),0 0 0 2px rgba(255,225,145,.45)}
.yut-node.center{background:radial-gradient(circle at 37% 28%,#fffbe1,#e3b760 58%,#8e4e25);border:3px solid #6e371c;box-shadow:inset 0 0 0 4px rgba(255,225,151,.34),0 7px 14px rgba(57,25,11,.43),0 0 22px rgba(245,186,72,.25)}
.yut-node.home-node{background:radial-gradient(circle at 34% 24%,#eafff7,#70d2b4 55%,#217e70);border-color:#155f55;box-shadow:inset 0 3px 4px rgba(255,255,255,.72),0 0 0 3px rgba(105,233,200,.25),0 5px 13px rgba(17,87,75,.38)}
.yut-node.branch-ready{animation:yutBranchGlow 1s ease-in-out infinite}
.yut-node.route-target{cursor:pointer;animation:yutTargetGlow .75s ease-in-out infinite;z-index:5}
.yut-node.last-arrival{box-shadow:0 0 0 4px rgba(255,77,61,.55),0 0 24px rgba(255,70,52,.7),inset 0 3px 4px rgba(255,255,255,.8)}
@keyframes yutBranchGlow{50%{box-shadow:0 0 0 5px rgba(255,235,147,.72),0 0 25px rgba(255,190,57,.9),inset 0 3px 4px rgba(255,255,255,.85)}}
@keyframes yutTargetGlow{50%{transform:translate(-50%,-50%) scale(1.12);box-shadow:0 0 0 5px rgba(255,69,55,.48),0 0 28px rgba(255,64,51,.88),inset 0 3px 4px rgba(255,255,255,.85)}}
.yut-node-label{color:rgba(72,38,18,.78);font-size:8.5px;text-shadow:0 1px rgba(255,247,218,.85)}
.yut-node.major .yut-node-label{font-size:9.5px}.yut-node.center .yut-node-label{font-size:18px;color:#5e321a}.yut-node.home-node .yut-node-label{color:#174f46}
.yut-piece,.yut-bench .yut-piece{
  border-radius:50%;border:2px solid rgba(255,247,218,.96);overflow:visible;isolation:isolate;display:grid;place-items:center;
  transform-origin:center;filter:drop-shadow(0 5px 5px rgba(36,16,9,.42));
}
.yut-node>.yut-piece{width:74%;height:auto}
.yut-piece::before{inset:9%;width:auto;height:auto;border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.35),transparent 46%);z-index:-1}
.yut-piece.host{background:radial-gradient(circle at 34% 25%,#ffd875,#e74b2e 58%,#7e1a17);box-shadow:inset 0 3px 5px rgba(255,255,255,.45),inset 0 -5px 8px rgba(88,16,15,.35),0 0 0 2px rgba(255,178,91,.34)}
.yut-piece.guest{background:radial-gradient(circle at 34% 25%,#bdf4ff,#4278ed 57%,#23206f);box-shadow:inset 0 3px 5px rgba(255,255,255,.45),inset 0 -5px 8px rgba(18,18,93,.35),0 0 0 2px rgba(132,198,255,.34)}
.yut-piece-face{font-size:clamp(12px,1.438vw,21px);line-height:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.yut-piece-no{position:absolute;right:-4px;bottom:-3px;min-width:13px;height:13px;padding:0 3px;border-radius:99px;display:grid;place-items:center;background:#24150f;border:1px solid #f8d78d;color:#fff2ca;font-size:9px;line-height:1}
.yut-stack-count{position:absolute;left:-6px;top:-7px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;display:grid;place-items:center;background:#fff3c8;border:2px solid #a24820;color:#722313;font-size:10px;box-shadow:0 3px 7px rgba(0,0,0,.32)}
.yut-piece.selectable{animation:yutPieceGlow .82s ease-in-out infinite;cursor:pointer}
@keyframes yutPieceGlow{50%{transform:scale(1.16);filter:drop-shadow(0 0 10px rgba(255,221,102,.98)) drop-shadow(0 5px 5px rgba(36,16,9,.4))}}
.yut-side-panel{padding:2%;border-radius:24px;background:linear-gradient(145deg,rgba(19,39,49,.9),rgba(7,22,30,.88));border:1px solid rgba(228,181,89,.15);box-shadow:inset 0 1px rgba(255,255,255,.05),0 18px 45px rgba(0,0,0,.22)}
.turn-banner{background:rgba(255,255,255,.045);border-color:rgba(224,177,86,.14);letter-spacing:.02em}.turn-banner.myturn{background:linear-gradient(135deg,rgba(238,173,56,.18),rgba(61,207,168,.13));border-color:rgba(245,195,88,.36);color:#ffe29a;box-shadow:0 0 22px rgba(231,162,48,.1)}
.yut-sticks{filter:drop-shadow(0 10px 11px rgba(0,0,0,.3))}.yut-stick{border:1px solid rgba(255,222,164,.28);background:linear-gradient(90deg,#4d2918,#ad6b38 25%,#efbc78 56%,#8c4c28 80%,#482617)}
.yut-stick.marked::before{content:"빽";position:absolute;left:50%;top:6%;transform:translateX(-50%);width:15px;height:15px;display:grid;place-items:center;border-radius:50%;background:#b72520;border:1px solid #ffd6a0;color:#fff4d7;font-size:9px;font-weight:1000;box-shadow:0 2px 5px rgba(0,0,0,.3)}
.yut-stick.back::after{background:#2b1710;box-shadow:0 0 0 1px rgba(255,215,157,.15)}
.yut-result-name strong{background:linear-gradient(180deg,#fff7d3,#ecb953);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 5px 18px rgba(235,170,56,.16)}
.yut-throw-btn{background:linear-gradient(135deg,#f2b743,#dd692f 50%,#42b894);box-shadow:0 7px 0 #77371e,0 14px 28px rgba(222,112,45,.22);border:1px solid rgba(255,232,171,.3);text-shadow:0 1px 2px rgba(68,28,13,.4)}
.yut-throw-btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08)}
.yut-move-chip.active{background:linear-gradient(135deg,rgba(240,173,56,.3),rgba(54,197,160,.2));border-color:rgba(250,200,97,.55);color:#ffe19a}
.yut-route-choice{border-color:rgba(250,191,76,.35);box-shadow:0 12px 30px rgba(0,0,0,.3),0 0 22px rgba(226,150,39,.08)}
.yut-route-actions button{border-color:rgba(241,188,88,.18)}.yut-route-actions button:hover{transform:translateY(-1px)}
.yut-benches{gap:9px}.yut-bench{background:linear-gradient(145deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border-color:rgba(255,255,255,.09)}
.yut-bench:first-child{box-shadow:inset 3px 0 #d94a2f}.yut-bench:last-child{box-shadow:inset -3px 0 #4a78dd}.yut-bench-head strong{font-size:11px;color:#e9d3ab}
.yut-bench .yut-piece{width:25px;height:25px}.yut-bench .yut-piece-face{font-size:14px}.yut-bench .yut-piece-no{right:-5px;bottom:-4px}
.yut-home-dot{width:25px;height:25px}.yut-home-dot.done{background:linear-gradient(145deg,rgba(255,218,121,.24),rgba(84,211,177,.15));color:#ffe292}
@media(max-width:900px){
  body[data-view="online-game"]{overflow:hidden;touch-action:pan-y pinch-zoom}
  body[data-view="online-game"] .online-game-content{overflow:hidden;touch-action:pan-y}
  .yut-arena{height:100%;min-height:0;grid-template-rows:auto auto;align-content:start;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding:8px 7px 18px;scrollbar-gutter:stable}
  .yut-board{width:min(45dvh,89vw,440px);border-width:6px;border-radius:32px;flex:none}
  .yut-board-wrap{min-height:min(45dvh,89vw,440px)}
  .yut-board-wrap::before{width:min(48dvh,96vw,470px)}
  .yut-side-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;padding:8px;border-radius:18px}
  .turn-banner{grid-column:1/3}.yut-sticks{height:88px}.yut-stick{height:70px;width:17px}.yut-result-name strong{font-size:30.24px}
  .yut-move-queue,.yut-route-choice,.yut-benches{grid-column:1/3}.yut-route-legend{bottom:3%;padding:4px 7px;font-size:8px}
}
@media(max-width:560px){
  .online-topbar{min-height:54px;height:8.5%}.online-layout{height:91.5%;padding:6px}.online-player-strip{height:48px;flex-basis:48px}.strip-player{padding:0 9px}.strip-room{padding:0 8px}
  .yut-board{width:min(42dvh,91vw,400px)}.yut-board-wrap{min-height:min(42dvh,91vw,400px)}
  .yut-home-label span{display:none}.yut-board-caption{font-size:8px}.yut-route-legend{display:none}
  .yut-side-panel{gap:5px;padding:7px}.yut-sticks{height:72px}.yut-stick{height:59px;width:15px}.yut-result-name strong{font-size:26.88px}.yut-result-name small{font-size:10px}
  .yut-throw-btn{padding:9px}.yut-benches{grid-template-columns:1fr 1fr}.yut-bench{padding:6px}.yut-bench-head{display:block}.yut-bench-head span{display:block;margin-top:2px}.yut-help{display:none}
}
@media(min-width:901px){
  .yut-side-panel{justify-content:flex-start;overflow-y:auto;padding-top:clamp(9px,1.5vh,15px)}
  .yut-side-panel>.turn-banner{position:sticky;top:0;z-index:18;flex:0 0 auto;min-height:40px;display:grid;place-items:center;line-height:1.3;margin:0 0 5px;overflow:visible}
}
@media(min-width:901px) and (max-height:760px){
  .yut-side-panel{padding-top:8px}
  .yut-side-panel>.turn-banner{min-height:34px;padding:5px 8px;font-size:12px;margin-bottom:3px}
}

@media(prefers-reduced-motion:reduce){.yut-lines .route-guide,.yut-node.branch-ready,.yut-node.route-target,.yut-piece.selectable{animation:none}}


.online-start-intro{position:absolute;inset:0;z-index:90;display:grid;place-items:center;padding:clamp(14px,2.5vw,34px);overflow-y:auto;background:radial-gradient(circle at 50% 42%,rgba(35,198,166,.22),rgba(2,11,18,.9) 56%,rgba(1,6,11,.98));backdrop-filter:blur(13px);isolation:isolate;animation:onlineIntroFadeIn .22s ease-out both}
.online-start-intro::before,.online-start-intro::after{content:"";position:absolute;inset:-25%;z-index:-1;pointer-events:none}.online-start-intro::before{background:conic-gradient(from 0deg,transparent 0 7%,rgba(91,240,204,.1) 8% 9%,transparent 10% 20%,rgba(255,204,91,.09) 21% 22%,transparent 23% 100%);animation:onlineIntroSpin 9s linear infinite}.online-start-intro::after{inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.28),transparent 18%);opacity:0;animation:onlineIntroFlash .62s ease-out both}
.online-start-intro.leaving{animation:onlineIntroFadeOut .28s ease-in both}.online-start-card{position:relative;width:min(790px,94vw);max-height:calc(100% - 8px);overflow-y:auto;padding:clamp(22px,3.3vw,44px);border-radius:clamp(24px,3vw,38px);text-align:center;background:linear-gradient(145deg,rgba(19,48,59,.97),rgba(5,20,29,.98));border:2px solid rgba(104,238,207,.36);box-shadow:0 30px 90px rgba(0,0,0,.52),0 0 60px rgba(58,218,180,.17),inset 0 1px rgba(255,255,255,.12);animation:onlineIntroCardIn .62s cubic-bezier(.12,.84,.2,1.2) both;scrollbar-width:thin}
.online-start-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;color:#72efd0;font-size:clamp(11px,1vw,14px);font-weight:1000;letter-spacing:.22em}.online-start-kicker::before,.online-start-kicker::after{content:"";width:28px;height:2px;background:linear-gradient(90deg,transparent,#62e7c7)}.online-start-kicker::after{transform:scaleX(-1)}
.online-start-card h2{margin:0;color:#f6ffff;font-size:clamp(30px,4.2vw,58px);line-height:1;letter-spacing:-.055em;text-shadow:0 0 30px rgba(109,238,210,.18)}
.online-start-prompt{margin:clamp(15px,2.2vh,24px) auto 0;padding:clamp(14px,2vw,22px);border-radius:22px;background:linear-gradient(135deg,rgba(255,200,75,.16),rgba(63,222,181,.1));border:1px solid rgba(255,218,119,.35);box-shadow:inset 0 1px rgba(255,255,255,.08),0 0 30px rgba(244,176,48,.08)}.online-start-prompt small{display:block;color:#ffd978;font-size:clamp(11px,1vw,14px);font-weight:1000;letter-spacing:.18em}.online-start-prompt strong{display:block;margin-top:4px;color:#fff5c9;font-size:clamp(45px,7.4vw,90px);line-height:1.02;letter-spacing:.08em;text-indent:.08em;text-shadow:0 5px 25px rgba(255,181,43,.22)}.online-start-prompt span{display:block;margin-top:5px;color:#c8ddd9;font-size:clamp(14px,1.4vw,19px);font-weight:900}
.online-start-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:clamp(15px,2.1vh,22px)}.online-start-rule{min-width:0;padding:13px 10px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.085);color:#d8e9ec;font-size:clamp(13px,1.1vw,16px);font-weight:900;line-height:1.35}.online-start-rule b{display:grid;place-items:center;width:26px;height:26px;margin:0 auto 7px;border-radius:9px;background:rgba(86,226,192,.13);color:#6ce6c8;font-size:13px}
.online-start-signal{margin-top:clamp(16px,2.2vh,24px);color:#8aa1aa;font-size:clamp(15px,1.4vw,20px);font-weight:1000;letter-spacing:.16em;transition:.22s}.online-start-intro.launching .online-start-signal{color:#fff2a9;font-size:clamp(28px,4.2vw,58px);letter-spacing:.08em;text-shadow:0 0 28px rgba(255,210,83,.72);transform:scale(1.08);animation:onlineStartSignal .42s ease-in-out infinite alternate}
.online-start-progress{height:7px;margin:12px auto 0;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.08)}.online-start-progress i{display:block;width:100%;height:100%;transform-origin:left;background:linear-gradient(90deg,#43d8b5,#7af0d2 58%,#ffd65c);box-shadow:0 0 18px rgba(85,232,196,.55);animation:onlineIntroProgress var(--intro-duration,3800ms) linear both}
.online-start-spark{position:absolute;left:var(--x);top:var(--y);color:var(--c,#70ebcc);font-size:var(--s,18px);opacity:0;pointer-events:none;animation:onlineIntroSpark 1.25s ease-out var(--d,0s) infinite}
.online-arena{position:relative}.online-player-strip{position:relative;overflow:visible}.online-idle-clock{position:absolute;left:50%;bottom:-16px;z-index:12;min-width:108px;height:32px;padding:0 13px;display:flex;align-items:center;justify-content:center;gap:4px;transform:translateX(-50%);border-radius:999px;background:rgba(4,20,28,.97);border:1px solid rgba(116,232,206,.45);box-shadow:0 8px 24px rgba(0,0,0,.38),0 0 18px rgba(68,224,188,.16);color:#eafff8;font-weight:1000;white-space:nowrap}.online-idle-clock>span{font-size:18px;line-height:1}.online-idle-clock>strong{font-size:23px;line-height:1}.online-idle-clock>small{color:#9dc8be;font-size:12px}.online-idle-clock.urgent{background:linear-gradient(135deg,#4a1c22,#8e2633);border-color:#ff7589;color:#fff3f5;animation:onlineIdleUrgent .52s ease-in-out infinite alternate}.online-idle-clock.urgent>small{color:#ffd7dd}.online-idle-clock.auto{min-width:138px;background:linear-gradient(135deg,#f5a32e,#d34d32);border-color:#fff3b4;color:#fff}.online-idle-clock.auto>strong{font-size:17px}.online-idle-clock.auto>small{display:none}.online-restart-start{position:absolute;inset:0;z-index:90;display:grid;place-items:center;pointer-events:auto}.online-restart-start strong{color:#fff6bd;font-size:clamp(72px,15vw,190px);font-weight:1000;line-height:1;letter-spacing:.04em;text-shadow:0 0 22px rgba(255,218,90,.95),0 10px 44px rgba(0,0,0,.86);animation:onlineRestartStart .9s cubic-bezier(.15,.82,.2,1) both}.online-restart-start.leaving{animation:onlineIntroFadeOut .22s ease-in both}.online-auto-control{position:absolute;z-index:58;left:50%;top:74px;transform:translateX(-50%);width:min(620px,88%);padding:16px 18px;border-radius:22px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;background:linear-gradient(135deg,rgba(255,165,47,.97),rgba(226,75,52,.97) 50%,rgba(48,183,157,.97));border:2px solid rgba(255,244,190,.82);box-shadow:0 18px 55px rgba(0,0,0,.48),0 0 0 5px rgba(255,194,69,.16),0 0 38px rgba(255,115,51,.46);color:#fff;animation:onlineAutoControlIn .45s cubic-bezier(.15,.85,.2,1.18) both}.online-auto-pulse{width:18px;height:18px;border-radius:50%;background:#fff6a8;box-shadow:0 0 0 0 rgba(255,246,168,.8);animation:onlineAutoPulse .85s ease-out infinite}.online-auto-copy{min-width:0}.online-auto-copy small{display:block;font-size:11px;font-weight:1000;letter-spacing:.17em;color:#fff5bf}.online-auto-copy strong{display:block;margin-top:1px;font-size:clamp(24px,2.5vw,38px);line-height:1;letter-spacing:-.04em;text-shadow:0 3px 12px rgba(86,25,14,.3)}.online-auto-copy span{display:block;margin-top:4px;font-size:12px;font-weight:900;color:rgba(255,255,255,.88)}.online-auto-cancel{min-height:48px;padding:0 16px;border-radius:14px;border:1px solid rgba(255,255,255,.65);background:rgba(4,24,28,.76);color:#fff;font-size:14px;font-weight:1000;box-shadow:0 7px 18px rgba(0,0,0,.24);cursor:pointer}.online-auto-cancel:hover{transform:translateY(-2px);background:#072f35}.online-auto-cancel:active{transform:translateY(1px)}
@keyframes onlineIntroFadeIn{from{opacity:0}to{opacity:1}}@keyframes onlineIntroFadeOut{to{opacity:0;transform:scale(1.04)}}@keyframes onlineIntroSpin{to{transform:rotate(360deg)}}@keyframes onlineIntroFlash{0%{opacity:1;transform:scale(.25)}100%{opacity:0;transform:scale(4)}}@keyframes onlineIntroCardIn{0%{opacity:0;transform:scale(.62) translateY(45px)}68%{opacity:1;transform:scale(1.035) translateY(-5px)}100%{transform:scale(1) translateY(0)}}@keyframes onlineStartSignal{to{transform:scale(1.16);filter:brightness(1.25)}}@keyframes onlineIntroProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes onlineIntroSpark{0%{opacity:0;transform:translateY(10px) scale(.4) rotate(0)}25%{opacity:1}100%{opacity:0;transform:translateY(-48px) scale(1.45) rotate(160deg)}}
@keyframes onlineAutoControlIn{from{opacity:0;transform:translateX(-50%) translateY(-24px) scale(.78)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}@keyframes onlineAutoPulse{70%{box-shadow:0 0 0 14px rgba(255,246,168,0)}100%{box-shadow:0 0 0 0 rgba(255,246,168,0)}}@keyframes onlineIdleUrgent{to{transform:translateX(-50%) scale(1.1);box-shadow:0 0 28px rgba(255,68,87,.58)}}@keyframes onlineRestartStart{0%{opacity:0;transform:scale(.3)}38%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@media(max-width:700px){.online-start-intro{padding:10px}.online-start-card{width:96vw;padding:20px 14px;border-radius:23px}.online-start-rules{grid-template-columns:1fr;gap:6px}.online-start-rule{display:grid;grid-template-columns:27px 1fr;align-items:center;gap:8px;padding:9px 11px;text-align:left}.online-start-rule b{margin:0}.online-start-prompt{margin-top:12px;padding:12px}.online-start-signal{margin-top:13px}.online-start-progress{margin-top:8px}}
@media(max-width:700px){.online-idle-clock{bottom:-13px;min-width:94px;height:28px;padding:0 10px}.online-idle-clock>span{font-size:16px}.online-idle-clock>strong{font-size:20px}.online-idle-clock.auto{min-width:124px}.online-auto-control{top:56px;width:94%;padding:11px 12px;grid-template-columns:13px 1fr;gap:9px;border-radius:17px}.online-auto-copy strong{font-size:24px}.online-auto-copy span{font-size:11px}.online-auto-cancel{grid-column:1/3;width:100%;min-height:42px}.online-auto-pulse{width:13px;height:13px}}
@media(max-height:650px) and (min-width:701px){.online-start-card{padding:18px 26px}.online-start-prompt{margin-top:10px;padding:10px}.online-start-prompt strong{font-size:clamp(38px,7vh,58px)}.online-start-rules{margin-top:10px}.online-start-rule{padding:9px}.online-start-rule b{margin-bottom:4px}.online-start-signal{margin-top:10px}.online-start-progress{margin-top:6px}}
.online-player-strip{grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr);column-gap:8px;overflow:hidden}.online-idle-clock{position:static;left:auto;bottom:auto;align-self:center;z-index:auto;min-width:96px;height:30px;padding:0 11px;transform:none;box-shadow:0 4px 14px rgba(0,0,0,.3),0 0 12px rgba(68,224,188,.11)}.online-idle-clock.urgent{animation:onlineIdleUrgentInline .52s ease-in-out infinite alternate}.online-idle-clock.auto{min-width:120px}.strip-room{padding:0 10px}@keyframes onlineIdleUrgentInline{to{transform:scale(1.07);box-shadow:0 0 22px rgba(255,68,87,.5)}}
@media(max-width:700px){.online-player-strip{column-gap:4px}.strip-room{padding:0 4px}.strip-room span{font-size:8px;letter-spacing:.1em}.strip-room b{font-size:11px;letter-spacing:.06em}.online-idle-clock{min-width:82px;height:26px;padding:0 7px}.online-idle-clock>span{font-size:14px}.online-idle-clock>strong{font-size:18px}.online-idle-clock>small{font-size:9px}.online-idle-clock.auto{min-width:102px}.online-idle-clock.auto>strong{font-size:14px}}
.rps-match-card{box-sizing:border-box;width:min(500px,92%);padding:clamp(22px,4vw,30px)}.online-rematch-ready{display:flex;justify-content:center;gap:8px;margin:3px 0 13px}.online-rematch-ready span{min-width:0;flex:1;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);color:#778f98;font-size:11px;font-weight:1000}.online-rematch-ready span.ready{background:rgba(70,218,181,.15);border-color:rgba(92,235,201,.42);color:#7ff0d4;box-shadow:0 0 18px rgba(69,221,184,.12)}.online-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.online-result-actions .online-rematch-btn,.word-win-overlay .online-result-actions .online-rematch-btn{width:100%;min-width:0;font-size:15px}.online-rematch-btn:disabled{background:#273b43;color:#7f969e;cursor:wait;opacity:.9}.online-result-exit-btn{width:100%;min-width:0;padding:12px 20px;border-radius:14px;border:1px solid rgba(255,126,143,.35);background:rgba(89,27,38,.72);color:#ffc0ca;font-size:15px;font-weight:1000}.online-result-exit-btn:hover{background:rgba(126,34,49,.88)}
@media(prefers-reduced-motion:reduce){.online-start-intro,.online-start-card,.online-start-intro::before,.online-start-intro::after,.online-start-spark,.online-start-signal,.online-start-progress i,.online-auto-control,.online-auto-pulse,.online-idle-clock,.online-restart-start strong{animation:none!important}}


.hub-mode-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(440px,100%)}.hub-mode-tab{width:100%;min-width:0;justify-content:center;overflow:hidden}.hub-mode-tab strong,.hub-mode-tab small{white-space:nowrap}
@media(min-width:821px){
  body[data-view="hub"] #offlineLibrary,body[data-view="hub"] #onlineLibrary{height:100%;min-height:0;align-self:stretch;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:1.5%}
  body[data-view="hub"] #offlineLibrary .game-tile,body[data-view="hub"] #onlineLibrary .game-tile{min-height:0;display:grid;grid-template-columns:clamp(40px,3.7vw,55px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:clamp(8px,.9vw,14px);align-items:center;padding:clamp(10px,1vw,15px)}
  body[data-view="hub"] #offlineLibrary .tile-badge,body[data-view="hub"] #onlineLibrary .tile-badge{grid-column:1/-1;justify-self:start;margin:0 0 2px;padding:4px 7px}
  body[data-view="hub"] #offlineLibrary .tile-icon,body[data-view="hub"] #onlineLibrary .tile-icon{grid-column:1;grid-row:2;width:clamp(40px,3.7vw,55px);margin:0;align-self:center}
  body[data-view="hub"] #offlineLibrary .tile-copy,body[data-view="hub"] #onlineLibrary .tile-copy{grid-column:2;grid-row:2;min-width:0;align-self:center;gap:3px;padding:0}
  body[data-view="hub"] #offlineLibrary .tile-copy strong,body[data-view="hub"] #onlineLibrary .tile-copy strong{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;line-clamp:2;font-size:clamp(16px,1.242vw,21px);line-height:1.08;overflow-wrap:anywhere}
  body[data-view="hub"] #offlineLibrary .tile-copy small,body[data-view="hub"] #onlineLibrary .tile-copy small{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;line-clamp:3;margin:0;font-size:clamp(9.5px,.667vw,12px);line-height:1.35;white-space:normal;overflow-wrap:anywhere}
  body[data-view="hub"] #offlineLibrary .tile-enter,body[data-view="hub"] #onlineLibrary .tile-enter{display:none}
}
@media(max-width:820px){
  body[data-view="hub"] #offlineLibrary,body[data-view="hub"] #onlineLibrary{display:flex;flex-direction:column;align-items:stretch;width:100%;height:auto;min-height:0;margin-top:14px;gap:26px}
  body[data-view="hub"] #offlineLibrary .game-tile,body[data-view="hub"] #onlineLibrary .game-tile{flex:0 0 auto;width:100%;height:auto;min-height:200px;display:grid;grid-template-columns:68px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:14px;align-items:center;padding:18px}
  body[data-view="hub"] #offlineLibrary .tile-badge,body[data-view="hub"] #onlineLibrary .tile-badge{grid-column:1/-1;justify-self:start;margin:0}
  body[data-view="hub"] #offlineLibrary .tile-icon,body[data-view="hub"] #onlineLibrary .tile-icon{grid-column:1;grid-row:2;width:64px;margin:0}
  body[data-view="hub"] #offlineLibrary .tile-copy,body[data-view="hub"] #onlineLibrary .tile-copy{grid-column:2;grid-row:2;min-width:0;padding:0;align-self:center}
  body[data-view="hub"] #offlineLibrary .tile-copy strong,body[data-view="hub"] #onlineLibrary .tile-copy strong{font-size:23px;line-height:1.1;white-space:normal;overflow-wrap:anywhere}
  body[data-view="hub"] #offlineLibrary .tile-copy small,body[data-view="hub"] #onlineLibrary .tile-copy small{display:block;margin-top:5px;font-size:12px;line-height:1.45;white-space:normal;overflow-wrap:anywhere}
}
@media(max-width:430px){body[data-view="hub"] #offlineLibrary,body[data-view="hub"] #onlineLibrary{gap:24px}body[data-view="hub"] #offlineLibrary .game-tile,body[data-view="hub"] #onlineLibrary .game-tile{min-height:190px}}
@media(max-width:560px){.hub-mode-tab{padding:0 8px;gap:5px;font-size:12px}.hub-mode-tab small{display:none}}


/*
 * Keep the hub fluid instead of forcing it into a fixed 16:9 box.
 * The page grows and uses the document scrollbar whenever the viewport is
 * too short, so no game card can be clipped by an overflow:hidden ancestor.
 */
body[data-view="hub"] { overflow-x: hidden; }

@media (min-width: 821px) {
  body[data-view="hub"] .app-shell {
    width: min(97vw, 1800px);
    height: auto;
    min-height: 97vh;
    min-height: 97svh;
    aspect-ratio: auto;
    overflow: hidden;
  }

  body[data-view="hub"] .hub-screen,
  body.adsense-enabled[data-view="hub"] .hub-screen {
    --hub-card-height: clamp(148px, 18svh, 210px);
    height: auto;
    min-height: calc(97vh - 4px);
    min-height: calc(97svh - 4px);
    grid-template-rows: auto minmax(350px, 1fr) auto;
    overflow: visible;
  }

  body[data-view="hub"] .hub-hero,
  body.adsense-enabled[data-view="hub"] .hub-hero {
    min-height: 0;
    padding: clamp(14px, 2.4svh, 27px) 5% clamp(10px, 1.5svh, 17px);
  }

  body[data-view="hub"] .hub-game-area {
    min-height: 350px;
    padding: 0 5.2% clamp(12px, 1.5svh, 18px);
    grid-template-rows: auto auto minmax(290px, 1fr);
    gap: clamp(7px, 1.2svh, 13px);
  }

  body[data-view="hub"] #offlineLibrary,
  body[data-view="hub"] #onlineLibrary {
    height: auto;
    min-height: 290px;
    align-self: stretch;
    align-content: start;
    grid-auto-rows: var(--hub-card-height);
    gap: clamp(10px, 1.1vw, 20px);
  }

  body[data-view="hub"] #offlineLibrary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, var(--hub-card-height));
  }

  body[data-view="hub"] #onlineLibrary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: var(--hub-card-height);
  }

  body[data-view="hub"] #offlineLibrary .game-tile,
  body[data-view="hub"] #onlineLibrary .game-tile {
    height: var(--hub-card-height);
    min-height: var(--hub-card-height);
  }
}

/* Medium desktop windows get wider cards and simply scroll vertically. */
@media (min-width: 821px) and (max-width: 1100px) {
  body[data-view="hub"] #offlineLibrary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, var(--hub-card-height));
  }

  body[data-view="hub"] #onlineLibrary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, var(--hub-card-height));
  }
}

/* Compact-height monitors retain the grid while reducing only empty spacing. */
@media (min-width: 821px) and (max-height: 650px) {
  body[data-view="hub"] .hub-screen,
  body.adsense-enabled[data-view="hub"] .hub-screen {
    --hub-card-height: 132px;
  }

  body[data-view="hub"] .hub-hero,
  body.adsense-enabled[data-view="hub"] .hub-hero {
    padding-top: 9px;
    padding-bottom: 7px;
  }

  body[data-view="hub"] .hub-logo { width: 40px; font-size: 27px; }
  body[data-view="hub"] .hub-hero h1 { font-size: clamp(36px, 7svh, 46px); }
  body[data-view="hub"] .hub-sub { margin-top: 3px; font-size: 12px; }
  body[data-view="hub"] .hub-game-area { min-height: 330px; }

}


/*
 * v51 · fluid game viewport
 * Every playable screen now follows the live viewport height.  Internal grids
 * are allowed to shrink, while dense editors/lists keep a local scrollbar as
 * a last-resort fallback so their action buttons never sit outside the screen.
 */
:root { --game-vh: 100vh; }
@supports (height: 100dvh) { :root { --game-vh: 100dvh; } }

body[data-view="game"],
body[data-view="result"],
body[data-view="fish-game"],
body[data-view="luck-game"],
body[data-view="online-game"] {
  width: 100%;
  height: var(--game-vh);
  min-height: 0;
  overflow: hidden;
}

body[data-view="game"] .app-shell,
body[data-view="result"] .app-shell,
body[data-view="fish-game"] .app-shell,
body[data-view="luck-game"] .app-shell,
body[data-view="online-game"] .app-shell {
  container-type: size;
  width: min(100vw, 1920px);
  height: var(--game-vh);
  min-width: 0;
  min-height: 0;
  max-height: var(--game-vh);
  aspect-ratio: auto;
  margin: 0 auto;
  padding: 0;
  overflow: hidden !important;
  border-radius: 0;
}

.fish-game-screen,
.luck-game-screen,
.online-game-screen,
body[data-view="game"] #step4,
body[data-view="result"] .result-screen {
  width: 100%;
  height: 100%;
  min-height: 0;
}

/* Fishing: the title bar owns only its row; the ocean receives the remainder. */
.fish-game-screen {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.fish-game-titlebar {
  height: auto;
  min-height: clamp(46px, 10.5cqh, 64px);
  padding-block: clamp(4px, 1cqh, 9px);
}
.fishing-scene { height: auto; min-height: 0; }
.fish-odds-panel { max-height: calc(100% - 12px); }

/* Luck games: remove the 11% + 89% overflow caused by a minimum-height header. */
.luck-game-screen {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.luck-topbar {
  height: auto !important;
  min-height: clamp(46px, 10.5cqh, 64px);
  padding-block: clamp(4px, 1cqh, 9px);
}
.luck-stage {
  height: auto !important;
  min-height: 0;
  padding: clamp(7px, 2.1cqh, 22px) clamp(8px, 2.4vw, 42px);
  overflow: hidden;
}
.luck-main,
.luck-side,
.luck-game-content,
.roulette-shell,
.roulette-editor,
.roulette-editor-body,
.roulette-play,
.scratch-broadcast-shell,
.scratch-broadcast-shell .scratch-stage,
.scratch-pick-stage,
.scratch-pick-layout { min-height: 0; }
.luck-game-content {
  justify-content: safe center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.luck-game-screen[data-game="roulette"] .luck-game-content,
.luck-game-screen[data-game="scratch"] .luck-game-content { overflow-y: auto; }
.roulette-editor { overflow: hidden; }
.roulette-play { overflow-y: auto; overscroll-behavior: contain; }
.scratch-broadcast-shell .scratch-stage { height: 100%; }

/* The large game props use container height as well as width. */
.coin-arena { width: clamp(120px, 31cqh, 280px); height: clamp(120px, 31cqh, 280px); }
.card-table { height: clamp(150px, 31cqh, 300px); }
.playing-card { width: clamp(88px, 22cqh, 168px); }
.number-reactor { width: clamp(125px, 31cqh, 270px); }
.core-area { min-height: clamp(135px, 31cqh, 260px); }
.energy-core { width: clamp(115px, 27cqh, 220px); }
.luck-game-screen[data-game="roulette"] .roulette-wheel-box {
  width: min(36cqh, 29vw, 390px);
}
.scratch-nine-ticket { width: 100%; max-width: none; }
.scratch-choice-ticket { width: min(77cqh, 52vw, 560px); }

/* Online games: header + content are a true two-row layout. */
.online-game-screen {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.online-topbar {
  height: auto;
  min-height: clamp(48px, 10.5cqh, 64px);
  padding-block: clamp(4px, 1cqh, 8px);
}
.online-layout {
  height: auto;
  min-height: 0;
  overflow: hidden;
}
.online-lobby,
.online-match-lobby,
.online-arena,
.online-game-content,
.rps-arena,
.yut-arena,
.word-arena,
.word-playfield,
.word-history-panel { min-height: 0; }
.online-lobby,
.online-match-lobby { overflow-y: auto; overscroll-behavior: contain; }
.online-arena { overflow: hidden; }
.online-game-content { flex: 1 1 auto; height: auto; }
.rps-hand { width: clamp(82px, 24cqh, 190px); }
.yut-board { width: min(72cqh, 48vw, 560px); }

/* Ladder: undo old fixed 590/740px mobile heights and fit footer actions. */
body[data-view="game"] #step4 {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
}
body[data-view="game"] .game-titlebar {
  height: auto;
  min-height: clamp(44px, 10.5cqh, 64px);
  padding-block: clamp(4px, .9cqh, 8px);
}
body[data-view="game"] .playfield {
  height: auto !important;
  min-height: 0 !important;
  padding: clamp(3px, .7cqh, 7px);
  overflow: hidden !important;
}
body[data-view="game"] .ladder-paper {
  position: relative;
  inset: auto;
  left: auto;
  top: auto;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  transform: none;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden;
  padding: clamp(4px, .8cqh, 10px) clamp(5px, 1vw, 15px);
}
body[data-view="game"] .paper-topbar { min-height: clamp(32px, 7.5cqh, 48px); }
body[data-view="game"] .board-wrap {
  min-height: 0 !important;
  overflow-x: auto;
  overflow-y: hidden;
}
body[data-view="game"] .board-inner {
  height: 100% !important;
  min-height: 0;
  grid-template-rows: clamp(90px, 14cqh, 100px) minmax(0, 1fr) clamp(38px, 7.5cqh, 56px) !important;
}
body[data-view="game"] .top-labels { height: auto; min-height: 90px; overflow: visible; }
body[data-view="game"] .label-row { height: auto; min-height: 0; }
body[data-view="game"] .top-label-stack {
  top: 4px;
  transform: translateX(-50%);
}
body[data-view="game"] #ladderCanvas { min-height: 0 !important; }
body[data-view="game"] .paper-footer {
  min-height: clamp(50px, 10cqh, 72px);
  padding-block: clamp(4px, .8cqh, 8px);
  overflow: visible;
}

body[data-view="result"] .result-screen {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
body[data-view="result"] .result-board { min-height: 0; overflow: auto; }

/* Dense short windows: reduce decoration before ever hiding an action. */
@media (max-height: 680px) {
  .fish-game-titlebar,
  .luck-topbar,
  .online-topbar,
  body[data-view="game"] .game-titlebar { min-height: 46px; }

  .fish-page-title > span,
  .luck-title-icon,
  .online-title-icon,
  body[data-view="game"] .title-mascot { width: 34px; height: 34px; border-radius: 11px; font-size: 22px; }
  .fish-page-title small,
  .luck-title small,
  .online-title-wrap small { display: none; }
  .fish-page-title h2,
  .luck-title h2,
  .online-title-wrap h2,
  body[data-view="game"] .game-title-group h2 { font-size: 20px; }

  .fish-title-actions .title-btn,
  .luck-back-btn,
  .online-leave-btn,
  body[data-view="game"] .title-btn { min-height: 34px; padding: 5px 9px; font-size: 12px; }
  .fish-control-deck { bottom: 1.4%; gap: 4px; }
  .fish-toast { min-width: 240px; padding: 5px 11px; font-size: 12px; }
  .fishing-start-btn { min-width: 190px; height: 50px; padding-inline: 16px; border-radius: 15px; }
  .fishing-start-btn strong { font-size: 18px; }
  .fishing-start-icon { font-size: 24px; }
  .fish-result-card { bottom: 1.4%; padding: 8px 11px; }
  .fish-result-card strong { font-size: 20px; }
  .fish-result-card > span { font-size: 11px; }
  .fish-history { bottom: 1.4%; }

  .luck-stage { gap: 1.4%; padding-block: 6px; }
  .luck-game-content { padding-block: 8px; }
  .luck-game-content > .luck-prompt { font-size: clamp(25px, 5cqh, 38px); }
  .luck-game-content > .luck-subprompt { font-size: clamp(12px, 2.4cqh, 16px); }
  .luck-game-content > .choice-row { margin-top: 2%; }
  .luck-game-content > .choice-row .luck-choice {
    min-width: 150px;
    min-height: 46px;
    padding: 9px 17px;
    font-size: 18px;
  }
  .luck-game-content > .luck-action,
  .enhance-actions .luck-action {
    min-width: 180px;
    min-height: 48px;
    padding: 10px 18px;
    font-size: 18px;
  }
  .enhance-actions { margin-top: 10px; }
  .enhance-ladder { margin-top: 9px; }
  .luck-game-screen .result-banner { padding: 10px 16px; font-size: 17px; }
  .roulette-spin { margin-top: 6px; padding-block: 8px; }
  .roulette-result-dock { min-height: 58px; margin-top: 7px; padding-block: 6px; }
  .scratch-settings-open,
  .roulette-settings-open { top: 7px; right: 9px; padding: 7px 10px; font-size: 12px; }

  .online-layout { padding: 6px 10px; }
  .online-player-strip { height: 46px; flex-basis: 46px; }
  .rps-arena { padding: 8px 4%; }
  .rps-score strong { font-size: 30px; }
  .rps-choice { padding-block: 7px; }
  .rps-choice span { font-size: 29px; }
  .yut-sticks { height: 82px; margin-block: 2px; }
  .yut-stick { height: 66px; width: 18px; }
  .yut-result-name { min-height: 36px; }
  .yut-result-name strong { font-size: 29px; }
  .yut-throw-btn { min-height: 45px; }
  .yut-move-queue { min-height: 30px; margin-top: 4px; }
  .word-arena { padding: 8px 12px; gap: 7px; }
  .word-rule-banner { min-height: 38px; padding-block: 5px; }
  .word-controls { gap: 7px; }
  .word-input { height: 44px; }

  body[data-view="game"] .game-status,
  body[data-view="game"] #loadSettingsInGameBtn { display: none; }
  body[data-view="game"] .paper-footer { min-height: 48px; gap: 4px; }
  body[data-view="game"] .result-toast { font-size: 12px; }
  body[data-view="game"] .paper-btn { min-height: 30px; padding: 5px 7px; font-size: 11px; }
}

/* Narrow screens keep natural vertical flow inside the available viewport. */
@media (max-width: 900px) {
  body[data-view="fish-game"] .app-shell,
  body[data-view="luck-game"] .app-shell,
  body[data-view="online-game"] .app-shell { width: 100vw; }

  .luck-stage { grid-template-columns: minmax(0, 1fr); }
  .luck-side { display: none; }
  .luck-game-content { overflow-y: auto !important; }
  .luck-game-screen[data-game="roulette"] .roulette-shell,
  .scratch-pick-layout { height: auto; }

  .online-lobby { align-content: start; }
  body[data-view="online-game"] .online-game-content { overflow-y: auto; overscroll-behavior: contain; }
  .yut-arena,
  .word-arena { overflow-y: auto; }
  .yut-board { width: min(44cqh, 91vw, 430px); }
}

@media (max-width: 700px) {
  body[data-view="game"] .app-shell { overflow: hidden !important; }
  body[data-view="game"] #step4 { min-height: 0; padding-bottom: 0; }
  body[data-view="game"] .paper-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  body[data-view="game"] .result-toast {
    min-height: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-view="game"] .paper-actions { display: flex; width: auto; gap: 3px; }
  body[data-view="game"] .paper-btn { width: auto; }
}

@media (max-width: 520px) {
  .fish-title-actions { gap: 3px; }
  .fish-title-actions .title-btn { padding-inline: 6px; }
  #resetFishGameBtn { display: inline-flex; }
  .fish-page-title { gap: 6px; }
  .fish-result-card { width: min(44%, 190px); max-width: 44%; }
  .fish-history { max-width: 38%; }

  .luck-title { gap: 7px; }
  .luck-stage { padding: 5px; }
  .luck-game-content { padding-inline: 8px; }
  .luck-game-content > .choice-row { gap: 7px; }
  .luck-game-content > .choice-row .luck-choice { min-width: 125px; }

  .online-topbar { padding-inline: 9px; }
  .online-title-wrap { gap: 7px; }
  .online-title-wrap h2 { font-size: 18px; }
  .online-leave-btn { padding-inline: 8px; }

  body[data-view="game"] .game-title-group { gap: 5px; }
  body[data-view="game"] .game-title-group h2 { font-size: 18px; }
  body[data-view="game"] .title-actions { gap: 2px; }
  body[data-view="game"] .title-btn { padding-inline: 5px; }
  body[data-view="game"] .sound-toggle { min-width: 34px; width: 34px; }
  body[data-view="game"] .paper-topbar { gap: 4px; }
  body[data-view="game"] .ladder-toggle-btn { min-height: 30px; padding: 5px 7px; font-size: 12px; }
}

.modal-card,
.scratch-settings-dialog,
.roulette-settings-dialog {
  max-height: calc(var(--game-vh) - 20px);
  overscroll-behavior: contain;
}

/* v52 · mobile single-screen fit */
.roulette-settings-open,
.roulette-settings-close { display: none; }

@media (max-width: 1024px) {
  body.mobile-game-fit,
  body.mobile-game-fit .app-shell { overflow: hidden !important; }

  body.mobile-game-fit .fish-game-screen,
  body.mobile-game-fit .luck-game-screen,
  body.mobile-game-fit .online-game-screen,
  body.mobile-game-fit #step4 { height: 100%; min-height: 0; overflow: hidden !important; }

  body.mobile-game-fit .fish-game-titlebar,
  body.mobile-game-fit .luck-topbar,
  body.mobile-game-fit .online-topbar,
  body.mobile-game-fit .game-titlebar {
    min-height: 50px;
    max-height: 50px;
    padding-block: 4px;
  }

  /* Offline luck games */
  body.mobile-game-fit .luck-stage {
    height: auto !important;
    min-height: 0 !important;
    padding: 6px;
    overflow: hidden !important;
  }
  body.mobile-game-fit .luck-main,
  body.mobile-game-fit .luck-game-content { height: 100%; min-height: 0; overflow: hidden !important; }
  body.mobile-game-fit .luck-game-content { padding: 8px 10px; justify-content: center; }
  body.mobile-game-fit .luck-game-content > .luck-kicker { margin-bottom: 3px; font-size: 12px; }
  body.mobile-game-fit .luck-game-content > .luck-prompt { font-size: clamp(25px, 4.8cqh, 36px); }
  body.mobile-game-fit .luck-game-content > .luck-subprompt { margin-top: 3px; font-size: 13px; }
  body.mobile-game-fit .coin-arena { width: min(29cqh, 56vw, 225px); height: min(29cqh, 56vw, 225px); margin-block: 5px 2px; }
  body.mobile-game-fit .card-table { height: min(30cqh, 250px); margin-top: 4px; }
  body.mobile-game-fit .playing-card { width: min(20cqh, 120px); }
  body.mobile-game-fit .number-reactor { width: min(29cqh, 220px); margin-block: 5px 2px; }
  body.mobile-game-fit .choice-row { margin-top: 8px; }
  body.mobile-game-fit .luck-game-content > .choice-row .luck-choice {
    min-width: 126px;
    min-height: 46px;
    padding: 9px 14px;
    font-size: 17px;
  }
  body.mobile-game-fit .luck-game-content > .luck-action,
  body.mobile-game-fit .enhance-actions .luck-action {
    min-width: 170px;
    min-height: 46px;
    margin-top: 7px;
    padding: 9px 15px !important;
    font-size: 17px !important;
  }
  body.mobile-game-fit .enhance-wrap { width: min(96%, 560px); gap: 2px; margin-top: 4px; }
  body.mobile-game-fit .core-area { min-height: 130px; }
  body.mobile-game-fit .energy-core { width: min(20cqh, 145px); }
  body.mobile-game-fit .enhance-multiplier { font-size: 32px; }
  body.mobile-game-fit .enhance-actions { margin-top: 7px; }
  body.mobile-game-fit .enhance-ladder { margin-top: 7px; justify-content: center; }
  body.mobile-game-fit .luck-game-screen .result-banner { bottom: 2%; max-width: 86%; padding: 8px 12px; font-size: 15px; }

  /* Roulette: gameplay fills the screen; settings open as an overlay. */
  body.mobile-game-fit .luck-game-screen[data-game="roulette"] .luck-game-content { padding: 5px; }
  body.mobile-game-fit .luck-game-screen[data-game="roulette"] .roulette-shell {
    position: relative;
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
  }
  body.mobile-game-fit .roulette-settings-open {
    display: block;
    position: absolute;
    top: 7px;
    right: 8px;
    z-index: 45;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    background: rgba(13,20,43,.88);
    color: #fff;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 5px 16px rgba(0,0,0,.25);
    backdrop-filter: blur(8px);
  }
  body.mobile-game-fit .roulette-settings-close {
    display: grid;
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 2;
    width: 33px;
    height: 33px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50%;
    background: rgba(9,15,34,.72);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  body.mobile-game-fit .luck-game-screen[data-game="roulette"] .roulette-editor {
    display: none !important;
    position: absolute;
    inset: 4px;
    z-index: 80;
    min-height: 0 !important;
    padding: 48px 10px 10px;
    overflow: hidden;
    border-radius: 17px;
  }
  body.mobile-game-fit .luck-game-screen[data-game="roulette"] .roulette-shell.mobile-settings-open .roulette-editor {
    display: flex !important;
  }
  body.mobile-game-fit .luck-game-screen[data-game="roulette"] .roulette-editor-body,
  body.mobile-game-fit .luck-game-screen[data-game="roulette"] .roulette-item-list { min-height: 0; }
  body.mobile-game-fit .luck-game-screen[data-game="roulette"] .roulette-item-list { overflow-y: auto !important; }
  body.mobile-game-fit .luck-game-screen[data-game="roulette"] .roulette-play {
    width: 100%;
    height: 100%;
    min-height: 0 !important;
    padding: 7px 5px 5px;
    overflow: hidden !important;
    border-radius: 18px;
  }
  body.mobile-game-fit .luck-game-screen[data-game="roulette"] .roulette-play-head { min-height: 20px; padding-right: 92px; font-size: 10px; }
  body.mobile-game-fit .luck-game-screen[data-game="roulette"] .roulette-wheel-box {
    width: min(36cqh, 72vw, 290px);
    flex: 0 0 auto;
  }
  body.mobile-game-fit .luck-game-screen[data-game="roulette"] .roulette-spin {
    min-width: 170px;
    min-height: 43px;
    margin-top: 7px;
    padding: 8px 18px;
    font-size: 16px;
  }
  body.mobile-game-fit .luck-game-screen[data-game="roulette"] .roulette-result-dock {
    min-height: 61px;
    margin-top: 7px;
    padding: 6px 8px;
  }
  body.mobile-game-fit .roulette-mini-stats { margin-top: 5px; }
  body.mobile-game-fit .roulette-mini-stat { padding: 5px 4px; }

  /* Scratch card: compact summary above a full 3x3 ticket. */
  body.mobile-game-fit .luck-game-screen[data-game="scratch"] .luck-game-content,
  body.mobile-game-fit .scratch-pick-stage { height: 100% !important; min-height: 0 !important; overflow: hidden !important; }
  body.mobile-game-fit .scratch-pick-layout {
    height: 100% !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 5px;
    padding: 0;
    align-items: center;
  }
  body.mobile-game-fit .scratch-pick-copy { gap: 3px; }
  body.mobile-game-fit .scratch-pick-copy .scratch-nine-kicker,
  body.mobile-game-fit .scratch-pick-copy .scratch-nine-subtitle,
  body.mobile-game-fit .scratch-pick-copy .scratch-nine-stats { display: none; }
  body.mobile-game-fit .scratch-pick-copy .scratch-nine-title { margin: 0; font-size: 22px; line-height: 1.05; }
  body.mobile-game-fit .scratch-pick-copy .scratch-nine-title br { display: none; }
  body.mobile-game-fit .scratch-outcome-key {
    width: min(100%, 430px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin-top: 2px;
  }
  body.mobile-game-fit .scratch-outcome-key span { min-height: 28px; padding: 3px; font-size: 11px; }
  body.mobile-game-fit .scratch-match-meter span b { min-width: 21px; height: 21px; font-size: 15px; }
  body.mobile-game-fit .scratch-match-meter span i { font-size: 10px; }
  body.mobile-game-fit .scratch-pick-copy .scratch-nine-progress { margin-top: 2px; font-size: 11px; }
  body.mobile-game-fit .scratch-pick-copy .scratch-nine-progress strong { min-width: 58px; padding: 3px 8px; font-size: 14px; }
  body.mobile-game-fit .scratch-pick-copy .scratch-ticket-status { min-height: 28px; margin-top: 1px; padding: 3px 7px; font-size: 12px; }
  
  body.mobile-game-fit .scratch-top-shuffle { min-width: 104px; min-height: 34px; padding: 6px 11px; font-size: 12px; }
  body.mobile-game-fit .scratch-choice-ticket {
    width: min(53cqh, 91vw, 400px) !important;
    max-height: 100%;
    padding: 8px !important;
    align-self: center;
  }
  body.mobile-game-fit .scratch-choice-ticket .scratch-nine-head { margin-bottom: 5px; }
  body.mobile-game-fit .scratch-choice-ticket .scratch-nine-grid { gap: 5px; padding: 6px; }
  body.mobile-game-fit .scratch-choice-cell .scratch-pick-number { width: 25px; height: 25px; font-size: 14px; }
  body.mobile-game-fit .scratch-choice-cell .scratch-pick-symbol b { font-size: clamp(30px, 11vw, 48px); }
  body.mobile-game-fit .scratch-choice-cell .scratch-pick-symbol em { font-size: 11px; }

  /* Online lobby and games */
  body.mobile-game-fit .online-layout { height: auto; min-height: 0; padding: 6px; overflow: hidden; }
  body.mobile-game-fit .online-lobby { height: 100%; padding: 5px; overflow: hidden; align-content: center; }
  body.mobile-game-fit .online-lobby-copy { display: none; }
  body.mobile-game-fit .online-lobby-panel { padding: 12px; border-radius: 18px; }
  body.mobile-game-fit .online-room-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
  body.mobile-game-fit .online-room-card { min-height: 118px; padding: 11px; }
  body.mobile-game-fit .online-room-card strong { margin-top: 7px; font-size: 16px; }
  body.mobile-game-fit .online-room-card small { font-size: 10px; }
  body.mobile-game-fit .online-ai-practice { min-height: 64px; margin-top: 8px; padding: 8px 11px; }
  body.mobile-game-fit .online-match-lobby { overflow: hidden; }
  body.mobile-game-fit .online-arena,
  body.mobile-game-fit .online-game-content,
  body.mobile-game-fit .rps-arena,
  body.mobile-game-fit .yut-arena,
  body.mobile-game-fit .word-arena { height: 100%; min-height: 0; overflow: hidden !important; }
  body.mobile-game-fit .online-player-strip { height: 45px; flex: 0 0 45px; }
  body.mobile-game-fit .rps-arena { padding: 7px; }
  body.mobile-game-fit .rps-hand { width: min(19cqh, 115px); }
  body.mobile-game-fit .rps-stage { grid-template-columns: 1fr 65px 1fr; }
  body.mobile-game-fit .rps-choices { gap: 5px; }
  body.mobile-game-fit .rps-choice { min-width: 76px; padding: 6px 5px; }
  body.mobile-game-fit .rps-choice span { font-size: 27px; }
  body.mobile-game-fit .yut-arena {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(250px, 40cqh) minmax(0, 1fr);
    gap: 5px;
    padding: 5px;
  }
  body.mobile-game-fit .yut-board { width: min(38cqh, 82vw, 320px); }
  body.mobile-game-fit .yut-board-wrap { min-height: 0; }
  body.mobile-game-fit .yut-side-panel { min-height: 0; padding: 5px; overflow: hidden; }
  body.mobile-game-fit .yut-sticks { height: 63px; }
  body.mobile-game-fit .yut-stick { width: 14px; height: 52px; }
  body.mobile-game-fit .yut-result-name strong { font-size: 23px; }
  body.mobile-game-fit .yut-power-gauge { height: 18px; }
  body.mobile-game-fit .yut-throw-btn { min-height: 39px; padding: 5px; }
  body.mobile-game-fit .yut-move-queue { min-height: 28px; margin-top: 2px; }
  body.mobile-game-fit .yut-move-chip { padding: 4px 6px; font-size: 10px; }
  body.mobile-game-fit .yut-benches { margin-top: 2px; }
  body.mobile-game-fit .yut-bench { padding: 4px; }
  body.mobile-game-fit .word-arena { padding: 6px; gap: 5px; }
  body.mobile-game-fit .word-rule-banner,
  body.mobile-game-fit .word-match-banner { min-height: 48px; padding: 5px 8px; }
  body.mobile-game-fit .word-playfield { grid-template-rows: auto minmax(135px, 1fr); gap: 5px; }
  body.mobile-game-fit .word-required-card { padding: 7px 10px; }
  body.mobile-game-fit .word-required-letter { width: 62px; margin-right: 9px; font-size: 42px; }
  body.mobile-game-fit .word-required-card p { font-size: 13px; }
  body.mobile-game-fit .word-history-panel { padding: 7px; }
  body.mobile-game-fit .word-history-list { padding: 5px 2px; }
  body.mobile-game-fit .word-chip { min-height: 32px; padding: 4px 7px; font-size: 14px; }
  body.mobile-game-fit .word-controls { gap: 5px; }
  body.mobile-game-fit .word-input { height: 42px; font-size: 18px; }
  body.mobile-game-fit .word-submit-btn,
  body.mobile-game-fit .word-giveup-btn { min-height: 36px; font-size: 14px; }

  /* Ladder */
  body.mobile-game-fit #step4 { grid-template-rows: 50px minmax(0, 1fr); }
  body.mobile-game-fit #loadSettingsInGameBtn { display: none; }
  body.mobile-game-fit .playfield { min-height: 0 !important; height: auto !important; padding: 4px; }
  body.mobile-game-fit .ladder-paper { height: 100%; min-height: 0 !important; }
  body.mobile-game-fit .board-wrap { min-height: 0 !important; }
  body.mobile-game-fit .board-inner {
    height: 100% !important;
    grid-template-rows: clamp(90px, 12cqh, 96px) minmax(0, 1fr) clamp(36px, 6cqh, 44px) !important;
  }
  body.mobile-game-fit .paper-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 76px;
    gap: 3px;
  }
  body.mobile-game-fit .result-toast { min-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.mobile-game-fit .paper-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 3px;
  }
  body.mobile-game-fit .paper-btn { width: 100%; min-height: 27px; padding: 3px 4px; font-size: 10px; }
}

@media (max-width: 1024px) and (orientation: landscape) {
  body.mobile-game-fit.mobile-game-landscape .luck-game-content { padding: 5px 8px; }
  body.mobile-game-fit.mobile-game-landscape .coin-arena,
  body.mobile-game-fit.mobile-game-landscape .number-reactor { width: min(32cqh, 215px); height: min(32cqh, 215px); }
  body.mobile-game-fit.mobile-game-landscape .card-table { height: min(37cqh, 245px); }
  body.mobile-game-fit.mobile-game-landscape .enhance-wrap { grid-template-columns: .8fr 1.2fr; }
  body.mobile-game-fit.mobile-game-landscape .scratch-pick-layout {
    grid-template-columns: minmax(190px, .7fr) minmax(310px, 1.3fr) !important;
    grid-template-rows: minmax(0, 1fr);
  }
  body.mobile-game-fit.mobile-game-landscape .scratch-choice-ticket { width: min(65cqh, 43vw, 420px) !important; }
  body.mobile-game-fit.mobile-game-landscape .yut-arena {
    grid-template-columns: minmax(320px, 1fr) minmax(270px, .8fr);
    grid-template-rows: minmax(0, 1fr);
  }
  body.mobile-game-fit.mobile-game-landscape .yut-board { width: min(66cqh, 44vw, 460px); }
  body.mobile-game-fit.mobile-game-landscape .word-playfield {
    grid-template-columns: minmax(180px, .65fr) minmax(300px, 1.35fr);
    grid-template-rows: minmax(0, 1fr);
  }
}

/* v53 · mobile overlay safety + no-scroll online controls */
@media (max-width: 1024px) {
  /* Standalone dialogs always stay inside the real phone viewport. */
  .modal {
    z-index: 10000;
    padding:
      max(8px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    overflow: hidden;
  }
  .modal-card,
  .modal-card.wide-modal {
    box-sizing: border-box;
    width: 100%;
    max-width: 720px;
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    padding: 14px;
    border-radius: 18px;
    overflow: auto;
    overscroll-behavior: contain;
  }
  .modal-head { gap: 8px; }
  .modal-head h2 { font-size: 21px; }
  .modal-note { margin-top: 8px; padding: 8px 10px; font-size: 11px; line-height: 1.4; }
  .modal-card .field-block { gap: 5px; margin-top: 10px; }
  .modal-card .field-block > span { font-size: 13px; }
  .modal-card .modal-actions { margin-top: 10px; }
  .modal-card .saved-list { margin-top: 8px; }
  .modal-card .saved-item { gap: 8px; padding: 8px; border-radius: 12px; }

  /* In-game overlay surfaces are bounded independently from game content. */
  body.mobile-game-fit .scratch-settings-modal,
  body.mobile-game-fit .roulette-settings-modal,
  body.mobile-game-fit .online-start-intro,
  body.mobile-game-fit .rps-match-over,
  body.mobile-game-fit .yut-win-overlay,
  body.mobile-game-fit .word-round-overlay,
  body.mobile-game-fit .word-win-overlay {
    box-sizing: border-box;
    inset: 0 !important;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 7px;
    overflow: hidden;
  }
  body.mobile-game-fit .scratch-settings-dialog,
  body.mobile-game-fit .roulette-settings-dialog,
  body.mobile-game-fit .online-start-card,
  body.mobile-game-fit .rps-match-card,
  body.mobile-game-fit .word-round-card {
    box-sizing: border-box;
    width: min(100%, 620px);
    max-height: calc(100% - 2px);
    padding: 13px;
    border-radius: 17px;
    overflow: auto;
    overscroll-behavior: contain;
  }
  body.mobile-game-fit .scratch-settings-dialog .scratch-prob-list { max-height: 39cqh; }
  body.mobile-game-fit .scratch-settings-dialog .scratch-settings-head strong { font-size: 21px; }
  body.mobile-game-fit .scratch-settings-dialog .scratch-setting-help { margin-block: 5px; font-size: 12px; }
  body.mobile-game-fit .fish-odds-panel {
    left: 6px;
    right: 6px;
    top: 6px;
    bottom: 6px;
    width: auto;
    max-height: none;
    padding: 11px;
    transform: translateY(110%);
  }
  body.mobile-game-fit .fish-odds-panel.open { transform: translateY(0); }

  /* Online: one fixed viewport, with every timed control visible at once. */
  body.mobile-game-fit[data-view="online-game"] .online-game-screen {
    grid-template-rows: 44px minmax(0, 1fr) !important;
  }
  body.mobile-game-fit[data-view="online-game"] .online-topbar {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 3px max(7px, env(safe-area-inset-right)) 3px max(7px, env(safe-area-inset-left));
  }
  body.mobile-game-fit[data-view="online-game"] .online-title-wrap { gap: 6px; min-width: 0; }
  body.mobile-game-fit[data-view="online-game"] .online-title-icon { width: 31px; height: 31px; border-radius: 9px; font-size: 12px; }
  body.mobile-game-fit[data-view="online-game"] .online-title-wrap small,
  body.mobile-game-fit[data-view="online-game"] .online-net-pill { display: none; }
  body.mobile-game-fit[data-view="online-game"] .online-title-wrap h2 { margin: 0; font-size: 17px; white-space: nowrap; }
  body.mobile-game-fit[data-view="online-game"] .online-leave-btn { height: 31px; padding-inline: 8px; border-radius: 9px; font-size: 11px; }
  body.mobile-game-fit[data-view="online-game"] .online-layout {
    height: auto !important;
    min-height: 0 !important;
    padding: 3px;
    overflow: hidden !important;
  }
  body.mobile-game-fit[data-view="online-game"] .online-lobby,
  body.mobile-game-fit[data-view="online-game"] .online-match-lobby,
  body.mobile-game-fit[data-view="online-game"] .online-arena,
  body.mobile-game-fit[data-view="online-game"] .online-game-content {
    height: 100%;
    min-height: 0;
    overflow: hidden !important;
  }

  /* Room entry and ready screen */
  body.mobile-game-fit .online-lobby { padding: 3px; align-content: center; }
  body.mobile-game-fit .online-lobby-panel { padding: 9px; border-radius: 15px; }
  body.mobile-game-fit .online-field-label { margin-bottom: 4px; font-size: 10px; }
  body.mobile-game-fit .online-input.nickname { height: 38px; padding-inline: 10px; font-size: 15px; }
  body.mobile-game-fit .online-room-grid { gap: 5px; margin-top: 6px; }
  body.mobile-game-fit .online-room-card { min-height: 92px; padding: 8px; border-radius: 13px; }
  body.mobile-game-fit .room-card-icon { width: 27px; height: 27px; border-radius: 8px; font-size: 18px; }
  body.mobile-game-fit .online-room-card strong { margin: 5px 0 1px; font-size: 14px; }
  body.mobile-game-fit .online-room-card small { font-size: 9px; line-height: 1.25; }
  body.mobile-game-fit .room-code-entry { margin-top: 5px; }
  body.mobile-game-fit .online-input.code { height: 29px; font-size: 11px; }
  body.mobile-game-fit .room-code-entry button { height: 29px; font-size: 10px; }
  body.mobile-game-fit .online-ai-practice { min-height: 48px; margin-top: 6px; padding: 6px 9px; }
  body.mobile-game-fit .online-room-box { margin-top: 6px; padding: 7px 9px; }
  body.mobile-game-fit .room-code-display strong { font-size: 24px; }
  body.mobile-game-fit .online-lobby-error { margin-top: 5px; padding: 6px 8px; font-size: 10px; }
  body.mobile-game-fit .online-match-lobby { gap: 7px; align-content: center; }
  body.mobile-game-fit .match-lobby-head b { font-size: 17px; }
  body.mobile-game-fit .match-lobby-head small { margin-top: 2px; font-size: 10px; }
  body.mobile-game-fit .versus-ready-grid { width: 100%; grid-template-columns: 1fr 42px 1fr; gap: 5px; }
  body.mobile-game-fit .ready-player-card { padding: 13px 5px 8px; border-radius: 15px; }
  body.mobile-game-fit .ready-avatar { width: 43px; height: 43px; border-radius: 13px; font-size: 15px; }
  body.mobile-game-fit .ready-player-card strong { margin-top: 5px; font-size: 14px; }
  body.mobile-game-fit .ready-player-card em { margin-top: 1px; font-size: 9px; }
  body.mobile-game-fit .online-ready-btn { min-width: 160px; padding: 9px 18px; border-radius: 12px; font-size: 15px; box-shadow: 0 5px 0 #1b6e73; }
  body.mobile-game-fit .online-ready-hint { font-size: 10px; }

  /* Shared arena header */
  body.mobile-game-fit .online-arena { gap: 3px; }
  body.mobile-game-fit .online-player-strip { height: 38px; flex: 0 0 38px; border-radius: 11px; }
  body.mobile-game-fit .strip-player { padding-inline: 5px; grid-template-columns: 27px 1fr; column-gap: 4px; }
  body.mobile-game-fit .strip-player.guest { grid-template-columns: 1fr 27px; }
  body.mobile-game-fit .strip-player > span { width: 25px; height: 25px; border-radius: 8px; font-size: 9px; }
  body.mobile-game-fit .strip-player strong { font-size: 11px; }
  body.mobile-game-fit .strip-player small { font-size: 7px; }
  body.mobile-game-fit .strip-room { padding-inline: 3px; }
  body.mobile-game-fit .online-idle-clock { min-width: 72px; height: 24px; padding-inline: 5px; }
  body.mobile-game-fit .online-idle-clock > span { font-size: 12px; }
  body.mobile-game-fit .online-idle-clock > strong { font-size: 16px; }
  body.mobile-game-fit .online-idle-clock > small { font-size: 8px; }
  body.mobile-game-fit .online-game-content { border-radius: 13px; }

  /* Rock-paper-scissors */
  body.mobile-game-fit .rps-arena {
    grid-template-rows: 34px minmax(0, 1fr) 61px;
    gap: 2px;
    padding: 4px;
  }
  body.mobile-game-fit .rps-scoreboard { gap: 6px; }
  body.mobile-game-fit .rps-score { width: 62px; }
  body.mobile-game-fit .rps-score strong { font-size: 25px; }
  body.mobile-game-fit .rps-round { padding: 4px 8px; font-size: 8px; }
  body.mobile-game-fit .rps-stage { grid-template-columns: 1fr 47px 1fr; }
  body.mobile-game-fit .rps-hand-label { font-size: 8px; }
  body.mobile-game-fit .rps-hand { width: min(21cqh, 110px); margin-top: 3px; font-size: min(12cqh, 68px); }
  body.mobile-game-fit .rps-center b { font-size: 22px; }
  body.mobile-game-fit .rps-center span { display: none; }
  body.mobile-game-fit .rps-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  body.mobile-game-fit .rps-choice { width: 100%; min-width: 0; height: 59px; padding: 4px; border-radius: 11px; }
  body.mobile-game-fit .rps-choice span { font-size: 24px; }
  body.mobile-game-fit .rps-choice strong { margin-top: 1px; font-size: 10px; }

  /* Yutnori: board, throw button and move controls share one viewport. */
  body.mobile-game-fit .yut-arena {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: minmax(260px, 42%) minmax(0, 58%) !important;
    gap: 3px;
    padding: 3px;
  }
  body.mobile-game-fit .yut-board-wrap { min-height: 0; overflow: hidden; }
  body.mobile-game-fit .yut-board { width: min(34cqh, 78vw, 300px); border-width: 4px; border-radius: 23px; }
  body.mobile-game-fit .yut-side-panel {
    position: relative;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: 29px 54px 18px 36px 30px minmax(40px, 1fr);
    gap: 3px;
    padding: 3px;
    overflow: hidden !important;
  }
  body.mobile-game-fit .yut-side-panel > .turn-banner { grid-column: 1 / 3; grid-row: 1; min-height: 29px; margin: 0; padding: 4px; font-size: 10px; }
  body.mobile-game-fit .yut-sticks { grid-column: 1; grid-row: 2; height: 52px; margin: 0; gap: 4px; }
  body.mobile-game-fit .yut-stick { width: 12px; height: 45px; }
  body.mobile-game-fit .yut-result-name { grid-column: 2; grid-row: 2; min-height: 0; align-self: center; }
  body.mobile-game-fit .yut-result-name strong { font-size: 20px; }
  body.mobile-game-fit .yut-result-name small { font-size: 8px; line-height: 1.15; }
  body.mobile-game-fit .yut-power-gauge { grid-column: 1 / 3; grid-row: 3; height: 18px; margin: 0 auto; }
  body.mobile-game-fit .yut-throw-btn { grid-column: 1 / 3; grid-row: 4; min-height: 34px; margin: 0 auto; padding: 3px 8px; font-size: 12px; box-shadow: 0 4px 0 #77371e; }
  body.mobile-game-fit .yut-throw-btn small { margin-top: 1px; font-size: 7px; }
  body.mobile-game-fit .yut-move-queue { grid-column: 1 / 3; grid-row: 5; min-height: 28px; max-height: 30px; margin: 0 auto; gap: 3px; overflow: hidden; }
  body.mobile-game-fit .yut-move-chip { min-width: 37px; padding: 3px 5px; border-radius: 8px; font-size: 9px; }
  body.mobile-game-fit .yut-move-chip b { font-size: 11px; }
  body.mobile-game-fit .yut-benches { grid-column: 1 / 3; grid-row: 6; min-height: 0; margin: 0; gap: 3px; }
  body.mobile-game-fit .yut-bench { min-height: 0; padding: 3px 5px; border-radius: 8px; overflow: hidden; }
  body.mobile-game-fit .yut-bench-head { margin-bottom: 2px; }
  body.mobile-game-fit .yut-bench-head strong,
  body.mobile-game-fit .yut-bench-head span { font-size: 8px; }
  body.mobile-game-fit .yut-bench .yut-piece { width: 19px; height: 19px; }
  body.mobile-game-fit .yut-route-choice {
    position: absolute;
    z-index: 30;
    left: 4px;
    right: 4px;
    bottom: 4px;
    width: auto;
    max-height: calc(100% - 8px);
    margin: 0;
    overflow: auto;
  }
  body.mobile-game-fit .yut-help { display: none; }

  /* Kungkungtta / word chain: timer and all three controls stay visible. */
  body.mobile-game-fit .word-arena {
    grid-template-rows: 43px minmax(0, 1fr) 41px;
    gap: 3px;
    padding: 3px;
  }
  body.mobile-game-fit .word-match-banner { min-height: 43px; padding: 3px 5px; border-radius: 10px; }
  body.mobile-game-fit .word-match-title { gap: 4px; }
  body.mobile-game-fit .word-match-title small,
  body.mobile-game-fit .word-rule-copy { display: none; }
  body.mobile-game-fit .word-match-title b { font-size: 17px; }
  body.mobile-game-fit .word-round-rail { gap: 3px; }
  body.mobile-game-fit .word-round-step { min-width: 35px; height: 31px; padding: 3px 4px; border-radius: 8px; }
  body.mobile-game-fit .word-round-step i { font-size: 7px; }
  body.mobile-game-fit .word-round-step strong { font-size: 16px; }
  body.mobile-game-fit .word-playfield {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 82px minmax(0, 1fr) !important;
    gap: 3px;
  }
  body.mobile-game-fit .word-required-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    padding: 4px 7px;
    border-radius: 12px;
  }
  body.mobile-game-fit .word-required-head { grid-column: 2; grid-row: 1; }
  body.mobile-game-fit .word-required-head > small { font-size: 8px; }
  body.mobile-game-fit .word-required-letter { grid-column: 1; grid-row: 1 / 3; width: 50px; margin: 0 6px 0 0; border-radius: 15px; font-size: 34px; box-shadow: 0 4px 0 #17566a; }
  body.mobile-game-fit .word-head-rule { display: none; }
  body.mobile-game-fit .word-required-card p { grid-column: 2; margin: 1px 0 0; font-size: 10px; line-height: 1.15; }
  body.mobile-game-fit .word-clock { min-width: 55px; height: 27px; padding-inline: 5px; }
  body.mobile-game-fit .word-clock span { font-size: 11px; }
  body.mobile-game-fit .word-clock strong { font-size: 17px; }
  body.mobile-game-fit .word-history-panel { padding: 5px; border-radius: 12px; }
  body.mobile-game-fit .word-history-head { padding-bottom: 3px; }
  body.mobile-game-fit .word-history-head strong { font-size: 12px; }
  body.mobile-game-fit .word-history-head span { font-size: 9px; }
  body.mobile-game-fit .word-history-list { padding: 4px 1px; gap: 3px; }
  body.mobile-game-fit .word-chip { min-height: 27px; padding: 3px 5px; border-radius: 8px; font-size: 11px; }
  body.mobile-game-fit .word-last-event { min-height: 29px; padding: 3px 5px; border-radius: 8px; font-size: 9px; }
  body.mobile-game-fit .word-controls { grid-template-columns: minmax(0, 1fr) 61px 61px !important; gap: 3px; width: 100%; margin: 0; }
  body.mobile-game-fit .word-input { height: 39px; padding-inline: 6px; border-radius: 10px; font-size: 14px; }
  body.mobile-game-fit .word-submit-btn,
  body.mobile-game-fit .word-giveup-btn { grid-column: auto !important; min-width: 0; min-height: 39px; padding: 0 4px; border-radius: 10px; font-size: 10px; }
  body.mobile-game-fit .word-turn-wait { display: none; }

  /* Timed overlays and end-of-round cards */
  body.mobile-game-fit .online-start-intro { z-index: 500; }
  body.mobile-game-fit .online-start-card { padding: 11px; }
  body.mobile-game-fit .online-start-kicker { margin-bottom: 4px; font-size: 9px; }
  body.mobile-game-fit .online-start-card h2 { font-size: 25px; }
  body.mobile-game-fit .online-start-prompt { margin-top: 7px; padding: 7px; border-radius: 12px; }
  body.mobile-game-fit .online-start-prompt strong { font-size: 35px; }
  body.mobile-game-fit .online-start-prompt span { margin-top: 2px; font-size: 11px; }
  body.mobile-game-fit .online-start-rules { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 7px; }
  body.mobile-game-fit .online-start-rule { display: block; padding: 6px 4px; border-radius: 9px; font-size: 9px; text-align: center; }
  body.mobile-game-fit .online-start-rule b { width: 19px; height: 19px; margin: 0 auto 3px; font-size: 9px; }
  body.mobile-game-fit .online-start-signal { margin-top: 7px; font-size: 11px; }
  body.mobile-game-fit .online-start-progress { height: 4px; margin-top: 5px; }
  body.mobile-game-fit .rps-match-card h3,
  body.mobile-game-fit .word-round-card h3 { margin-block: 5px; font-size: 26px; }
  body.mobile-game-fit .rps-match-card p,
  body.mobile-game-fit .word-round-card p { margin-block: 4px; font-size: 12px; }
  body.mobile-game-fit .word-match-scoreline { margin: 7px 0; padding: 6px; }
  body.mobile-game-fit .word-match-scoreline strong { font-size: 24px; }
  body.mobile-game-fit .online-result-actions { gap: 5px; }
  body.mobile-game-fit .online-rematch-btn,
  body.mobile-game-fit .online-result-exit-btn { min-height: 38px; padding: 7px 9px; font-size: 11px !important; }
  body.mobile-game-fit .online-auto-control {
    top: 42px;
    width: calc(100% - 8px);
    padding: 7px 8px;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 5px;
    border-radius: 11px;
  }
  body.mobile-game-fit .online-auto-copy small,
  body.mobile-game-fit .online-auto-copy span { display: none; }
  body.mobile-game-fit .online-auto-copy strong { font-size: 16px; }
  body.mobile-game-fit .online-auto-cancel { grid-column: auto; width: auto; min-height: 31px; padding-inline: 7px; font-size: 9px; }
}

@media (max-width: 1024px) and (orientation: landscape) {
  body.mobile-game-fit[data-view="online-game"] .online-game-screen { grid-template-rows: 39px minmax(0, 1fr) !important; }
  body.mobile-game-fit[data-view="online-game"] .online-topbar { height: 39px !important; min-height: 39px !important; max-height: 39px !important; }
  body.mobile-game-fit .online-player-strip { height: 34px; flex-basis: 34px; }
  body.mobile-game-fit .yut-arena {
    grid-template-columns: minmax(300px, 1fr) minmax(270px, .9fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }
  body.mobile-game-fit .yut-board { width: min(62cqh, 43vw, 390px); }
  body.mobile-game-fit .word-playfield {
    grid-template-columns: minmax(155px, .55fr) minmax(280px, 1.45fr) !important;
    grid-template-rows: minmax(0, 1fr) !important;
  }
  body.mobile-game-fit .word-required-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  body.mobile-game-fit .word-required-head { grid-column: 1; grid-row: 1; }
  body.mobile-game-fit .word-required-letter { grid-column: 1; grid-row: 2; width: min(22cqh, 92px); margin: 2px auto; font-size: 48px; }
  body.mobile-game-fit .word-required-card p { grid-column: 1; grid-row: 3; }
}


:root{--premium-radius:24px}
body{padding-bottom:env(safe-area-inset-bottom)}
button{min-height:44px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.game-card,.card,.panel,.box,.menu-card{border-radius:24px!important;box-shadow:0 20px 60px rgba(40,30,70,.12)!important;backdrop-filter:blur(12px)}
.ad-zone,#hubAdZone{border-radius:18px!important;overflow:hidden}
@media(max-width:600px){
 body{font-size:15px}
 .container,.wrap,.app,.hub{width:100%!important;max-width:none!important;padding-left:14px!important;padding-right:14px!important}
 h1,h2{letter-spacing:-.04em}
 .game-board{max-width:100%!important}
 .menu-grid{grid-template-columns:1fr!important}
 .btn,.button,button{border-radius:16px!important}
 canvas{max-width:100%;height:auto}
}
@media(min-width:601px){.container,.app,.hub{max-width:1200px;margin:auto}}

/* Mobile result notification fix: prevent side panel/overflow */
@media (max-width: 800px){
  .luck-game-screen .result-banner,
  .luck-game-screen[data-game="coin"] .result-banner{
    left:50%;
    right:auto;
    top:auto;
    bottom:3%;
    width:auto;
    min-width:0;
    max-width:88%;
    padding:9px 12px;
    border-radius:14px;
    text-align:center;
    font-size:14px;
    line-height:1.35;
    white-space:normal;
    overflow-wrap:anywhere;
    transform:translateX(-50%) translateY(16px);
  }
  .luck-game-screen .result-banner.show,
  .luck-game-screen[data-game="coin"] .result-banner.show{
    transform:translateX(-50%) translateY(0);
  }
}


/* =========================================================
   GAME INPUT PROTECTION - Mobile + PC
   Prevent accidental text selection, long-press callouts,
   tap highlights and context-menu style interactions while playing.
   Text-entry controls remain editable/selectable.
   ========================================================= */
html,
body,
body *:not(input):not(textarea):not([contenteditable="true"]) {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Keep real text-entry controls usable on both mobile and PC. */
input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}

/* Extra safeguard against selection highlight outside input fields. */
body *:not(input):not(textarea):not([contenteditable="true"])::selection {
  background: transparent;
}
body *:not(input):not(textarea):not([contenteditable="true"])::-moz-selection {
  background: transparent;
}


/* =========================================================
   Casual Arcade Home Redesign
   ========================================================= */
body[data-view="hub"] {
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 229, 115, .45), transparent 20%),
    radial-gradient(circle at 87% 10%, rgba(176, 129, 255, .25), transparent 24%),
    radial-gradient(circle at 82% 90%, rgba(255, 141, 193, .22), transparent 18%),
    linear-gradient(180deg, #daf1ff 0%, #eef3ff 50%, #f8f4ff 100%);
}
body[data-view="hub"] .app-shell {
  width: min(100vw, 520px);
  height: 100svh;
  min-height: 100svh;
  aspect-ratio: auto;
  margin: 0 auto;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.92));
  box-shadow: none;
}
@media (min-width: 821px) {
  body[data-view="hub"] .app-shell {
    width: min(100vw, 1320px);
    max-width: 1320px;
    height: min(100vh, 980px);
    min-height: 760px;
    margin: 12px auto;
    border-radius: 34px;
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 30px 80px rgba(57, 82, 143, .18);
  }
}
#hubScreen.arcade-home {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 100%;
  padding: 22px 16px calc(26px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 15% 4%, rgba(255,255,255,.48), transparent 18%),
    radial-gradient(circle at 86% 7%, rgba(255,255,255,.26), transparent 15%),
    linear-gradient(180deg, #17a4ff 0%, #4cb4ff 20%, #f4f6fb 55%, #f3f4fa 100%);
}
@media (min-width: 821px) {
  #hubScreen.arcade-home { padding: 20px 28px 28px; gap: 24px; }
}
#hubScreen.arcade-home::before,
#hubScreen.arcade-home::after,
#hubScreen.arcade-home .hub-spark { display: none; }
.arcade-deco,
.arcade-deco::before,
.arcade-deco::after {
  position: absolute;
  pointer-events: none;
}
.arcade-deco {
  inset: 0;
  overflow: hidden;
}
.arcade-deco::before {
  content: "";
  width: 78px;
  height: 78px;
  right: 18px;
  top: 88px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.6), rgba(255,255,255,.14) 60%, rgba(255,255,255,0) 62%);
  box-shadow: 0 0 0 8px rgba(255,255,255,.08);
}
.arcade-deco::after {
  content: "";
  width: 56px;
  height: 56px;
  left: 10px;
  top: 104px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 199, 223, .85), rgba(255, 130, 172, .52) 62%, rgba(255,255,255,0) 66%);
}
.arcade-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.arcade-menu-btn,
.arcade-floating-pill {
  border: 0;
  box-shadow: 0 12px 25px rgba(42, 72, 166, .18);
}
.arcade-menu-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 24px;
  font-weight: 900;
}
.arcade-floating-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
  color: #fff;
  font-weight: 900;
  font-size: 16px;
}
.arcade-floating-pill em {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd969, #ffb627);
  font-style: normal;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.65);
}
.arcade-hero-card {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: 34px;
  padding: 20px 18px 18px;
  background: linear-gradient(180deg, rgba(11,130,255,.08), rgba(255,255,255,.12));
}
.arcade-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 10% 22%, rgba(255,255,255,.38), transparent 18%),
    radial-gradient(circle at 90% 16%, rgba(255,255,255,.18), transparent 16%),
    radial-gradient(circle at 60% 0%, rgba(255, 235, 119, .18), transparent 22%);
  pointer-events: none;
}
.arcade-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 115px;
  gap: 12px;
  align-items: end;
}
.arcade-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 9px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #7d57ff, #874ef4);
  color: #fff9c2;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(80, 70, 190, .25);
}
.arcade-kicker::before,
.arcade-kicker::after { content: "✦"; color: #fff0a6; }
.arcade-home h1 {
  margin: 14px 0 0;
  font-size: clamp(40px, 11vw, 74px);
  line-height: .92;
  letter-spacing: -.06em;
  color: #17328f;
  text-shadow: 0 4px 0 rgba(255,255,255,.7), 0 12px 30px rgba(18, 67, 179, .22);
}
.arcade-home h1 span {
  display: inline-block;
  margin-top: 8px;
  color: #fff;
  text-shadow:
    -3px -3px 0 #2a42ae,
     3px -3px 0 #2a42ae,
    -3px  3px 0 #2a42ae,
     3px  3px 0 #2a42ae,
     0 10px 22px rgba(27, 57, 155, .3);
}
.arcade-home .hero-accent { color: #ffda47; }
.arcade-home .arcade-sub {
  margin: 10px 0 0;
  max-width: 94%;
  color: rgba(255,255,255,.96);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.48;
  text-shadow: 0 1px 8px rgba(29, 72, 176, .24);
}
.arcade-mascot-wrap {
  position: relative;
  justify-self: end;
  display: grid;
  place-items: end;
}
.arcade-mascot {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ffffff, #f2fbff 65%, #d4ecff 66%);
  box-shadow: 0 18px 38px rgba(14, 70, 165, .2);
}
.arcade-mascot::before {
  content: "";
  position: absolute;
  inset: 11px 12px 16px 12px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(252,252,255,.82));
}
.arcade-mascot-face,
.arcade-mascot-face::before,
.arcade-mascot-face::after,
.arcade-crown,
.arcade-headphones,
.arcade-headphones::before,
.arcade-headphones::after {
  position: absolute;
}
.arcade-mascot-face { inset: 0; }
.arcade-mascot-face::before {
  content: "◕   ◡";
  left: 25px;
  top: 38px;
  color: #2e2f57;
  font-size: 26px;
  letter-spacing: 10px;
  font-weight: 900;
}
.arcade-mascot-face::after {
  content: "◡";
  left: 52px;
  top: 60px;
  color: #ff7d98;
  font-size: 28px;
  font-weight: 900;
  transform: rotate(180deg);
}
.arcade-headphones {
  inset: 24px 12px 18px;
  border: 8px solid #7a58ff;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
}
.arcade-headphones::before,
.arcade-headphones::after {
  content: "";
  top: 30px;
  width: 20px;
  height: 34px;
  border-radius: 16px;
  background: linear-gradient(180deg, #9d7cff, #6b48e8);
}
.arcade-headphones::before { left: -7px; }
.arcade-headphones::after { right: -7px; }
.arcade-crown {
  right: 14px;
  top: -8px;
  font-size: 26px;
  filter: drop-shadow(0 5px 8px rgba(255, 184, 0, .28));
}
.arcade-feature-card {
  position: relative;
  z-index: 2;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(150px, .9fr);
  gap: 14px;
  align-items: center;
  padding: 22px 18px;
  border-radius: 30px;
  background: linear-gradient(135deg, #6a3cff, #7c3cff 25%, #a64cff 100%);
  box-shadow: 0 18px 40px rgba(93, 46, 195, .24);
  border: 4px solid rgba(255,255,255,.72);
}
.arcade-feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.17), transparent 26%),
    radial-gradient(circle at 82% 14%, rgba(255, 205, 96, .14), transparent 24%),
    radial-gradient(circle at 82% 84%, rgba(255,255,255,.12), transparent 18%);
}
.arcade-hot-sticker {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  padding: 10px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ff7b4d, #ff533d);
  color: #fff;
  font-size: 14px;
  font-weight: 1000;
  box-shadow: 0 8px 18px rgba(255, 92, 60, .26);
}
.arcade-feature-copy { position: relative; z-index: 1; padding-top: 28px; }
.arcade-feature-copy .small { color: #ffe79b; font-size: 16px; font-weight: 900; }
.arcade-feature-copy h2 {
  margin: 6px 0;
  font-size: clamp(33px, 9vw, 56px);
  line-height: .95;
  color: #fff;
  text-shadow: 0 8px 20px rgba(43, 9, 92, .22);
}
.arcade-feature-copy p {
  margin: 10px 0 0;
  color: rgba(255,255,255,.88);
  font-size: 15px;
  font-weight: 700;
}
.arcade-feature-start {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 180px;
  padding: 16px 24px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe14e, #ffb915);
  color: #8b3d00;
  font-size: 17px;
  font-weight: 1000;
  box-shadow: 0 10px 0 #e89b0d, 0 16px 30px rgba(254, 199, 41, .3);
}
.arcade-feature-start:active { transform: translateY(4px); box-shadow: 0 5px 0 #e89b0d; }
.arcade-feature-visual { position: relative; z-index: 1; display: grid; place-items: center; min-height: 220px; }
.arcade-roulette {
  position: relative;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 10px solid #ffc63a;
  background: conic-gradient(#ff6262 0 15%, #ff9638 0 30%, #ffd84b 0 45%, #53ce81 0 60%, #41b2ff 0 75%, #6575ff 0 90%, #d95aff 0 100%);
  box-shadow: 0 18px 26px rgba(20, 7, 78, .25), inset 0 0 0 6px rgba(255,255,255,.33);
}
.arcade-roulette::before {
  content: "";
  position: absolute;
  inset: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff3cc, #f4a500 60%, #d87f00 100%);
  box-shadow: 0 0 0 8px rgba(255, 207, 103, .82);
}
.arcade-roulette::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -16px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 26px solid #ffd96c;
  filter: drop-shadow(0 4px 4px rgba(32, 10, 90, .2));
}
.arcade-coin-stack,
.arcade-coin-stack::before,
.arcade-coin-stack::after,
.arcade-star-buddy {
  position: absolute;
}
.arcade-coin-stack {
  bottom: 20px;
  left: 16px;
  width: 44px;
  height: 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffd95b, #f2a805);
  box-shadow: 48px 8px 0 0 #f2a805, 58px 8px 0 0 #ffd95b;
}
.arcade-coin-stack::before,
.arcade-coin-stack::after {
  content: "";
  width: 44px;
  height: 14px;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffe781, #f4b61f);
}
.arcade-coin-stack::before { left: 0; top: -10px; }
.arcade-coin-stack::after { left: 48px; top: -2px; }
.arcade-star-buddy {
  right: 2px;
  bottom: 6px;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  font-size: 62px;
  filter: drop-shadow(0 8px 16px rgba(39, 7, 98, .23));
}
.arcade-star-buddy::after {
  content: "◕◡◕";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 18px;
  letter-spacing: 1px;
  color: #8a5a00;
  font-weight: 900;
}
.arcade-feature-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: -10px;
  position: relative;
  z-index: 2;
}
.arcade-feature-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
}
.arcade-feature-dots span.active { width: 28px; border-radius: 999px; background: #fff; }
.home-section {
  position: relative;
  z-index: 2;
  padding: 0 2px;
}
.home-section-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 12px;
}
.home-section-head h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: clamp(24px, 6vw, 34px);
  color: #20328d;
}
.home-section-head h3 b {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff, #e6efff);
  box-shadow: 0 8px 18px rgba(38, 63, 142, .12);
  font-size: 22px;
}
.home-section-head button {
  border: 0;
  padding: 10px 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #edf3ff, #dde8ff);
  color: #4280f5;
  font-size: 14px;
  font-weight: 900;
}
.home-section-head button.active { background: linear-gradient(180deg, #4d96ff, #3478f7); color: #fff; box-shadow: 0 10px 18px rgba(52,120,247,.22); }
.home-game-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (min-width: 821px) {
  .home-game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .home-game-grid.offline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.arcade-home .game-tile {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  display: grid !important;
  grid-template-rows: auto minmax(112px, 1fr) auto;
  justify-items: stretch;
  align-items: stretch;
  padding: 12px;
  border: 0;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,248,255,.94));
  box-shadow: 0 18px 38px rgba(47, 70, 145, .12), inset 0 1px 0 rgba(255,255,255,.86);
}
.arcade-home .game-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 12% 8%, rgba(255,255,255,.55), transparent 20%);
  pointer-events: none;
}
.arcade-home .tile-badge {
  justify-self: start;
  padding: 7px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: -.01em;
}
.arcade-home .badge-hot,.arcade-home .badge-pop { background: linear-gradient(180deg, #ff5b4b, #ff3b30); }
.arcade-home .badge-new { background: linear-gradient(180deg, #81d934, #52b912); }
.arcade-home .badge-reco { background: linear-gradient(180deg, #8a61ff, #6b4eff); }
.arcade-home .badge-online { background: linear-gradient(180deg, #ff9c2d, #ff6f1f); }
.arcade-home .tile-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 114px;
  margin-top: 10px;
  border-radius: 22px;
  box-shadow: inset 0 8px 24px rgba(255,255,255,.25), inset 0 -10px 20px rgba(255,255,255,.18);
}
.arcade-home .tile-visual span {
  display: inline-grid;
  place-items: center;
  width: 94px;
  height: 94px;
  font-size: 60px;
  filter: drop-shadow(0 8px 14px rgba(66, 63, 120, .14));
}
.arcade-home .tile-visual.word-cubes span,
.arcade-home .tile-visual.rps-hands span,
.arcade-home .tile-visual.yut-stick span,
.arcade-home .tile-visual.hammer-visual span { width: 100%; height: 100%; font-size: 52px; }
.arcade-home .tile-copy {
  margin-top: 10px;
  display: block;
  text-align: center;
  min-width: 0;
}
.arcade-home .tile-copy strong {
  display: block;
  color: #1e2f84;
  font-size: clamp(19px, 4.9vw, 28px);
  font-weight: 1000;
  line-height: 1.1;
  letter-spacing: -.04em;
}
.arcade-home .tile-copy small {
  display: block;
  margin-top: 6px;
  color: #6982ba;
  font-size: 12px;
  line-height: 1.42;
  letter-spacing: -.01em;
}
.arcade-home .tile-enter { display: none !important; }
/* game specific visuals */
.arcade-home .ladder-tile .tile-visual { background: linear-gradient(180deg, #9fe7ff, #e8f7ff); }
.arcade-home .fishing-tile .tile-visual { background: linear-gradient(180deg, #bdeeff, #e1f6ff); }
.arcade-home .coin-tile .tile-visual { background: linear-gradient(180deg, #f6ddff, #fff0f9); }
.arcade-home .card-tile .tile-visual { background: linear-gradient(180deg, #ffe8c2, #fff4e4); }
.arcade-home .odd-tile .tile-visual { background: linear-gradient(180deg, #d5ffd8, #effff1); }
.arcade-home .enhance-tile .tile-visual { background: linear-gradient(180deg, #ede0ff, #f7f1ff); }
.arcade-home .roulette-tile .tile-visual { background: linear-gradient(180deg, #fff0c7, #fff6de); }
.arcade-home .scratch-tile .tile-visual { background: linear-gradient(180deg, #f3e2ff, #fbf5ff); }
.arcade-home .rps-online-tile .tile-visual { background: linear-gradient(180deg, #ffd7ef, #fff1f8); }
.arcade-home .yut-online-tile .tile-visual { background: linear-gradient(180deg, #ffe7c0, #fff4e2); }
.arcade-home .chain-online-tile .tile-visual,
.arcade-home .word-online-tile .tile-visual { background: linear-gradient(180deg, #d8ffe8, #f1fff6); }
.arcade-home .word-online-tile.chain-online-tile .tile-visual { background: linear-gradient(180deg, #dbf6ff, #eefcff); }
.arcade-home .tile-visual .roulette-wheel {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 7px solid #f6ad00;
  background: conic-gradient(#f94f58 0 18%, #fd8e36 0 36%, #ffd855 0 54%, #5bd285 0 72%, #41b5ff 0 90%, #9d63ff 0 100%);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.35);
  position: relative;
}
.arcade-home .tile-visual .roulette-wheel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f2a400;
  box-shadow: 0 0 0 6px rgba(255, 224, 133, .88);
}
.arcade-home .tile-visual .emoji-coin { font-size: 64px; }
.arcade-home .tile-visual .emoji-card { font-size: 58px; }
.arcade-home .tile-visual .yut-stack,
.arcade-home .tile-visual .rps-row,
.arcade-home .tile-visual .cube-row,
.arcade-home .tile-visual .hammer-wrap { display: flex; align-items: center; justify-content: center; gap: 6px; }
.arcade-home .tile-visual .rps-row i,
.arcade-home .tile-visual .yut-stack i,
.arcade-home .tile-visual .cube-row i,
.arcade-home .tile-visual .hammer-wrap i {
  font-style: normal;
  display: inline-grid;
  place-items: center;
  border-radius: 18px;
}
.arcade-home .tile-visual .rps-row i { width: 42px; height: 42px; background: #fff; box-shadow: 0 6px 14px rgba(89, 80, 160, .12); font-size: 26px; }
.arcade-home .tile-visual .yut-stack i { width: 18px; height: 74px; border-radius: 12px; background: linear-gradient(180deg, #d4923b, #b66a22); color: rgba(84,32,0,.75); font-size: 14px; font-weight: 900; }
.arcade-home .tile-visual .cube-row i { width: 44px; height: 44px; color: #fff; font-size: 26px; font-weight: 1000; }
.arcade-home .tile-visual .cube-row i:nth-child(1){ background:#42d3c0; }
.arcade-home .tile-visual .cube-row i:nth-child(2){ background:#ff6cb4; }
.arcade-home .tile-visual .cube-row i:nth-child(3){ background:#ff6456; }
.arcade-home .tile-visual .hammer-wrap i {
  width: 92px;
  height: 82px;
  background: none;
  font-size: 72px;
}
.home-shortcut-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 821px) { .home-shortcut-row { grid-template-columns: 1fr 1fr; gap: 16px; } }
.shortcut-card {
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  padding: 16px;
  border: 0;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,247,255,.96));
  box-shadow: 0 16px 34px rgba(47, 70, 145, .10);
}
.shortcut-card .shortcut-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff6c8, #ffe5aa);
  font-size: 30px;
}
.shortcut-card strong { display: block; color: #22368f; font-size: 22px; line-height: 1.12; letter-spacing: -.04em; }
.shortcut-card small, .shortcut-card #todayVisitorCount {
  display: block;
  margin-top: 5px;
  color: #6982ba;
  font-size: 14px;
  font-weight: 800;
}
.shortcut-card .shortcut-go { color: #97a9d8; font-size: 26px; font-weight: 900; }
.arcade-bottom-nav {
  position: relative;
  bottom: auto;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  gap: 8px;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(18px);
  box-shadow: 0 -12px 24px rgba(51, 79, 156, .10);
  margin: 8px -16px calc(-26px - env(safe-area-inset-bottom));
}
@media (min-width: 821px) {
  .arcade-bottom-nav { margin: 10px -28px -28px; padding-inline: 24px; }
}
.arcade-bottom-nav button {
  min-height: 66px;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: #7c879f;
  font-weight: 900;
}
.arcade-bottom-nav button span {
  display: block;
  font-size: 26px;
  line-height: 1;
  margin-bottom: 6px;
}
.arcade-bottom-nav button.active { color: #2681ff; }
.arcade-bottom-nav button.active span { filter: drop-shadow(0 4px 10px rgba(57, 128, 255, .18)); }
.arcade-ad-row { position: relative; z-index: 2; }
.arcade-ad-row .adsense-zone {
  margin: 0;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 16px 34px rgba(47, 70, 145, .10);
}
@media (max-width: 820px) {
  .arcade-hero-inner { grid-template-columns: minmax(0,1fr) 92px; }
  .arcade-mascot { width: 92px; height: 92px; }
  .arcade-mascot-face::before { left: 18px; top: 30px; font-size: 21px; letter-spacing: 8px; }
  .arcade-mascot-face::after { left: 43px; top: 49px; font-size: 24px; }
  .arcade-headphones { inset: 20px 8px 15px; border-width: 7px; }
  .arcade-headphones::before, .arcade-headphones::after { top: 24px; width: 18px; height: 30px; }
  .arcade-feature-card { grid-template-columns: minmax(0,1fr); }
  .arcade-feature-visual { min-height: 166px; }
  .arcade-roulette { width: 136px; height: 136px; }
  .arcade-star-buddy { width: 64px; height: 64px; font-size: 48px; }
  .arcade-home .game-tile { min-height: 195px; }
}


/* ===== Shared arcade visual language ===== */
:root{
  --arc-blue:#2788ff;--arc-blue2:#49b8ff;--arc-purple:#7757ff;--arc-pink:#ff6fae;
  --arc-yellow:#ffd84e;--arc-orange:#ff9d35;--arc-green:#54cf84;--arc-ink:#20317e;
  --arc-panel:#ffffff;--arc-soft:#f3f6ff;--arc-line:#dce7ff;--arc-shadow:0 18px 44px rgba(45,72,146,.14);
}
body[data-view="game"],body[data-view="result"],body[data-view="fish-game"],body[data-view="luck-game"],body[data-view="online-game"]{
  color:#24326f;background:linear-gradient(180deg,#9de0ff 0%,#e9f4ff 38%,#f7f4ff 100%);
}
body[data-view="game"] button,body[data-view="result"] button,body[data-view="fish-game"] button,body[data-view="luck-game"] button,body[data-view="online-game"] button{
  font-weight:900;letter-spacing:-.02em;
}
/* prevent visible text from being clipped by narrow cards/buttons */
body[data-view="hub"] *,body[data-view="game"] *,body[data-view="result"] *,body[data-view="fish-game"] *,body[data-view="luck-game"] *,body[data-view="online-game"] *{min-width:0}
body[data-view="hub"] button,body[data-view="game"] button,body[data-view="result"] button,body[data-view="fish-game"] button,body[data-view="luck-game"] button,body[data-view="online-game"] button{
  white-space:normal;overflow-wrap:anywhere;word-break:keep-all;
}
body[data-view="hub"] h1,body[data-view="hub"] h2,body[data-view="hub"] h3,
body[data-view="game"] h1,body[data-view="game"] h2,body[data-view="game"] h3,
body[data-view="result"] h1,body[data-view="result"] h2,body[data-view="result"] h3,
body[data-view="fish-game"] h1,body[data-view="fish-game"] h2,body[data-view="fish-game"] h3,
body[data-view="luck-game"] h1,body[data-view="luck-game"] h2,body[data-view="luck-game"] h3,
body[data-view="online-game"] h1,body[data-view="online-game"] h2,body[data-view="online-game"] h3{overflow-wrap:anywhere;word-break:keep-all}

/* ===== Hub quick menu ===== */
.arcade-quick-menu{position:fixed;inset:0;z-index:9999;display:grid;place-items:end center;padding:18px;background:rgba(24,40,97,.28);backdrop-filter:blur(8px)}
.arcade-quick-menu.hidden{display:none!important}.arcade-quick-menu-card{width:min(520px,100%);padding:18px;border-radius:28px;background:linear-gradient(180deg,#fff,#f2f5ff);box-shadow:0 28px 70px rgba(38,52,116,.28);border:2px solid rgba(255,255,255,.8)}
.arcade-quick-menu-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.arcade-quick-menu-head small{display:block;color:#7787bb;font-size:11px;font-weight:1000;letter-spacing:.13em}.arcade-quick-menu-head strong{display:block;margin-top:3px;color:var(--arc-ink);font-size:24px}.arcade-quick-menu-head button{width:42px;height:42px;border:0;border-radius:14px;background:#eef3ff;color:#6574a8;font-size:25px}.arcade-quick-menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}.arcade-quick-menu-grid button{min-height:112px;padding:14px;border:0;border-radius:20px;background:linear-gradient(145deg,#fff,#edf4ff);box-shadow:0 10px 24px rgba(45,72,146,.09);color:var(--arc-ink);text-align:left}.arcade-quick-menu-grid span{display:block;font-size:30px}.arcade-quick-menu-grid b{display:block;margin-top:7px;font-size:18px}.arcade-quick-menu-grid small{display:block;margin-top:4px;color:#7889b8;font-size:12px;line-height:1.35}

/* ===== Ladder setup ===== */
body[data-view="game"] .app-shell,body[data-view="result"] .app-shell{background:linear-gradient(180deg,#edf8ff,#f8f6ff)!important}
.setup-only.hero{padding:18px 20px;border-radius:26px;background:linear-gradient(135deg,#2c92ff,#715eff);color:white;box-shadow:var(--arc-shadow)}
.setup-only.hero .eyebrow,.setup-only.hero .sub{color:rgba(255,255,255,.82)}.setup-only.hero h1{color:white;text-shadow:0 4px 0 rgba(38,59,159,.25)}
.setup-only.hero .hero-mascot{background:linear-gradient(180deg,#fff3a5,#ffd45c);border-color:white}.setup-only.hero .ghost-btn{border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.18);color:white;box-shadow:none}
.stepper .step-dot.active b{background:linear-gradient(180deg,#ff7aac,#ff5f98);border-color:#ff7aac;box-shadow:0 7px 18px rgba(255,93,151,.3)}
.card.wizard-card{border:2px solid #e2eaff;background:linear-gradient(180deg,#fff,#f7f9ff);box-shadow:var(--arc-shadow)}
.primary-btn{background:linear-gradient(180deg,#5da8ff,#337ff7)!important;color:#fff!important;border:0!important;box-shadow:0 7px 0 #2362d2,0 14px 24px rgba(49,124,246,.24)!important}
.secondary-btn,.ghost-btn,.tiny-btn{border-color:#dbe5ff!important;background:#fff!important;color:#42558f!important}
.count-value{background:linear-gradient(145deg,#fff4bd,#ffe87c)!important;border-color:#ffd24b!important;color:#a36b00!important;box-shadow:inset 0 0 0 5px rgba(255,255,255,.5),0 10px 24px rgba(255,196,50,.18)!important}
.mode-card.active{border-color:#7bb4ff!important;background:linear-gradient(145deg,#e9f5ff,#f4efff)!important;box-shadow:0 8px 0 #d7e8ff,0 16px 30px rgba(65,122,220,.11)!important}
body[data-view="game"] .game-titlebar{background:linear-gradient(90deg,#258fff,#795cff)!important;border-bottom:0!important;box-shadow:0 8px 24px rgba(39,92,202,.18)!important}
body[data-view="game"] .game-title-group h2,body[data-view="game"] .game-status{color:white!important}.title-mascot{background:linear-gradient(180deg,#fff2a8,#ffd65b)!important;border-color:white!important}.title-btn{background:rgba(255,255,255,.18)!important;border-color:rgba(255,255,255,.48)!important;color:white!important;box-shadow:none!important}
body[data-view="game"] .playfield{background:linear-gradient(180deg,#dff4ff,#eef0ff)!important}.ladder-paper{border-color:#dce7ff!important;background:linear-gradient(180deg,#fff,#fbfcff)!important;box-shadow:0 20px 52px rgba(43,68,142,.16)!important}.paper-topbar{background:linear-gradient(180deg,#f5f9ff,#ebf2ff)!important;border-bottom-color:#dbe6ff!important}.blind-title strong{color:#2e4eaa!important}.ladder-toggle-btn{background:linear-gradient(180deg,#ffe66c,#ffc93a)!important;color:#8a5700!important;border-color:#ffcf40!important;box-shadow:0 5px 0 #e7a815!important}.paper-footer{background:linear-gradient(180deg,#f5f9ff,#edf3ff)!important;border-top-color:#dbe6ff!important}.paper-btn{border-color:#d7e3ff!important;background:#fff!important;color:#3f548e!important}.paper-btn.strong{background:linear-gradient(180deg,#6e90ff,#6262ef)!important;color:#fff!important;border:0!important}
.result-screen{background:linear-gradient(180deg,#eef8ff,#f5f1ff)!important}.result-titlebar{background:linear-gradient(90deg,#2b91ff,#765cff)!important;color:#fff!important;border-radius:24px!important;padding:18px!important;box-shadow:var(--arc-shadow)}.result-titlebar h2,.result-titlebar p,.result-titlebar .step-tag{color:white!important}.summary-card{border-color:#dfe8ff!important;background:linear-gradient(180deg,#fff,#f5f8ff)!important;box-shadow:0 12px 26px rgba(52,74,146,.1)!important}

/* ===== Luck games ===== */
body[data-view="luck-game"] .app-shell{background:linear-gradient(180deg,#dbf4ff,#f4edff)!important;border-color:#dce8ff!important;box-shadow:0 30px 80px rgba(45,72,146,.2)!important}
.luck-game-screen{color:#24326f!important;background:linear-gradient(180deg,#c9efff,#f5f0ff)!important}.luck-bg{background:radial-gradient(circle at 16% 18%,rgba(255,232,112,.45),transparent 24%),radial-gradient(circle at 84% 15%,rgba(188,129,255,.28),transparent 28%),linear-gradient(160deg,#b9e9ff,#f2efff 55%,#fff1f8)!important}.luck-topbar{background:rgba(255,255,255,.86)!important;border-bottom:1px solid #d9e5ff!important;box-shadow:0 8px 24px rgba(47,70,143,.1)!important}.luck-title h2{color:#23368d!important}.luck-title small{color:#5277d7!important}.luck-title-icon{background:linear-gradient(180deg,#ffd85e,#ffb92e)!important;color:#fff!important;box-shadow:0 8px 18px rgba(255,177,41,.22)!important}.luck-back-btn{background:#fff!important;border:1px solid #d7e2ff!important;color:#40558e!important}.luck-main{background:rgba(255,255,255,.82)!important;border:2px solid rgba(255,255,255,.78)!important;box-shadow:0 20px 48px rgba(49,70,140,.14)!important}.luck-kicker{color:#6a7db2!important}.luck-prompt{color:#23368d!important}.luck-subprompt{color:#7083b2!important}.luck-choice{border:2px solid #dfe8ff!important;background:linear-gradient(180deg,#fff,#eff4ff)!important;color:#2e4389!important;box-shadow:0 8px 0 #e0e8fa,0 15px 26px rgba(52,76,143,.1)!important}.luck-choice.selected{border-color:#7c87ff!important;background:linear-gradient(180deg,#eef1ff,#e7e8ff)!important;box-shadow:0 8px 0 #d6d9ff,0 16px 30px rgba(105,96,235,.18)!important}.luck-action{background:linear-gradient(180deg,#ff83b9,#ff609d)!important;box-shadow:0 8px 0 #d74180,0 16px 30px rgba(255,91,153,.24)!important}.luck-secondary{color:#6f83b5!important}.result-banner{background:rgba(255,255,255,.96)!important;border:2px solid #dce7ff!important;color:#24398e!important;box-shadow:0 16px 32px rgba(49,70,140,.16)!important}
/* preserve bespoke roulette/scratch but align shared controls */
.luck-game-screen[data-game="roulette"],.luck-game-screen[data-game="scratch"]{background:linear-gradient(180deg,#f9f4ff,#fff8ef)!important}.roulette-spin,.scratch-action-btn,.scratch-cta{border-radius:18px!important;font-weight:1000!important}

/* ===== Fishing ===== */
body[data-view="fish-game"]{background:#93dcff!important}.fish-game-titlebar{background:linear-gradient(90deg,#238dff,#5c73ff)!important;border-bottom:0!important;box-shadow:0 8px 24px rgba(39,89,197,.18)!important}.fish-page-title small,.fish-page-title h2{color:#fff!important}.fish-page-title>span{background:rgba(255,255,255,.19)!important;border-color:rgba(255,255,255,.45)!important}.fish-title-actions .title-btn{background:rgba(255,255,255,.18)!important;border-color:rgba(255,255,255,.45)!important;color:#fff!important}.fishing-scene{background:linear-gradient(180deg,#68cfff 0%,#c9f2ff 36%,#e8fbff 40%,#39acd0 41%,#1785b7 70%,#0d5e92 100%)!important}.fish-hud{background:rgba(255,255,255,.78)!important;border:1px solid rgba(255,255,255,.9)!important;color:#264b8e!important;box-shadow:0 10px 25px rgba(33,80,143,.13)!important}.fish-hud span{color:#4f79bc!important}.fish-hud strong{color:#244385!important}.fishing-start-btn{background:linear-gradient(180deg,#ffe45f,#ffb92f)!important;color:#7c4b00!important;border-color:rgba(255,255,255,.7)!important;box-shadow:0 9px 0 #e59b16,0 18px 34px rgba(255,184,38,.28)!important}.fish-toast,.fish-result-card{background:rgba(255,255,255,.9)!important;color:#294684!important;border-color:rgba(255,255,255,.95)!important;box-shadow:0 18px 36px rgba(35,81,145,.14)!important}.fish-result-card span{color:#6681b1!important}.fish-odds-panel{background:linear-gradient(180deg,#fff,#eef5ff)!important;color:#27417e!important;border-color:#dbe7ff!important}.fish-odds-head small{color:#6784bf!important}.fish-odds-head button{background:#eaf1ff!important;color:#536ba4!important}

/* ===== Online games ===== */
body[data-view="online-game"]{background:#bdeaff!important}.online-game-screen{color:#263979!important;background:radial-gradient(circle at 16% 8%,rgba(255,225,100,.34),transparent 21%),radial-gradient(circle at 88% 14%,rgba(190,130,255,.24),transparent 25%),linear-gradient(180deg,#bcecff,#eef3ff 45%,#f7f2ff)!important}.online-grid-bg{opacity:.18!important;background-image:linear-gradient(rgba(53,119,230,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(53,119,230,.08) 1px,transparent 1px)!important}.online-topbar{background:rgba(255,255,255,.88)!important;border-bottom:1px solid #d9e6ff!important;box-shadow:0 8px 24px rgba(45,73,146,.11)!important}.online-title-icon{background:linear-gradient(180deg,#ffd95b,#ffb72b)!important;color:white!important;box-shadow:0 8px 20px rgba(255,181,37,.22)!important}.online-title-wrap small{color:#5c79c7!important}.online-title-wrap h2{color:#26398b!important}.online-net-pill{background:#eef5ff!important;border-color:#d8e5ff!important;color:#6d80ad!important}.online-net-pill.connected{color:#268a67!important;background:#e6fff5!important;border-color:#bfeeda!important}.online-leave-btn{background:#fff!important;border-color:#d7e3ff!important;color:#40558e!important}.online-eyebrow{background:#eef2ff!important;border-color:#dbe5ff!important;color:#6f63d9!important}.online-lobby-copy h3{color:#25377f!important}.online-lobby-copy h3 em{color:#6d5ce8!important}.online-lobby-copy p{color:#7083ae!important}.online-feature-row span{background:rgba(255,255,255,.72)!important;border-color:#dfe8ff!important;color:#6076aa!important}.online-lobby-panel{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(242,247,255,.96))!important;border:2px solid rgba(255,255,255,.92)!important;box-shadow:0 22px 52px rgba(45,73,146,.15)!important}.online-field-label{color:#6479ad!important}.online-input{border:2px solid #dce6ff!important;background:#fff!important;color:#24377e!important}.online-input:focus{border-color:#7399ff!important;box-shadow:0 0 0 3px rgba(72,123,255,.12)!important}.online-room-card{border:2px solid #e0e8ff!important;background:linear-gradient(180deg,#fff,#f1f5ff)!important;color:#263a82!important;box-shadow:0 10px 22px rgba(47,71,142,.08)!important}.online-room-card.create:hover{background:#f1f7ff!important;border-color:#99b7ff!important}.room-card-icon{background:linear-gradient(180deg,#f2e9ff,#e7ddff)!important;color:#705de6!important}.online-room-card small{color:#7184ad!important}.room-code-entry button,.online-ready-btn{background:linear-gradient(180deg,#ff82b9,#ff609d)!important;box-shadow:0 7px 0 #d5407e!important;color:#fff!important}.online-ai-practice{border-color:#dce6ff!important;background:linear-gradient(180deg,#fff7c5,#ffed9b)!important;color:#77500c!important}.online-room-box{background:#eef7ff!important;border-color:#d8e7ff!important}.online-room-box>small,.match-lobby-head span{color:#5f79c6!important}.room-code-display button{background:#fff!important;color:#5268a1!important}.online-room-box p,.online-ready-hint{color:#7184ad!important}.ready-player-card{background:linear-gradient(180deg,#fff,#f1f5ff)!important;border:2px solid #dfe7ff!important;box-shadow:0 14px 30px rgba(49,72,141,.1)!important}.ready-avatar{background:linear-gradient(180deg,#dff7ff,#d5e9ff)!important;color:#3d73c8!important;border-color:#cce1ff!important}.ready-player-card.guest .ready-avatar{background:linear-gradient(180deg,#f2e8ff,#e6ddff)!important;color:#725ee1!important}.ready-player-card strong{color:#283b82!important}.ready-player-card em{color:#7184ad!important}.ready-vs span{color:#7b68e6!important}.online-player-strip{background:rgba(255,255,255,.78)!important;border-color:#dce7ff!important}.strip-player strong,.strip-room b{color:#263a82!important}.strip-player small,.strip-room span{color:#6c80ad!important}.strip-player>span{background:#e8f5ff!important;color:#3e7bc9!important}.strip-player.guest>span{background:#efeaff!important;color:#705ee0!important}.online-game-content{background:rgba(255,255,255,.73)!important;border:2px solid rgba(255,255,255,.9)!important;box-shadow:0 18px 42px rgba(49,73,143,.12)!important}.online-toast{background:rgba(255,255,255,.96)!important;border-color:#dce7ff!important;color:#2a3e83!important;box-shadow:0 12px 28px rgba(46,70,141,.14)!important}
.rps-choice{background:linear-gradient(180deg,#fff,#f1f5ff)!important;border-color:#dfe8ff!important;color:#263a82!important;box-shadow:0 8px 0 #e1e8f8!important}.rps-choice.selected{border-color:#7d8cff!important;background:linear-gradient(180deg,#eff1ff,#e7e8ff)!important}.rps-side-card,.word-required-card,.word-history-panel,.yut-side-card,.yut-board-wrap{background:rgba(255,255,255,.86)!important;border-color:#dfe8ff!important;box-shadow:0 12px 28px rgba(47,70,141,.09)!important;color:#263a82!important}

/* ===== Mobile text-fit guards ===== */
@media(max-width:820px){
  #hubScreen.arcade-home{gap:16px;padding-left:12px;padding-right:12px}.arcade-home h1{font-size:clamp(36px,10vw,50px)}.arcade-home .arcade-sub{font-size:13px}.arcade-feature-copy h2{font-size:clamp(30px,8vw,42px)}.arcade-feature-copy p{font-size:13px}.arcade-feature-start{min-width:160px;padding:14px 18px;font-size:16px}.home-section-head h3{font-size:clamp(22px,6vw,28px)}.arcade-home .game-tile{min-height:180px;padding:10px}.arcade-home .tile-visual{min-height:100px}.arcade-home .tile-copy strong{font-size:clamp(17px,4.7vw,22px)}.arcade-home .tile-copy small{font-size:11px;line-height:1.36}.arcade-bottom-nav button{font-size:11px}.shortcut-card strong{font-size:18px}.shortcut-card small,.shortcut-card #todayVisitorCount{font-size:12px}
  body[data-view="game"] .game-title-group h2,body.mobile-game-fit[data-view="game"] .game-title-group h2{font-size:17px!important;white-space:normal!important;line-height:1.1}.game-titlebar{gap:4px!important}.title-actions{gap:3px!important}.title-btn{min-height:32px!important;padding:5px 7px!important;font-size:10px!important}.blind-title span{font-size:10px!important;line-height:1.2}.paper-btn{font-size:10px!important;line-height:1.15!important}.result-toast{font-size:11px!important;line-height:1.2!important}
  .luck-title h2{font-size:18px!important;white-space:normal!important;line-height:1.05}.luck-back-btn{font-size:11px!important;padding:7px 9px!important}.luck-prompt{font-size:clamp(24px,6vw,34px)!important;line-height:1.05}.luck-subprompt{font-size:13px!important;line-height:1.35}.luck-choice{min-width:0!important;font-size:17px!important;line-height:1.18!important;padding:12px 14px!important}.luck-action{min-width:0!important;max-width:92%;font-size:18px!important;line-height:1.2!important;padding:13px 18px!important}
  .fish-page-title h2{font-size:19px!important;white-space:normal!important;line-height:1.05}.fish-page-title small{display:none!important}.fish-page-title>span{width:36px!important;height:36px!important;font-size:22px!important}.fish-title-actions .title-btn{font-size:10px!important;padding:6px 8px!important}.fish-hud{padding:6px 8px!important;gap:5px!important}.fish-hud span{font-size:8px!important}.fish-hud strong{font-size:12px!important}.fish-result-card{max-width:min(74vw,300px)!important}.fish-result-card strong{font-size:clamp(18px,5vw,26px)!important;line-height:1.1}.fish-result-card>span{font-size:12px!important;line-height:1.3}.fish-toast{max-width:86vw!important;font-size:12px!important;line-height:1.3}
  .online-title-wrap h2,body.mobile-game-fit[data-view="online-game"] .online-title-wrap h2{font-size:16px!important;white-space:normal!important;line-height:1.05}.online-leave-btn{font-size:10px!important;white-space:nowrap!important}.online-lobby-copy h3{font-size:clamp(31px,8vw,44px)!important;line-height:.98}.online-feature-row span{font-size:10px!important}.online-lobby-panel{padding:14px!important}.online-room-card{min-height:112px!important;padding:13px!important}.online-room-card strong{font-size:17px!important}.online-room-card small{font-size:11px!important}.online-ai-practice strong{font-size:15px!important}.online-ready-btn{font-size:17px!important}.ready-player-card strong{font-size:16px!important;overflow-wrap:anywhere}.match-lobby-head small{font-size:10px!important}.strip-player strong{font-size:12px!important}.strip-player small{font-size:8px!important}.strip-room{padding:0 7px!important}.strip-room b{font-size:11px!important}.online-toast{font-size:11px!important;line-height:1.25!important}
}
@media(max-width:390px){
  .arcade-home .home-game-grid{gap:10px}.arcade-home .game-tile{min-height:168px}.arcade-home .tile-visual{min-height:86px}.arcade-home .tile-visual span{width:72px;height:72px;font-size:48px}.arcade-home .tile-visual .roulette-wheel{width:72px;height:72px}.arcade-home .tile-copy strong{font-size:17px}.arcade-home .tile-copy small{font-size:10.5px}.arcade-home .tile-badge{font-size:11px;padding:5px 9px}.arcade-feature-card{padding:18px 14px}.arcade-hero-inner{grid-template-columns:minmax(0,1fr) 78px}.arcade-mascot{width:76px;height:76px}.arcade-headphones{inset:16px 6px 12px;border-width:5px}.arcade-mascot-face::before{left:15px;top:25px;font-size:17px;letter-spacing:5px}.arcade-mascot-face::after{left:34px;top:42px;font-size:20px}.arcade-crown{right:7px;top:-7px;font-size:20px}
}


/* Home grid: neutralize older hub rules with stronger selectors. */
body[data-view="hub"] #offlineLibrary.home-game-grid,
body[data-view="hub"] #onlineLibrary.home-game-grid{
  display:grid!important;width:100%!important;height:auto!important;min-height:0!important;margin:0!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:auto!important;gap:16px!important;align-items:stretch!important;
}
body[data-view="hub"] #offlineLibrary.home-game-grid .game-tile,
body[data-view="hub"] #onlineLibrary.home-game-grid .game-tile{
  display:grid!important;width:auto!important;height:auto!important;min-height:218px!important;
  grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto minmax(112px,1fr) auto!important;
  column-gap:0!important;row-gap:0!important;padding:12px!important;align-items:stretch!important;overflow:hidden!important;
}
body[data-view="hub"] #offlineLibrary.home-game-grid .tile-badge,
body[data-view="hub"] #onlineLibrary.home-game-grid .tile-badge{grid-column:1!important;grid-row:1!important;margin:0!important;justify-self:start!important}
body[data-view="hub"] #offlineLibrary.home-game-grid .tile-visual,
body[data-view="hub"] #onlineLibrary.home-game-grid .tile-visual{grid-column:1!important;grid-row:2!important;width:100%!important;margin-top:10px!important;align-self:stretch!important}
body[data-view="hub"] #offlineLibrary.home-game-grid .tile-copy,
body[data-view="hub"] #onlineLibrary.home-game-grid .tile-copy{grid-column:1!important;grid-row:3!important;margin-top:10px!important;padding:0!important;align-self:auto!important;text-align:center!important}
body[data-view="hub"] #offlineLibrary.home-game-grid .tile-copy strong,
body[data-view="hub"] #onlineLibrary.home-game-grid .tile-copy strong{display:block!important;overflow:visible!important;-webkit-line-clamp:unset!important;line-clamp:unset!important;white-space:normal!important;font-size:clamp(18px,1.5vw,24px)!important;line-height:1.12!important}
body[data-view="hub"] #offlineLibrary.home-game-grid .tile-copy small,
body[data-view="hub"] #onlineLibrary.home-game-grid .tile-copy small{display:block!important;overflow:visible!important;-webkit-line-clamp:unset!important;line-clamp:unset!important;white-space:normal!important;font-size:11px!important;line-height:1.4!important}

/* Bright casual arcade roulette */
body[data-view="luck-game"] .luck-game-screen[data-game="roulette"] .luck-bg{
  background:radial-gradient(circle at 14% 10%,rgba(255,220,88,.42),transparent 24%),radial-gradient(circle at 86% 8%,rgba(173,126,255,.25),transparent 25%),linear-gradient(155deg,#bcecff,#f4efff 55%,#fff5e4)!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="roulette"] .roulette-play{
  border:2px solid rgba(255,255,255,.95)!important;border-radius:24px!important;
  background:radial-gradient(circle at 50% 34%,rgba(255,220,101,.28),transparent 38%),radial-gradient(circle at 15% 15%,rgba(105,174,255,.12) 0 2px,transparent 3px),linear-gradient(180deg,#ffffff,#edf5ff 58%,#f5efff)!important;
  background-size:auto,44px 44px,auto!important;box-shadow:0 18px 46px rgba(46,74,147,.13)!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="roulette"] .roulette-play::before{background:radial-gradient(circle,rgba(255,217,90,.25),rgba(122,108,255,.09) 52%,transparent 72%)!important}
body[data-view="luck-game"] .luck-game-screen[data-game="roulette"] .roulette-play-head{color:#7081b0!important}
body[data-view="luck-game"] .luck-game-screen[data-game="roulette"] .roulette-play-head b{color:#e09100!important}
body[data-view="luck-game"] .luck-game-screen[data-game="roulette"] .roulette-wheel-box{filter:drop-shadow(0 18px 28px rgba(72,75,137,.22))!important}
body[data-view="luck-game"] .luck-game-screen[data-game="roulette"] .roulette-result-dock{
  border:2px solid #dfe7ff!important;background:rgba(255,255,255,.92)!important;color:#293f8d!important;box-shadow:0 10px 26px rgba(52,75,143,.1)!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="roulette"] .roulette-result-dock small{color:#8a72d6!important}
body[data-view="luck-game"] .luck-game-screen[data-game="roulette"] .roulette-result-dock strong{color:#32488f!important}
body[data-view="luck-game"] .luck-game-screen[data-game="roulette"] .roulette-record-line{color:#7c8cb6!important}
body[data-view="luck-game"] .luck-game-screen[data-game="roulette"] .roulette-mini-stats{border:2px solid #dfe7ff!important;background:rgba(255,255,255,.86)!important}
body[data-view="luck-game"] .luck-game-screen[data-game="roulette"] .roulette-mini-stat+.roulette-mini-stat{border-left-color:#e2e9ff!important}
body[data-view="luck-game"] .luck-game-screen[data-game="roulette"] .roulette-mini-stat small{color:#7e8cb1!important}
body[data-view="luck-game"] .luck-game-screen[data-game="roulette"] .roulette-mini-stat strong{color:#32488f!important}
body[data-view="luck-game"] .luck-game-screen[data-game="roulette"] .roulette-mini-stat:nth-child(2) strong{color:#e49900!important}
body[data-view="luck-game"] .luck-game-screen[data-game="roulette"] .roulette-mini-stat:nth-child(3) strong{color:#23a471!important}
body[data-view="luck-game"] .luck-game-screen[data-game="roulette"] .roulette-spin{background:linear-gradient(180deg,#ff7fb5,#ff5e99)!important;border:2px solid rgba(255,255,255,.85)!important;box-shadow:0 7px 0 #d8417e,0 14px 28px rgba(255,91,151,.22)!important}
body[data-view="luck-game"] .luck-game-screen[data-game="roulette"] .roulette-result{background:linear-gradient(180deg,#fff,#f3f6ff)!important;border:2px solid #dce7ff!important;box-shadow:0 24px 60px rgba(47,70,142,.2)!important}
body[data-view="luck-game"] .luck-game-screen[data-game="roulette"] .roulette-result small{color:#8a72d6!important}.luck-game-screen[data-game="roulette"] .roulette-result strong{color:#293f8d!important;text-shadow:none!important}.luck-game-screen[data-game="roulette"] .roulette-result-actions button{background:#eef4ff!important;border-color:#dce6ff!important;color:#41578f!important}.luck-game-screen[data-game="roulette"] .roulette-result-actions .again{background:linear-gradient(180deg,#6c9cff,#765ff1)!important;color:white!important}

/* Scratch game: brighten the dark ticket presentation while keeping symbols readable. */
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .luck-bg{background:radial-gradient(circle at 15% 12%,rgba(255,225,94,.4),transparent 25%),radial-gradient(circle at 86% 18%,rgba(236,126,186,.24),transparent 24%),linear-gradient(160deg,#c8efff,#f5efff 55%,#fff3de)!important}
body[data-view="luck-game"] .scratch-pick-layout{color:#2b3e82!important}
body[data-view="luck-game"] .scratch-nine-kicker{color:#7a66d7!important}
body[data-view="luck-game"] .scratch-nine-title{color:#243780!important;text-shadow:none!important}
body[data-view="luck-game"] .scratch-nine-subtitle{color:#7485ae!important}
body[data-view="luck-game"] .scratch-outcome-key,
body[data-view="luck-game"] .scratch-nine-progress,
body[data-view="luck-game"] .scratch-ticket-status,
body[data-view="luck-game"] .scratch-mini-stats{background:rgba(255,255,255,.86)!important;border-color:#dfe7ff!important;color:#354b8c!important;box-shadow:0 10px 24px rgba(52,74,143,.08)!important}
body[data-view="luck-game"] .scratch-nine-ticket{background:linear-gradient(180deg,#fff8c9,#ffe493)!important;border-color:#ffc85a!important;box-shadow:0 18px 38px rgba(197,133,30,.17)!important}
body[data-view="luck-game"] .scratch-nine-brand strong{color:#744c00!important}.scratch-nine-brand small{color:#a56e00!important}.scratch-nine-rule{background:#fff!important;color:#a06a00!important;border-color:#ffd477!important}
body[data-view="luck-game"] .scratch-nine-grid{background:rgba(255,255,255,.38)!important}.scratch-choice-cell{border-color:rgba(255,255,255,.82)!important;box-shadow:0 6px 13px rgba(132,84,23,.12)!important}.scratch-pick-cover{background:linear-gradient(145deg,#7d69ff,#ff70ae)!important;color:#fff!important}

@media(max-width:820px){
 body[data-view="hub"] #offlineLibrary.home-game-grid,body[data-view="hub"] #onlineLibrary.home-game-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 body[data-view="hub"] #offlineLibrary.home-game-grid .game-tile,body[data-view="hub"] #onlineLibrary.home-game-grid .game-tile{min-height:174px!important;grid-template-rows:auto 88px auto!important;padding:9px!important}
 body[data-view="hub"] #offlineLibrary.home-game-grid .tile-visual,body[data-view="hub"] #onlineLibrary.home-game-grid .tile-visual{min-height:82px!important;margin-top:7px!important}
 body[data-view="hub"] #offlineLibrary.home-game-grid .tile-copy,body[data-view="hub"] #onlineLibrary.home-game-grid .tile-copy{margin-top:7px!important}
 body[data-view="hub"] #offlineLibrary.home-game-grid .tile-copy strong,body[data-view="hub"] #onlineLibrary.home-game-grid .tile-copy strong{font-size:17px!important;line-height:1.08!important}
 body[data-view="hub"] #offlineLibrary.home-game-grid .tile-copy small,body[data-view="hub"] #onlineLibrary.home-game-grid .tile-copy small{font-size:10.5px!important;line-height:1.32!important}
 body[data-view="hub"] #offlineLibrary.home-game-grid .tile-visual span,body[data-view="hub"] #onlineLibrary.home-game-grid .tile-visual span{max-width:100%!important}
 body[data-view="luck-game"] .luck-game-screen[data-game="roulette"] .roulette-play{min-height:500px!important}
}
@media(max-width:370px){
 body[data-view="hub"] #offlineLibrary.home-game-grid .game-tile,body[data-view="hub"] #onlineLibrary.home-game-grid .game-tile{min-height:170px!important;padding:8px!important}
 body[data-view="hub"] #offlineLibrary.home-game-grid .tile-copy strong,body[data-view="hub"] #onlineLibrary.home-game-grid .tile-copy strong{font-size:16px!important}
 body[data-view="hub"] #offlineLibrary.home-game-grid .tile-copy small,body[data-view="hub"] #onlineLibrary.home-game-grid .tile-copy small{font-size:10px!important}
}


body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-stage{
  border:2px solid rgba(255,255,255,.94)!important;
  background:radial-gradient(circle at 12% 10%,rgba(255,224,92,.28),transparent 22%),radial-gradient(circle at 88% 15%,rgba(255,130,188,.18),transparent 24%),linear-gradient(180deg,#f7fbff,#eef3ff 55%,#fff7e9)!important;
  box-shadow:0 18px 46px rgba(48,73,143,.12)!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-stage::before,
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-stage::after{color:rgba(118,95,224,.18)!important}
body[data-view="luck-game"] .scratch-pick-copy{padding:4px 2px!important}
body[data-view="luck-game"] .scratch-pick-copy .scratch-nine-title{color:#263a84!important;line-height:1.08!important;text-shadow:none!important}
body[data-view="luck-game"] .scratch-pick-copy .scratch-nine-progress{color:#667bad!important}
body[data-view="luck-game"] .scratch-match-meter span{background:rgba(255,255,255,.9)!important;border-color:#dfe7ff!important;color:#40558e!important}
body[data-view="luck-game"] .scratch-match-meter span i{color:#7c8db8!important}
body[data-view="luck-game"] .scratch-pick-copy .scratch-ticket-status{background:rgba(255,255,255,.92)!important;color:#435990!important;border:1px solid #dfe7ff!important}
body[data-view="luck-game"] .scratch-pick-copy .scratch-ticket-status.win{color:#a36800!important;background:#fff4c6!important}
body[data-view="luck-game"] .scratch-pick-copy .scratch-ticket-status.lose{color:#c7486e!important;background:#fff0f5!important}
body[data-view="luck-game"] .scratch-pick-copy .scratch-nine-stats{background:rgba(255,255,255,.86)!important;color:#40558e!important;border-color:#dfe7ff!important}
body[data-view="luck-game"] .scratch-pick-copy .scratch-mini-stat:nth-child(3),body[data-view="luck-game"] .scratch-pick-copy .scratch-mini-stat:nth-child(4){border-color:#e1e8ff!important}
@media(max-width:820px){
 body.mobile-game-fit[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-pick-stage{padding:4px 6px 7px!important}
 body.mobile-game-fit[data-view="luck-game"] .scratch-pick-copy .scratch-nine-title{font-size:21px!important;line-height:1.06!important}
 body.mobile-game-fit[data-view="luck-game"] .scratch-outcome-key{margin-top:3px!important}
 body.mobile-game-fit[data-view="luck-game"] .scratch-choice-ticket{width:min(51cqh,90vw,390px)!important}
}


/* Online intro / result overlays: same bright casual arcade language */
body[data-view="online-game"] .online-start-intro{
 background:radial-gradient(circle at 18% 12%,rgba(255,225,90,.38),transparent 23%),radial-gradient(circle at 84% 16%,rgba(176,129,255,.26),transparent 25%),linear-gradient(180deg,rgba(197,237,255,.94),rgba(241,241,255,.97) 55%,rgba(255,246,226,.98))!important;
 backdrop-filter:blur(10px)!important;
}
body[data-view="online-game"] .online-start-intro::before{opacity:.35!important}
body[data-view="online-game"] .online-start-card{
 background:linear-gradient(180deg,#fff,#eef5ff)!important;border:2px solid rgba(255,255,255,.95)!important;box-shadow:0 26px 70px rgba(45,73,146,.2)!important;color:#273b82!important;
}
body[data-view="online-game"] .online-start-kicker{color:#765ee2!important}
body[data-view="online-game"] .online-start-card h2{color:#263a83!important;text-shadow:none!important}
body[data-view="online-game"] .online-start-prompt{background:linear-gradient(180deg,#fff8c6,#ffec9a)!important;border-color:#ffd66e!important;color:#7c5200!important;box-shadow:0 10px 24px rgba(208,145,28,.12)!important}
body[data-view="online-game"] .online-start-prompt small,body[data-view="online-game"] .online-start-prompt span{color:#986a13!important}
body[data-view="online-game"] .online-start-rule{background:#fff!important;border:1px solid #dfe8ff!important;color:#40558e!important;box-shadow:0 8px 18px rgba(47,70,141,.07)!important}
body[data-view="online-game"] .online-start-rule b{background:linear-gradient(180deg,#e9e2ff,#ddd3ff)!important;color:#6b58db!important}
body[data-view="online-game"] .online-start-signal{color:#7385af!important}
body[data-view="online-game"] .online-start-progress{background:#e4eaff!important}
body[data-view="online-game"] .online-start-progress i{background:linear-gradient(90deg,#6ea7ff,#785ff0,#ff78ac)!important}
body[data-view="online-game"] .rps-match-over,body[data-view="online-game"] .word-round-overlay,body[data-view="online-game"] .word-win-overlay,body[data-view="online-game"] .yut-win-overlay{background:rgba(70,89,150,.22)!important;backdrop-filter:blur(9px)!important}
body[data-view="online-game"] .rps-match-card,body[data-view="online-game"] .word-round-card{background:linear-gradient(180deg,#fff,#eef5ff)!important;border:2px solid #dce7ff!important;box-shadow:0 24px 60px rgba(44,68,138,.2)!important;color:#273b82!important}
body[data-view="online-game"] .rps-match-card small,body[data-view="online-game"] .word-round-card small{color:#765ee0!important}.rps-match-card h3,.word-round-card h3{color:#263a82!important}.rps-match-card p,.word-round-card p{color:#7184ad!important}.word-match-scoreline{background:#edf3ff!important;color:#536aa0!important}.word-match-scoreline strong{color:#d89300!important}.online-rematch-btn{background:linear-gradient(180deg,#6fa6ff,#6d64ef)!important;box-shadow:0 7px 0 #4b4bc1!important}.online-result-exit-btn{background:#fff0f5!important;border-color:#ffd4df!important;color:#c44f73!important}

/* RPS brighter playfield details */
body[data-view="online-game"] .rps-score small,body[data-view="online-game"] .rps-hand-label,body[data-view="online-game"] .rps-center span{color:#7083ad!important}.rps-score.host strong{color:#28b47f!important}.rps-score.guest strong{color:#7a69e7!important}.rps-round{background:#eef3ff!important;color:#667aad!important}.rps-hand{background:radial-gradient(circle at 35% 28%,#fff,#edf3ff 65%,#e3ebff 66%)!important;border:2px solid #dfe8ff!important;filter:drop-shadow(0 18px 24px rgba(53,74,142,.15))!important}.rps-center b{color:#91a5d7!important}

/* Yut play panel */
body[data-view="online-game"] .yut-side-panel{background:linear-gradient(180deg,#fff,#eef5ff)!important;color:#2b3e82!important;border:2px solid #dce7ff!important;box-shadow:0 16px 34px rgba(46,70,141,.12)!important}
body[data-view="online-game"] .turn-banner{background:linear-gradient(180deg,#fff7c8,#ffec9a)!important;border-color:#ffd871!important;color:#8a6108!important}
body[data-view="online-game"] .yut-result-name strong{color:#2b3f84!important}.yut-result-name small{color:#7184ae!important}.yut-power-gauge{background:#e3eaff!important;border-color:#d6e1ff!important}.yut-power-gauge i{background:linear-gradient(90deg,#5aa7ff,#6e69ef,#ff74ab)!important}.yut-power-gauge b{color:#5269a0!important}.yut-throw-btn{background:linear-gradient(180deg,#ffbf4f,#ff923d)!important;color:#fff!important;box-shadow:0 7px 0 #db6e23,0 14px 28px rgba(244,132,50,.2)!important}.yut-move-queue{color:#7184ad!important}.yut-bench{background:#f7f9ff!important;border-color:#dce6ff!important}.yut-bench-head strong{color:#314786!important}.yut-bench-head span{color:#7486af!important}.yut-help{color:#7283a9!important}.yut-help b{color:#4c6095!important}

/* Word games */
body[data-view="online-game"] .word-match-banner{background:rgba(255,255,255,.9)!important;border-color:#dce7ff!important;color:#2d4287!important}.word-match-title small,.word-rule-copy{color:#7285ad!important}.word-round-step{background:#f2f5ff!important;border-color:#dce6ff!important;opacity:.75}.word-round-step i{color:#8290b0!important}.word-round-step strong{color:#344b8d!important}.word-round-step em{color:#26a476!important}.word-round-step.active{background:#e8f6ff!important;border-color:#91b9ff!important;box-shadow:0 0 18px rgba(84,136,236,.12)!important}.word-clock{border-color:#93b8ff!important;background:linear-gradient(90deg,#e7f6ff calc(var(--clock)*1%),#f0f3ff 0)!important;color:#34538e!important}.word-required-card{background:linear-gradient(180deg,#fff,#eef5ff)!important;border-color:#dce7ff!important}.word-required-head>small{color:#7285ae!important}.word-required-letter{background:linear-gradient(180deg,#4ecbc5,#289fac)!important;color:#fff!important;box-shadow:0 6px 0 #16777e!important}.word-required-card p{color:#7284ad!important}.word-head-rule{background:#fff3bd!important;color:#986810!important}.word-history-head strong{color:#2f4488!important}.word-history-head span{color:#7b8bae!important}.word-chip{background:#f2f5ff!important;color:#435993!important;border-color:#e0e7ff!important}.word-last-event{background:#eef5ff!important;color:#5269a0!important}.word-input{background:#fff!important;border:2px solid #dce6ff!important;color:#2c4084!important}.word-submit-btn{background:linear-gradient(180deg,#56cfc5,#28a8ae)!important;color:#fff!important;box-shadow:0 5px 0 #1b8088!important}.word-giveup-btn{background:#fff0f5!important;color:#c74d73!important;border-color:#ffd2df!important}.word-turn-wait{color:#7285ad!important}


/* Final home flow fix: every section owns its real content height. */
body[data-view="hub"]{
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
body[data-view="hub"] .app-shell{
  height:auto!important;
  max-height:none!important;
  min-height:100svh!important;
  overflow:visible!important;
}
#hubScreen.arcade-home{
  display:flex!important;
  flex-direction:column!important;
  height:auto!important;
  max-height:none!important;
  min-height:100svh!important;
  overflow:visible!important;
  align-items:stretch!important;
}
#hubScreen.arcade-home > *:not(.arcade-deco){
  flex:0 0 auto!important;
  min-width:0!important;
}
#hubScreen.arcade-home .home-section{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:0!important;
  overflow:visible!important;
  clear:both!important;
}
#hubScreen.arcade-home #offlineLibrary.home-game-grid,
#hubScreen.arcade-home #onlineLibrary.home-game-grid{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  display:grid!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow:visible!important;
  align-self:auto!important;
  align-content:start!important;
  grid-auto-flow:row!important;
  grid-template-rows:none!important;
}
#hubScreen.arcade-home #offlineLibrary.home-game-grid .game-tile,
#hubScreen.arcade-home #onlineLibrary.home-game-grid .game-tile{
  position:relative!important;
  inset:auto!important;
  transform:none;
  height:auto!important;
  max-height:none!important;
  align-self:stretch!important;
}
#hubScreen.arcade-home #onlineHomeTitle{scroll-margin-top:20px}

/* Top visitor pill */
#todayVisitorCount.arcade-floating-pill{white-space:nowrap}
#todayVisitorCount.arcade-floating-pill b{font-size:17px;color:#fff8b9}

/* Three random recommendations */
.random-recommend-section{
  position:relative;
  z-index:2;
  width:100%;
  padding:20px;
  border:4px solid rgba(255,255,255,.82);
  border-radius:30px;
  background:
    radial-gradient(circle at 12% 10%,rgba(255,236,119,.22),transparent 24%),
    radial-gradient(circle at 90% 8%,rgba(255,135,208,.18),transparent 22%),
    linear-gradient(135deg,#6546ef,#8b4cff 50%,#b54fdc);
  box-shadow:0 20px 44px rgba(82,57,190,.22);
  overflow:hidden;
}
.random-recommend-section::after{
  content:"✦  ✧  ✦";
  position:absolute;
  right:18px;
  bottom:10px;
  color:rgba(255,255,255,.18);
  font-size:34px;
  letter-spacing:10px;
  pointer-events:none;
}
.random-recommend-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.random-recommend-kicker{
  display:block;
  color:#ffe880;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.14em;
}
.random-recommend-head h2{
  margin:4px 0 0;
  color:#fff;
  font-size:clamp(27px,2.5vw,38px);
  line-height:1;
  letter-spacing:-.045em;
  text-shadow:0 6px 18px rgba(49,15,101,.26);
}
.random-recommend-head small{
  color:rgba(255,255,255,.78);
  font-size:13px;
  font-weight:800;
  text-align:right;
}
.random-recommend-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  width:100%;
}
.random-game-card{
  position:relative;
  min-width:0;
  min-height:176px;
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  grid-template-rows:auto 1fr auto;
  gap:4px 13px;
  align-items:center;
  padding:15px;
  border:2px solid rgba(255,255,255,.75);
  border-radius:24px;
  background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(245,247,255,.94));
  color:#24357e;
  text-align:left;
  box-shadow:0 12px 26px rgba(48,24,112,.18),inset 0 1px 0 #fff;
  overflow:hidden;
}
.random-game-card:hover{transform:translateY(-3px);box-shadow:0 17px 30px rgba(48,24,112,.23),inset 0 1px 0 #fff}
.random-game-card:active{transform:translateY(1px)}
.random-game-card .recommend-icon{
  grid-column:1;
  grid-row:1/4;
  width:88px;
  height:112px;
  display:grid;
  place-items:center;
  border-radius:21px;
  background:var(--rec-bg,linear-gradient(180deg,#dff3ff,#eef2ff));
  font-size:54px;
  box-shadow:inset 0 5px 16px rgba(255,255,255,.55);
}
.random-game-card .recommend-label{
  justify-self:start;
  padding:5px 9px;
  border-radius:999px;
  background:var(--rec-accent,#5d87ff);
  color:#fff;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.08em;
}
.random-game-card strong{
  display:block;
  min-width:0;
  color:#223680;
  font-size:clamp(20px,1.7vw,27px);
  line-height:1.08;
  letter-spacing:-.045em;
  white-space:normal;
  overflow-wrap:anywhere;
}
.random-game-card small{
  display:block;
  min-width:0;
  color:#7182ad;
  font-size:11px;
  font-weight:750;
  line-height:1.35;
  white-space:normal;
  overflow-wrap:anywhere;
}
.random-game-card .recommend-go{
  align-self:end;
  color:var(--rec-accent,#5d87ff);
  font-size:12px;
  font-weight:1000;
}

@media (min-width:821px){
  body[data-view="hub"] .app-shell{
    width:min(97vw,1800px)!important;
    margin:1.5vh auto!important;
  }
  #hubScreen.arcade-home{gap:24px!important;padding-bottom:32px!important}
  #hubScreen.arcade-home #offlineLibrary.home-game-grid,
  #hubScreen.arcade-home #onlineLibrary.home-game-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    grid-auto-rows:minmax(218px,auto)!important;
    gap:16px!important;
  }
  #hubScreen.arcade-home #offlineLibrary.home-game-grid .game-tile,
  #hubScreen.arcade-home #onlineLibrary.home-game-grid .game-tile{
    min-height:218px!important;
  }
  #hubScreen.arcade-home .home-section + .home-section{margin-top:4px!important}
}

@media (min-width:821px) and (max-width:1100px){
  #hubScreen.arcade-home #offlineLibrary.home-game-grid,
  #hubScreen.arcade-home #onlineLibrary.home-game-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:minmax(218px,auto)!important;
  }
  .random-recommend-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .random-game-card{grid-template-columns:72px minmax(0,1fr);padding:12px;gap:4px 9px}
  .random-game-card .recommend-icon{width:68px;height:100px;font-size:43px}
  .random-game-card strong{font-size:19px}
}

@media (max-width:820px){
  body[data-view="hub"] .app-shell{overflow:visible!important}
  #hubScreen.arcade-home{height:auto!important;overflow:visible!important}
  .random-recommend-section{padding:16px 12px;border-radius:26px}
  .random-recommend-head{align-items:start;flex-direction:column;gap:5px;margin-bottom:11px}
  .random-recommend-head small{text-align:left;font-size:11px}
  .random-recommend-grid{
    display:flex;
    gap:10px;
    overflow-x:auto;
    padding:1px 2px 8px;
    scroll-snap-type:x mandatory;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }
  .random-game-card{
    flex:0 0 min(86vw,330px);
    min-height:150px;
    grid-template-columns:76px minmax(0,1fr);
    padding:12px;
    border-radius:20px;
    scroll-snap-align:start;
  }
  .random-game-card .recommend-icon{width:70px;height:96px;border-radius:17px;font-size:43px}
  .random-game-card strong{font-size:20px}
  .random-game-card small{font-size:10.5px}
}


/* Final premium home polish */
body[data-view="hub"] .app-shell{background:#f6f7fb!important}
#hubScreen.arcade-home{
  background:
    radial-gradient(circle at 14% 6%,rgba(255,255,255,.34),transparent 17%),
    radial-gradient(circle at 88% 7%,rgba(255,218,95,.16),transparent 15%),
    linear-gradient(180deg,#109cf4 0,#4bb2ff 25%,#eef3fb 52%,#f7f7fb 100%)!important;
}
.arcade-topbar{min-height:44px;gap:12px}
.arcade-brand-mini{display:flex;align-items:center;gap:8px;color:#fff;font-size:12px;font-weight:1000;letter-spacing:.12em;text-shadow:0 2px 10px rgba(24,69,157,.22)}
.arcade-brand-mini span{width:36px;height:36px;display:grid;place-items:center;border-radius:13px;background:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.45);font-size:21px}
.arcade-top-actions-compact{display:flex;align-items:center;gap:8px;margin-left:auto}
.recent-game-quick{min-height:36px!important;height:36px;padding:0 12px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:rgba(255,255,255,.18);backdrop-filter:blur(12px);color:#fff;box-shadow:0 8px 18px rgba(31,76,164,.12);display:flex;align-items:center;gap:7px;font-size:11px;font-weight:900;white-space:nowrap}
.recent-game-quick span{font-size:16px}.recent-game-quick:disabled{opacity:.62;cursor:default}.recent-game-quick:not(:disabled):hover{background:rgba(255,255,255,.28);transform:translateY(-1px)}
.arcade-floating-pill{min-height:36px!important;height:36px;padding:0 11px!important;gap:5px!important;font-size:11px!important;white-space:nowrap}.arcade-floating-pill em{width:24px!important;height:24px!important;font-size:14px}
.arcade-hero-card{padding:12px 18px 8px!important;background:transparent!important}
.arcade-home h1{font-weight:1000!important;line-height:.91!important}.arcade-home h1 .hero-accent{color:#ffe24c!important;text-shadow:-2px -2px 0 #773bed,2px -2px 0 #773bed,-2px 2px 0 #773bed,2px 2px 0 #773bed,0 8px 20px rgba(36,54,160,.24)!important}
.arcade-home h1 span:not(.hero-accent){background:linear-gradient(90deg,#fff 0 20%,#8bdcff 20% 42%,#ff87cb 42% 62%,#fff 62% 78%,#7fdaff 78%);-webkit-background-clip:text;background-clip:text;color:transparent!important;text-shadow:none!important;-webkit-text-stroke:3px #2944a9;filter:drop-shadow(0 8px 14px rgba(27,64,155,.22))}
.arcade-kicker{background:linear-gradient(180deg,#8562ff,#674bd9)!important;border:2px solid rgba(255,255,255,.45);box-shadow:0 9px 18px rgba(73,60,185,.2)!important}
.arcade-mascot{box-shadow:0 14px 32px rgba(23,76,169,.2),inset 0 2px 0 #fff!important}
.random-recommend-section{position:relative;overflow:visible;padding:18px 20px 34px!important;border-radius:34px!important;background:linear-gradient(180deg,#1a1f2d 0%,#0f131d 100%)!important;border:10px solid #2d3240!important;box-shadow:0 24px 48px rgba(5,8,20,.42), inset 0 0 0 2px rgba(255,255,255,.05)!important}
.random-recommend-section::before,.random-recommend-section::after{content:"";position:absolute;bottom:-36px;width:8px;height:54px;border-radius:999px;background:linear-gradient(180deg,#5f6674,#242a35);box-shadow:0 8px 14px rgba(0,0,0,.32)}.random-recommend-section::before{left:12%;transform:rotate(18deg);transform-origin:top center}.random-recommend-section::after{right:12%;transform:rotate(-18deg);transform-origin:top center}
.random-recommend-kicker{color:#ff6a6a!important;letter-spacing:.18em!important}.random-recommend-head{align-items:center!important;margin-bottom:12px!important}.random-recommend-head h2{font-size:clamp(28px,2.6vw,42px)!important;color:#f5f8ff!important;text-shadow:0 2px 12px rgba(0,0,0,.35)}.recommend-controls{display:flex;align-items:center;gap:9px;position:relative;z-index:2}.recommend-controls>button{width:36px;height:36px;min-height:36px!important;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;font-size:27px;line-height:1;box-shadow:0 7px 14px rgba(0,0,0,.24)}.recommend-controls>button:hover{background:rgba(255,255,255,.16)}
.recommend-dots{display:flex;gap:6px}.recommend-dots button{width:8px;height:8px;min-height:8px!important;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.28);transition:.2s}.recommend-dots button.active{width:23px;background:#7fffd4}
.recommend-viewport{position:relative;z-index:1;overflow:hidden;border-radius:24px;padding:10px;background:linear-gradient(180deg,#0c1018,#151b29);box-shadow:inset 0 0 0 2px rgba(255,255,255,.04), inset 0 0 24px rgba(0,0,0,.45)}.recommend-viewport::before{content:"";position:absolute;inset:0;border-radius:24px;border:1px solid rgba(255,255,255,.06);pointer-events:none}.recommend-viewport::after{content:"";position:absolute;inset:12px;border-radius:14px;background:linear-gradient(135deg,rgba(255,255,255,.14),transparent 24%,transparent 70%,rgba(255,255,255,.06));pointer-events:none}.random-recommend-grid{display:flex!important;grid-template-columns:none!important;gap:0!important;width:100%!important;overflow:visible!important;padding:0!important}.random-game-card{flex:0 0 100%!important;width:100%!important;min-height:218px!important;display:grid!important;grid-template-columns:minmax(180px,.78fr) minmax(0,1.22fr)!important;grid-template-rows:1fr!important;gap:22px!important;align-items:center!important;padding:18px 22px!important;border:2px solid rgba(255,255,255,.78)!important;border-radius:24px!important;background:linear-gradient(160deg,rgba(255,255,255,.99),rgba(245,247,255,.97))!important;box-shadow:0 14px 28px rgba(47,23,112,.17),inset 0 2px 0 #fff!important;scroll-snap-align:none!important;text-align:left!important;overflow:hidden!important}
.random-game-card:hover{transform:none!important}.recommend-art{display:grid;place-items:center;min-height:178px;border-radius:22px;overflow:hidden;background:#eef4ff}.recommend-art>.game-art{width:100%;height:178px;display:block}.recommend-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.recommend-label{padding:6px 10px;border-radius:999px;background:linear-gradient(180deg,#ff764f,#ff4a42);color:#fff;font-size:10px;font-weight:1000;letter-spacing:.12em}.random-game-card strong{margin-top:10px!important;font-size:clamp(31px,3vw,48px)!important;line-height:1!important;color:#203589!important}.random-game-card small{margin-top:8px!important;max-width:590px;font-size:14px!important;line-height:1.55!important;color:#6f82b3!important}.recommend-go{margin-top:18px;padding:12px 18px;border-radius:999px;background:linear-gradient(180deg,#ffe36a,#ffbd20);color:#8a4c00!important;font-size:14px!important;font-weight:1000!important;box-shadow:0 6px 0 #e9a513}.recommend-go b{font-size:20px;vertical-align:-1px}
.random-banner-card{position:relative;flex:0 0 100%!important;width:100%!important;min-height:218px!important;display:grid!important;grid-template-columns:1fr!important;gap:0!important;align-items:stretch!important;padding:12px!important;border:2px solid rgba(255,255,255,.08)!important;border-radius:20px!important;background:linear-gradient(180deg,#020409,#0c1018)!important;box-shadow:0 18px 32px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.03)!important;overflow:hidden!important}
.random-banner-card img{display:block;width:100%;height:100%;min-height:218px;object-fit:contain;background:#111723;border-radius:12px;padding:8px}
.random-banner-card .banner-placeholder{display:grid;place-items:center;min-height:218px;font-size:16px;font-weight:900;color:#dbe7ff;background:#111723;border-radius:12px}
@media(max-width:820px){.random-banner-card,.random-banner-card img,.random-banner-card .banner-placeholder{min-height:188px!important}.random-banner-card img{padding:4px}}
@media(max-width:390px){.random-banner-card,.random-banner-card img,.random-banner-card .banner-placeholder{min-height:188px!important}.random-banner-card img{padding:2px}}
.arcade-home .game-tile{border:2px solid rgba(255,255,255,.98)!important;background:linear-gradient(180deg,#fff,#f7f8ff)!important;box-shadow:0 14px 30px rgba(47,70,145,.12),0 3px 0 rgba(203,214,243,.8)!important}.arcade-home .game-tile:hover{transform:translateY(-4px)!important;box-shadow:0 20px 36px rgba(47,70,145,.17),0 3px 0 rgba(203,214,243,.8)!important}.arcade-home .tile-visual{padding:0!important;overflow:hidden!important;background:transparent!important;box-shadow:none!important}.arcade-home .tile-visual>.game-art{width:100%!important;height:100%!important;min-height:118px;display:block;border-radius:20px}.arcade-home .tile-copy strong{font-weight:1000!important}.home-section-head h3{font-weight:1000!important}
.arcade-home .tile-visual.yut-home-art{display:block!important;min-height:118px!important;width:100%!important;background:transparent!important}.arcade-home .tile-visual.yut-home-art>.game-art{display:block;width:100%!important;height:100%!important;min-height:118px!important;border-radius:20px;transform:scale(1.02);transform-origin:center center}@media(max-width:480px){.arcade-home .tile-visual.yut-home-art{min-height:100px!important}.arcade-home .tile-visual.yut-home-art>.game-art{min-height:100px!important}}

.arcade-bottom-nav,.arcade-quick-menu{display:none!important}.arcade-version-footer{text-align:center;padding:8px 0 2px;color:#a3adc7;font-size:10px;font-weight:800;letter-spacing:.08em}
@media(max-width:820px){
  .arcade-topbar{align-items:flex-start}.arcade-brand-mini b{display:none}.arcade-top-actions-compact{gap:5px}.recent-game-quick{max-width:158px;padding:0 9px;font-size:10px}.recent-game-quick b{overflow:hidden;text-overflow:ellipsis}.arcade-floating-pill{padding:0 8px!important}.arcade-floating-pill span:first-of-type{display:none}
  .arcade-hero-card{padding:8px 4px 4px!important}.arcade-home .arcade-sub{max-width:88%!important}
  .random-recommend-section{padding:15px 12px 28px!important;border-radius:26px!important;border-width:8px!important}.random-recommend-head{flex-direction:row!important;align-items:center!important;gap:10px!important}.random-recommend-head h2{font-size:28px!important}.random-recommend-kicker{font-size:10px!important}.recommend-controls{gap:6px}.recommend-controls>button{width:32px;height:32px;min-height:32px!important;font-size:23px}.recommend-dots{gap:4px}.recommend-dots button{width:6px;height:6px;min-height:6px!important}.recommend-dots button.active{width:16px}.random-recommend-section::before,.random-recommend-section::after{bottom:-26px;width:6px;height:38px}.random-recommend-section::before{left:10%;transform:rotate(16deg)}.random-recommend-section::after{right:10%;transform:rotate(-16deg)}
  .random-game-card{min-height:188px!important;grid-template-columns:42% minmax(0,1fr)!important;gap:11px!important;padding:11px!important;border-radius:20px!important}.recommend-art{min-height:160px;border-radius:18px}.recommend-art>.game-art{height:160px}.random-game-card strong{font-size:clamp(23px,7vw,31px)!important;margin-top:7px!important}.random-game-card small{font-size:11px!important;line-height:1.4!important;margin-top:5px!important}.recommend-label{font-size:8px;padding:4px 7px}.recommend-go{margin-top:10px;padding:9px 12px;font-size:11px!important;box-shadow:0 4px 0 #e9a513}
  .arcade-home .tile-visual>.game-art{min-height:90px}.arcade-version-footer{font-size:9px;padding-bottom:4px}
}
@media(max-width:390px){.recent-game-quick{max-width:132px}.recent-game-quick span{display:none}.arcade-floating-pill em{display:none}.random-game-card{grid-template-columns:40% minmax(0,1fr)!important}.recommend-art,.recommend-art>.game-art{min-height:145px;height:145px}.random-game-card small{display:-webkit-box!important;-webkit-line-clamp:3;line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}}


/* V5: richer, game-like play screens while preserving existing game logic */
:root{--arc-blue:#2388ff;--arc-blue2:#68c9ff;--arc-purple:#7857ff;--arc-pink:#ff5f9b;--arc-yellow:#ffd84c;--arc-ink:#20347e;--arc-shadow:0 18px 45px rgba(30,67,150,.18)}
body[data-view="game"],body[data-view="result"],body[data-view="fish-game"],body[data-view="luck-game"],body[data-view="online-game"]{background:radial-gradient(circle at 15% 8%,rgba(255,239,125,.28),transparent 19%),radial-gradient(circle at 88% 12%,rgba(180,128,255,.22),transparent 22%),linear-gradient(155deg,#39adff 0,#6079fa 44%,#7f55e8 100%)!important}
body[data-view="game"] .app-shell,body[data-view="result"] .app-shell,body[data-view="fish-game"] .app-shell,body[data-view="luck-game"] .app-shell,body[data-view="online-game"] .app-shell{border-color:rgba(255,255,255,.66)!important;box-shadow:0 30px 85px rgba(22,44,126,.32)!important}
.game-titlebar,.fish-game-titlebar,.luck-topbar,.online-topbar{background:linear-gradient(180deg,rgba(24,63,170,.94),rgba(24,46,130,.9))!important;border-bottom:1px solid rgba(255,255,255,.22)!important;box-shadow:0 10px 24px rgba(18,31,97,.22)!important;backdrop-filter:blur(16px)}
.game-titlebar h2,.fish-page-title h2,.luck-title h2,.online-title-wrap h2{color:#fff!important;text-shadow:0 3px 10px rgba(8,28,91,.28)!important}.game-titlebar .game-status,.fish-page-title small,.luck-title small,.online-title-wrap small{color:#9fe5ff!important}.title-btn,.fish-title-actions .title-btn,.luck-back-btn,.online-leave-btn{background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.09))!important;color:#fff!important;border:1px solid rgba(255,255,255,.28)!important;box-shadow:inset 0 1px rgba(255,255,255,.35),0 7px 15px rgba(16,37,111,.16)!important}
/* Ladder = toy board */
body[data-view="game"] #step4{background:radial-gradient(circle at 18% 18%,rgba(255,255,255,.38),transparent 15%),linear-gradient(180deg,#5ac4ff 0,#8fe5ff 24%,#e9f8ff 24%,#f9fbff 100%)!important}
body[data-view="game"] .playfield{padding:clamp(10px,1.4vw,22px)!important;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.2))!important}
body[data-view="game"] .ladder-paper{border:4px solid rgba(255,255,255,.9)!important;border-radius:30px!important;background:linear-gradient(180deg,#fffdfd,#f2f8ff)!important;box-shadow:0 24px 55px rgba(31,75,149,.24),inset 0 1px #fff!important}
body[data-view="game"] .paper-topbar{background:linear-gradient(90deg,#fff3b7,#ffe7f1 48%,#e6e2ff)!important;border-radius:24px 24px 0 0!important;border-bottom:2px solid #dfe9ff!important}.blind-title strong{color:#3250a5!important}.blind-dot{background:#ff5d83!important;box-shadow:0 0 0 5px rgba(255,93,131,.14),0 0 18px rgba(255,93,131,.35)!important}.ladder-toggle-btn,.paper-btn.strong,.primary-btn{background:linear-gradient(180deg,#ffdf4e,#ffb814)!important;color:#793b00!important;border-color:#ffdb4d!important;box-shadow:0 6px 0 #df9207,0 12px 25px rgba(241,167,16,.25)!important}.label-pill,.top-label,.bottom-label{filter:drop-shadow(0 5px 8px rgba(50,83,153,.12))}
/* Fishing = bright seaside game */
body[data-view="fish-game"] .fishing-scene{background:linear-gradient(180deg,#42bfff 0%,#9ee9ff 34%,#36b9dd 35%,#087fae 100%)!important}.sea-sky-glow{background:radial-gradient(circle at 50% -6%,rgba(255,252,202,.9),rgba(255,255,255,0) 45%)!important}.fish-sun{box-shadow:0 0 0 12px rgba(255,240,125,.18),0 0 70px rgba(255,226,84,.55)!important}.fish-hud{background:linear-gradient(180deg,rgba(18,83,183,.84),rgba(18,50,130,.78))!important;border:1px solid rgba(255,255,255,.35)!important;box-shadow:0 12px 26px rgba(0,62,130,.22)!important}.fishing-start-btn{background:linear-gradient(180deg,#ffe763,#ffae20)!important;color:#743500!important;box-shadow:0 8px 0 #d98108,0 15px 28px rgba(229,132,6,.28)!important}.fish-result-card{border:2px solid rgba(255,255,255,.72)!important;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(230,247,255,.88))!important;color:#21417f!important;box-shadow:0 20px 44px rgba(12,72,130,.22)!important}
/* Luck games = individual arcade stages */
body[data-view="luck-game"] .luck-game-screen{background:linear-gradient(150deg,#2f78ff,#5b61ed 46%,#7e4fe0)!important}.luck-game-screen .luck-bg{opacity:1!important;background:radial-gradient(circle at 20% 14%,rgba(255,226,92,.22),transparent 18%),radial-gradient(circle at 84% 20%,rgba(255,116,190,.24),transparent 20%),linear-gradient(150deg,#217bff,#7551e9)!important}.luck-main{border:2px solid rgba(255,255,255,.45)!important;background:linear-gradient(155deg,rgba(15,43,139,.74),rgba(52,30,131,.8))!important;box-shadow:0 24px 60px rgba(20,27,99,.32),inset 0 1px rgba(255,255,255,.2)!important}.luck-main::after{content:"✦  ·  ✧  ·  ✦";position:absolute;right:3%;top:3%;color:rgba(255,238,137,.58);font-size:clamp(14px,1.6vw,25px);letter-spacing:.35em;pointer-events:none;animation:arcSpark 2.3s ease-in-out infinite alternate}.luck-prompt{color:#fff!important;text-shadow:0 4px 16px rgba(22,22,90,.3)!important}.luck-subprompt{color:#cce6ff!important}.luck-kicker{color:#ffe87a!important}.luck-choice{background:linear-gradient(180deg,#fff,#edf4ff)!important;border:2px solid #d9e7ff!important;color:#263c8c!important;box-shadow:0 7px 0 #ccd9f2,0 14px 25px rgba(14,35,104,.2)!important}.luck-choice.selected{background:linear-gradient(180deg,#fff4b8,#ffd750)!important;border-color:#ffd132!important;color:#7b4200!important;box-shadow:0 7px 0 #d8a50b,0 0 30px rgba(255,220,60,.36)!important}.luck-action{background:linear-gradient(180deg,#ff73b5,#ee3d91)!important;box-shadow:0 8px 0 #b62269,0 18px 35px rgba(224,50,133,.3)!important}.coin-face{border-color:#ffcf3e!important;background:radial-gradient(circle at 32% 26%,#fff9ca 0 7%,#ffe465 23%,#f7b825 62%,#cb7910 100%)!important;box-shadow:inset 0 0 0 6px rgba(255,255,255,.24),inset -13px -16px 22px rgba(112,60,0,.18),0 22px 45px rgba(10,21,80,.34)!important}.card-back{background:repeating-linear-gradient(45deg,#4c45d9 0 7px,#6b5dff 7px 14px)!important;border:4px solid #fff!important}.number-reactor{filter:drop-shadow(0 18px 30px rgba(16,27,100,.28))}.reactor-ring{border-top-color:#ffe85a!important;border-bottom-color:#59eaff!important}.energy-core{box-shadow:0 0 28px rgba(255,194,74,.55),0 0 95px rgba(255,76,159,.28),inset -18px -22px 38px rgba(55,5,75,.28)!important}
.luck-game-screen[data-game="coin"] .luck-bg{background:radial-gradient(circle at 50% 42%,rgba(255,214,77,.32),transparent 30%),linear-gradient(145deg,#166bdc,#4c55db 55%,#6746cc)!important}.luck-game-screen[data-game="highlow"] .luck-bg{background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.12),transparent 30%),linear-gradient(145deg,#153d9c,#633eb9)!important}.luck-game-screen[data-game="oddeven"] .luck-bg{background:radial-gradient(circle at 50% 45%,rgba(89,238,255,.22),transparent 30%),linear-gradient(145deg,#205fd1,#7646e3)!important}.luck-game-screen[data-game="enhance"] .luck-bg{background:radial-gradient(circle at 50% 48%,rgba(255,180,85,.24),transparent 28%),linear-gradient(145deg,#5a2aab,#e14685)!important}
.result-banner.show{animation:arcadeResultPop .42s cubic-bezier(.2,.8,.2,1)}
@keyframes arcadeResultPop{0%{opacity:0;scale:.75}70%{scale:1.06}100%{opacity:1;scale:1}}@keyframes arcSpark{to{transform:translateY(5px);filter:brightness(1.35)}}
/* Online = glossy arena */
body[data-view="online-game"] .online-game-screen{background:radial-gradient(circle at 50% -10%,#42bdff 0,#216fdf 30%,#353db2 63%,#25166d 100%)!important}.online-grid-bg{opacity:.18!important;background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px)!important}.online-title-icon{background:linear-gradient(180deg,#ffe15c,#ff9e21)!important;color:#763500!important;border:2px solid rgba(255,255,255,.68)!important;box-shadow:0 8px 20px rgba(254,170,30,.28)!important}.online-lobby-panel,.online-match-lobby{background:linear-gradient(155deg,rgba(255,255,255,.95),rgba(232,241,255,.92))!important;border:2px solid rgba(255,255,255,.9)!important;color:#24377f!important;box-shadow:0 24px 60px rgba(22,45,128,.28)!important}.online-lobby-copy h3{color:#fff!important;text-shadow:0 5px 18px rgba(19,41,122,.34)!important}.online-lobby-copy h3 em{color:#ffe667!important}.online-lobby-copy p{color:#d9ecff!important}.online-eyebrow,.online-feature-row span{background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.25)!important;color:#fff!important}.online-field-label,.online-room-card small,.online-room-box p{color:#6f82b2!important}.online-input{background:#fff!important;color:#25377d!important;border-color:#cedcff!important}.online-room-card{background:linear-gradient(180deg,#fff,#f1f5ff)!important;border-color:#dbe5ff!important;color:#23367f!important;box-shadow:0 10px 24px rgba(49,72,143,.09)!important}.online-room-card.create:hover{background:linear-gradient(180deg,#f2fff7,#e8fff4)!important;border-color:#8ce4bb!important}.room-code-entry button,.online-ready-btn,.online-ai-practice{background:linear-gradient(180deg,#54d895,#24aa69)!important;color:#fff!important;box-shadow:0 7px 0 #16814d!important}.online-game-content{background:linear-gradient(155deg,rgba(255,255,255,.92),rgba(226,237,255,.9))!important;border:2px solid rgba(255,255,255,.7)!important;box-shadow:0 18px 42px rgba(20,40,115,.2)!important}.online-player-strip{background:linear-gradient(180deg,rgba(21,53,154,.88),rgba(28,38,112,.9))!important;border-color:rgba(255,255,255,.22)!important}.strip-player strong,.strip-room b{color:#fff!important}.strip-player small,.strip-room span{color:#b8ddff!important}
.rps-stage{background:radial-gradient(circle at 50% 50%,rgba(255,226,91,.12),transparent 35%)!important}.rps-side-card{border:2px solid #dbe5ff!important;background:linear-gradient(180deg,#fff,#f1f5ff)!important}.rps-choice{border-radius:22px!important;background:linear-gradient(180deg,#fff,#edf3ff)!important;box-shadow:0 8px 0 #d2ddf4,0 15px 26px rgba(44,64,130,.15)!important}.rps-choice:hover:not(:disabled){transform:translateY(-5px) scale(1.02)!important}.rps-choice.selected{background:linear-gradient(180deg,#fff3b5,#ffda50)!important;border-color:#ffc72c!important;box-shadow:0 8px 0 #d39d0c,0 0 32px rgba(255,210,44,.34)!important}.rps-choice span{filter:drop-shadow(0 8px 12px rgba(53,58,128,.18))}
.yut-board-wrap{background:linear-gradient(180deg,#fff9e7,#f5dfb8)!important;border:3px solid #e1b26b!important}.yut-board{box-shadow:0 18px 35px rgba(91,55,14,.18),inset 0 0 0 3px rgba(255,255,255,.4)!important}.yut-side-card{background:linear-gradient(180deg,#fff,#f5f7ff)!important}.yut-throw-btn{background:linear-gradient(180deg,#ff6d88,#e83e67)!important;box-shadow:0 7px 0 #b52349!important}.word-arena{background:radial-gradient(circle at 18% 18%,rgba(75,222,188,.13),transparent 24%),radial-gradient(circle at 80% 80%,rgba(132,104,255,.13),transparent 26%)!important}.word-required-card,.word-history-panel{background:linear-gradient(180deg,#fff,#f0f5ff)!important}.word-required-letter{background:linear-gradient(180deg,#50d6bc,#25a890)!important;color:#fff!important;box-shadow:0 8px 0 #16806d,0 14px 24px rgba(30,119,112,.18)!important}.word-input{background:#fff!important;color:#25377d!important;border-color:#cddcff!important}.word-submit-btn{background:linear-gradient(180deg,#54d895,#22ad6c)!important;box-shadow:0 6px 0 #16804c!important}
/* Gomoku */
.gomoku-stage{position:relative;height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;padding:10px 14px 8px;color:#24377d;background:radial-gradient(circle at 18% 15%,rgba(255,222,112,.16),transparent 20%),linear-gradient(155deg,#eff7ff,#e9edff);overflow:hidden;align-content:stretch}
.gomoku-info{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;padding:10px 14px;border-radius:18px;background:rgba(255,255,255,.88);border:1px solid #d8e4ff;box-shadow:0 10px 24px rgba(42,63,131,.1)}
.gomoku-info>div:first-child,.gomoku-info>div:last-child{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center}
.gomoku-info>div:last-child{text-align:right;grid-template-columns:1fr auto}
.gomoku-info>div:last-child .gomoku-chip{grid-column:2;grid-row:1/3}
.gomoku-info strong{font-size:15px}.gomoku-info small{font-size:11px;color:#7285b4}
.gomoku-chip{grid-row:1/3;width:34px;height:34px;border-radius:50%;box-shadow:0 5px 10px rgba(29,38,78,.2)}
.gomoku-chip.black{background:radial-gradient(circle at 32% 25%,#687083,#232833 55%,#05070a 100%)}
.gomoku-chip.white{background:radial-gradient(circle at 32% 25%,#fff,#f1f1f1 62%,#c9c9c9 100%);border:1px solid #bbb}
.gomoku-turn{text-align:center!important;display:block!important}.gomoku-turn small{display:block;color:#7b68e6;font-weight:1000;letter-spacing:.12em}.gomoku-turn strong{display:block;margin:2px 0;color:#233885;font-size:18px}.gomoku-turn span{font-size:11px;color:#8090b8}
.gomoku-board-shell{min-height:0;display:grid;place-items:center;overflow:hidden;padding:0}
.gomoku-board{--board-pad:20px;position:relative;width:min(calc(100vh - 270px),calc(100vw - 140px),610px);height:min(calc(100vh - 270px),calc(100vw - 140px),610px);max-width:100%;max-height:100%;aspect-ratio:1;padding:var(--board-pad);border:8px solid #9a6332;border-radius:20px;background:linear-gradient(145deg,#f3c36f,#d69b4d 70%,#c8893c);box-shadow:0 18px 35px rgba(93,58,22,.22),inset 0 0 0 3px rgba(255,239,182,.45);overflow:visible;flex-shrink:0}
.gomoku-grid{position:relative;width:100%;height:100%;--step:calc(100% / 14)}
.gomoku-vline,.gomoku-hline{position:absolute;background:rgba(82,48,20,.62);pointer-events:none}
.gomoku-vline{top:0;bottom:0;width:1px;left:calc(var(--i) * var(--step));transform:translateX(-.5px)}
.gomoku-hline{left:0;right:0;height:1px;top:calc(var(--i) * var(--step));transform:translateY(-.5px)}
.gomoku-star{position:absolute;left:calc(var(--x) * var(--step));top:calc(var(--y) * var(--step));width:7px;height:7px;transform:translate(-50%,-50%);border-radius:50%;background:#68411f;opacity:.72;pointer-events:none}
.gomoku-cell{position:absolute;left:calc(var(--x) * var(--step));top:calc(var(--y) * var(--step));width:calc(var(--step) * 1.05);height:calc(var(--step) * 1.05);transform:translate(-50%,-50%);padding:0;border:0;border-radius:50%;background:transparent!important;box-shadow:none!important;overflow:visible;z-index:2;opacity:1!important}
.gomoku-cell:not(:disabled):hover::before{content:"";position:absolute;left:50%;top:50%;width:58%;height:58%;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,247,185,.42)}
.gomoku-cell:disabled{cursor:default;opacity:1!important;filter:none!important}
.gomoku-stone{position:absolute;left:50%;top:50%;z-index:3;width:96%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 7px 14px rgba(57,35,16,.38), inset 0 1px 2px rgba(255,255,255,.15);animation:stoneDrop .18s cubic-bezier(.2,.9,.3,1.2);opacity:1!important;filter:none!important}
.gomoku-stone.black{background:radial-gradient(circle at 28% 24%,#8a93a3 0 8%,#39404c 34%,#11151c 70%,#000 100%);border:1px solid rgba(255,255,255,.08)}
.gomoku-stone.white{background:radial-gradient(circle at 28% 24%,#ffffff 0 12%,#faf8f2 48%,#ded8c8 80%,#b8b19f 100%);border:1px solid rgba(98,83,58,.36)}
.gomoku-cell.last .gomoku-stone::after{content:"";position:absolute;left:50%;top:50%;width:24%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#ff4c62;box-shadow:0 0 0 2px rgba(255,255,255,.75)}
.gomoku-cell.win .gomoku-stone{box-shadow:0 0 0 3px #ffd432,0 0 24px #ffe65c,0 5px 8px rgba(57,35,16,.28)}
.gomoku-help{text-align:center;color:#667aab;font-size:12px;font-weight:850}
.gomoku-result{position:absolute;inset:0;z-index:10;display:grid;place-items:center;align-content:center;text-align:center;background:rgba(24,36,103,.72);backdrop-filter:blur(8px);color:#fff}
.gomoku-result small{color:#ffe76b;font-weight:1000;letter-spacing:.2em}.gomoku-result h3{margin:7px 0 2px;font-size:clamp(32px,4vw,58px);text-shadow:0 5px 18px rgba(15,20,70,.3)}.gomoku-result p{margin:0 0 16px;color:#dce8ff}.gomoku-result .online-rematch-ready{color:#fff}.gomoku-result .online-result-actions{justify-content:center}
@keyframes stoneDrop{0%{transform:translate(-50%,-50%) scale(.35);opacity:.2}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@media(max-width:900px){.gomoku-stage{padding:6px;gap:5px}.gomoku-info{padding:5px 7px;gap:6px}.gomoku-info strong{font-size:11px}.gomoku-info small,.gomoku-turn span{font-size:8px}.gomoku-chip{width:24px;height:24px}.gomoku-turn strong{font-size:13px}.gomoku-board{--board-pad:14px;width:min(calc(100vh - 230px),calc(100vw - 30px),520px);height:min(calc(100vh - 230px),calc(100vw - 30px),520px);border-width:5px;border-radius:15px}.gomoku-help{font-size:9px}.gomoku-result h3{font-size:31px}.gomoku-star{width:5px;height:5px}}
body.mobile-game-fit[data-view="online-game"] .gomoku-stage{padding:4px;gap:4px}body.mobile-game-fit[data-view="online-game"] .gomoku-info{padding:4px 6px;border-radius:10px}body.mobile-game-fit[data-view="online-game"] .gomoku-board{--board-pad:12px;width:min(calc(100vh - 190px),calc(100vw - 12px),430px);height:min(calc(100vh - 190px),calc(100vw - 12px),430px);border-width:4px;border-radius:12px}body.mobile-game-fit[data-view="online-game"] .gomoku-help{display:none}


/* Custom pixel font is loaded after first paint to avoid a hitch. */
:root,
body,
button,
input,
textarea,
select {
  font-family: Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.font-ready,
body.font-ready button,
body.font-ready input,
body.font-ready textarea,
body.font-ready select {
  font-family: "DNFBitBit", Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


/* v10: root screens must never stack on top of each other. */
#hubScreen.arcade-home.hidden,
#hubScreen.hidden,
#fishGameScreen.hidden,
#luckGameScreen.hidden,
#onlineGameScreen.hidden,
#fishSetupScreen.hidden { display:none !important; }
body:not([data-view="hub"]) #hubScreen { display:none !important; }
body[data-view="hub"] #hubScreen:not(.hidden) { display:flex !important; }
/* file:// local preview: visitor API is intentionally skipped by JS. */



/* ==========================================================
   v15 · FREE MAGNIFIER AIM + GAME JUICE
   - Gomoku: tap to place / long-press magnifier precision aim
   - Other games: restrained touch/result feedback effects
   ========================================================== */
.gomoku-grid,.gomoku-cell{touch-action:none!important;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.gomoku-board-shell{position:relative}
.gomoku-aim-marker{
  position:absolute;z-index:8;left:calc(var(--aim-x) * var(--step));top:calc(var(--aim-y) * var(--step));
  width:15px;height:15px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  border:2px solid rgba(255,244,102,.98);background:rgba(255,244,102,.10);
  box-shadow:0 0 0 3px rgba(255,239,91,.15),0 0 16px rgba(255,226,68,.72);
  animation:v14AimPulse .7s ease-in-out infinite
}
.gomoku-aim-marker::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;transform:translate(-50%,-50%);border-radius:50%;background:#fff7a5;box-shadow:0 0 6px #fff}
.gomoku-aim-marker.invalid{border-color:#ff566e;background:rgba(255,70,96,.10);box-shadow:0 0 0 3px rgba(255,70,96,.14),0 0 16px rgba(255,62,92,.58)}
.gomoku-aim-marker.invalid::after{background:#ff3657}
@keyframes v14AimPulse{50%{transform:translate(-50%,-50%) scale(1.14);filter:brightness(1.08)}}

.gomoku-magnifier{
  --lens-step:18px;position:fixed;z-index:99999;width:150px;height:150px;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-100%) scale(.88);transform-origin:50% 100%;opacity:0;
  border:5px solid rgba(255,255,255,.96);background:linear-gradient(145deg,#f4c875,#d89b4a);
  box-shadow:0 18px 48px rgba(23,28,78,.34),0 0 0 4px rgba(45,69,165,.34),inset 0 0 0 2px rgba(117,70,25,.28);
  overflow:hidden;transition:opacity .11s ease,transform .14s cubic-bezier(.2,.9,.2,1.15)
}
.gomoku-magnifier.visible{opacity:1;transform:translate(-50%,-100%) scale(1)}
.gomoku-magnifier.below{transform:translate(-50%,0) scale(.88);transform-origin:50% 0}
.gomoku-magnifier.below.visible{transform:translate(-50%,0) scale(1)}
.gomoku-lens-board{position:absolute;inset:10px;border-radius:50%;overflow:hidden;background:#e7b963;box-shadow:inset 0 0 24px rgba(96,54,20,.18)}
.gomoku-lens-vline,.gomoku-lens-hline{position:absolute;z-index:1;display:block;pointer-events:none;background:rgba(87,51,20,.74)}
.gomoku-lens-vline{top:0;bottom:0;left:calc(50% + var(--lp));width:1.5px;transform:translateX(-50%)}
.gomoku-lens-hline{left:0;right:0;top:calc(50% + var(--lp));height:1.5px;transform:translateY(-50%)}
.gomoku-lens-star{position:absolute;z-index:2;left:calc(50% + var(--lx));top:calc(50% + var(--ly));width:5px;height:5px;transform:translate(-50%,-50%);border-radius:50%;background:#68411f;opacity:.78;pointer-events:none}
.gomoku-lens-stone{position:absolute;z-index:3;left:calc(50% + var(--lx));top:calc(50% + var(--ly));width:18px;height:18px;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 2px 4px rgba(58,34,15,.35)}
.gomoku-lens-stone.black{background:radial-gradient(circle at 30% 25%,#717a8a,#20252f 58%,#020305)}
.gomoku-lens-stone.white{background:radial-gradient(circle at 30% 25%,#fff,#f5f3ed 64%,#c8c0ae);border:1px solid rgba(91,70,42,.35)}
.gomoku-lens-cross::before,.gomoku-lens-cross::after{content:"";position:absolute;z-index:5;left:50%;top:50%;background:rgba(255,255,255,.38);transform:translate(-50%,-50%);border-radius:3px}
.gomoku-lens-cross::before{width:20px;height:1px}.gomoku-lens-cross::after{width:1px;height:20px}
.gomoku-lens-target{position:absolute;z-index:7;left:calc(50% + var(--target-x,0px));top:calc(50% + var(--target-y,0px));width:15px;height:15px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid #fff476;background:rgba(255,244,118,.10);box-shadow:0 0 0 3px rgba(47,56,121,.55),0 0 10px rgba(255,245,120,.95)}
.gomoku-lens-target::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;transform:translate(-50%,-50%);border-radius:50%;background:#fff9ad;box-shadow:0 0 5px #fff}
.gomoku-lens-target.invalid{border-color:#ff4663;box-shadow:0 0 0 3px rgba(111,31,50,.62),0 0 10px rgba(255,62,96,.8)}
.gomoku-lens-target.invalid::after{background:#ff3657}
.gomoku-lens-status{position:absolute;z-index:8;left:50%;bottom:10px;transform:translateX(-50%);max-width:118px;padding:3px 8px;border-radius:999px;background:rgba(32,39,89,.84);color:#fff;font-size:9px;font-weight:1000;white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.24)}
.gomoku-lens-status.invalid{background:rgba(181,38,63,.92)}
.gomoku-precision-badge{display:none;position:absolute;z-index:9;right:7px;top:7px;padding:4px 8px;border-radius:999px;background:rgba(28,43,111,.78);border:1px solid rgba(255,255,255,.42);color:#fff;font-size:9px;font-weight:950;letter-spacing:-.02em;pointer-events:none;backdrop-filter:blur(5px);box-shadow:0 5px 14px rgba(33,45,111,.18)}
@media(max-width:900px),(pointer:coarse){.gomoku-precision-badge{display:block}}

/* restrained tactile feedback used across all games */
#v14GameFxLayer{position:fixed;inset:0;z-index:99998;pointer-events:none;overflow:hidden}
.v14-tap-ring{position:fixed;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid rgba(255,255,255,.86);border-radius:50%;box-shadow:0 0 0 2px rgba(82,117,255,.2);animation:v14TapRing .38s ease-out forwards}
@keyframes v14TapRing{to{opacity:0;transform:scale(2.6)}}
.v14-fx-particle{--tx:0px;--ty:-70px;position:fixed;width:9px;height:9px;margin:-4px 0 0 -4px;border-radius:2px;background:#ffe05e;box-shadow:0 0 8px rgba(255,224,94,.7);animation:v14Particle .72s cubic-bezier(.12,.65,.2,1) forwards}
.v14-fx-particle.cyan{background:#6fe9ff;box-shadow:0 0 8px rgba(80,220,255,.72);border-radius:50%}
.v14-fx-particle.pink{background:#ff7ab6;box-shadow:0 0 8px rgba(255,91,158,.7)}
.v14-fx-particle.red{background:#ff6177;box-shadow:0 0 8px rgba(255,64,93,.55);border-radius:50%}
.v14-fx-particle.bubble{width:12px;height:12px;border:2px solid rgba(224,250,255,.88);background:rgba(128,224,255,.18);border-radius:50%;box-shadow:inset 0 0 4px rgba(255,255,255,.75);animation-name:v14Bubble}
@keyframes v14Particle{0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0)}18%{opacity:1}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(.75) rotate(260deg)}}
@keyframes v14Bubble{0%{opacity:0;transform:translate(0,0) scale(.4)}18%{opacity:1}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(1.25)}}
.v14-impact-ring{position:fixed;width:46px;height:46px;margin:-23px 0 0 -23px;border:3px solid rgba(255,239,106,.88);border-radius:50%;animation:v14Impact .55s ease-out forwards;box-shadow:0 0 18px rgba(255,225,70,.48)}
@keyframes v14Impact{to{opacity:0;transform:scale(2.4)}}
.v14-shake{animation:v14SoftShake .3s ease!important}
@keyframes v14SoftShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.v14-success-pop{animation:v14SuccessPop .48s cubic-bezier(.15,.8,.2,1)!important}
@keyframes v14SuccessPop{0%{filter:brightness(1);transform:scale(1)}45%{filter:brightness(1.18);transform:scale(1.025)}100%{filter:brightness(1);transform:scale(1)}}
/* Game-specific micro-feedback */
.luck-game-screen[data-game="coin"] .coin3d.v14-result-hit{filter:drop-shadow(0 0 18px rgba(255,210,66,.8))}
.luck-game-screen[data-game="highlow"] .playing-card.v14-result-hit,.luck-game-screen[data-game="highlow"] .card.v14-result-hit{filter:drop-shadow(0 0 20px rgba(111,233,255,.8))}
.luck-game-screen[data-game="oddeven"] .number-reactor.v14-result-hit{animation:v14ReactorHit .5s ease}
@keyframes v14ReactorHit{45%{transform:scale(1.08);filter:brightness(1.35)}100%{transform:scale(1);filter:none}}
.scratch-pick-cell.revealed{animation:v14ScratchReveal .3s cubic-bezier(.18,.8,.2,1)}
@keyframes v14ScratchReveal{0%{transform:scale(.78) rotate(-2deg);filter:brightness(1.45)}70%{transform:scale(1.05)}100%{transform:scale(1.02)}}
.rps-hand.reveal{position:relative}.rps-hand.reveal::after{content:"";position:absolute;inset:-8%;border:2px solid rgba(110,236,210,.5);border-radius:50%;animation:v14RpsWave .7s ease-out forwards;pointer-events:none}
@keyframes v14RpsWave{from{opacity:.9;transform:scale(.45)}to{opacity:0;transform:scale(1.3)}}
.word-chip:last-child{animation:v14WordPop .33s cubic-bezier(.18,.9,.2,1)}
@keyframes v14WordPop{0%{opacity:.2;transform:translateY(8px) scale(.9)}100%{opacity:1;transform:none}}
.yut-result-name strong{transition:transform .2s,filter .2s}.yut-result-name.v14-result-hit strong{transform:scale(1.08);filter:drop-shadow(0 0 10px rgba(255,220,100,.58))}
.result-toast.show:not(.playing){animation:v14ToastResult .38s cubic-bezier(.2,.8,.2,1)}
@keyframes v14ToastResult{0%{transform:translateY(4px) scale(.96);opacity:.3}100%{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.gomoku-aim-marker,.gomoku-magnifier,.v14-tap-ring,.v14-fx-particle,.v14-impact-ring,.v14-shake,.v14-success-pop,.scratch-pick-cell.revealed,.rps-hand.reveal::after,.word-chip:last-child,.result-toast.show:not(.playing){animation:none!important;transition:none!important}}



/* Stones are direct children of the exact same 15x15 line grid: no cell-center drift. */
.gomoku-stone-point{position:absolute;z-index:4;left:calc(var(--x) * var(--step));top:calc(var(--y) * var(--step));width:calc(var(--step) * .98);height:calc(var(--step) * .98);transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:1!important;filter:none!important;box-shadow:0 7px 14px rgba(57,35,16,.38),inset 0 1px 2px rgba(255,255,255,.15);animation:stoneDrop .18s cubic-bezier(.2,.9,.3,1.2)}
.gomoku-stone-point.black{background:radial-gradient(circle at 28% 24%,#8a93a3 0 8%,#39404c 34%,#11151c 70%,#000 100%);border:1px solid rgba(255,255,255,.08)}
.gomoku-stone-point.white{background:radial-gradient(circle at 28% 24%,#fff 0 12%,#faf8f2 48%,#ded8c8 80%,#b8b19f 100%);border:1px solid rgba(98,83,58,.36)}
.gomoku-stone-point.last::after{content:"";position:absolute;left:50%;top:50%;width:24%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#ff4c62;box-shadow:0 0 0 2px rgba(255,255,255,.75)}
.gomoku-stone-point.win{box-shadow:0 0 0 3px #ffd432,0 0 24px #ffe65c,0 5px 8px rgba(57,35,16,.28)}
.gomoku-cell{z-index:6!important;background:transparent!important}
.gomoku-vline,.gomoku-hline{z-index:1}.gomoku-star{z-index:2}
.gomoku-magnifier{transition:opacity .08s ease,transform .1s ease}

/* Mobile: after a scratch round, the next-round action must be an obvious thumb target. */
@media(max-width:820px),(pointer:coarse){
  body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] #scratchNewTicket{min-width:150px!important;min-height:46px!important;padding:10px 16px!important;border-radius:12px!important;font-size:15px!important;line-height:1.1!important;box-shadow:0 5px 0 #b9642d,0 10px 18px rgba(128,71,34,.18)!important}
  body.mobile-game-fit .scratch-pick-copy .scratch-result-actions{margin-top:7px!important}
}
@media(max-width:390px){body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] #scratchNewTicket{min-width:100px!important;min-height:34px!important;font-size:12px!important}}

/* PC responsive result UI: compact toast/cards never cover the controls, even in a short browser window. */
@media(min-width:821px){
  body[data-view="luck-game"] .luck-game-screen:not([data-game="scratch"]) .result-banner,
  body[data-view="luck-game"] .luck-game-screen[data-game="coin"] .result-banner{
    left:auto!important;right:14px!important;top:auto!important;bottom:14px!important;width:auto!important;min-width:0!important;max-width:min(420px,42%)!important;
    padding:9px 14px!important;border-radius:12px!important;font-size:clamp(13px,1.05vw,18px)!important;line-height:1.22!important;
    white-space:normal!important;overflow:hidden!important;overflow-wrap:anywhere!important;transform:translateY(10px)!important;z-index:28!important
  }
  body[data-view="luck-game"] .luck-game-screen:not([data-game="scratch"]) .result-banner.show,
  body[data-view="luck-game"] .luck-game-screen[data-game="coin"] .result-banner.show{transform:translateY(0)!important}
  body[data-view="luck-game"] .luck-game-screen[data-game="enhance"] .result-banner{right:12px!important;bottom:12px!important;max-width:min(360px,38%)!important}
  .result-toast{max-width:min(620px,64%)!important;font-size:clamp(13px,1.15vw,18px)!important;line-height:1.25!important;white-space:normal!important;text-overflow:clip!important;text-align:center}
  .fish-result-card{min-width:0!important;width:auto!important;max-width:min(360px,38%)!important;padding:11px 16px!important}.fish-result-card strong{font-size:clamp(22px,2.2vw,34px)!important}.fish-result-card>span{font-size:clamp(12px,1vw,16px)!important}
  .roulette-result{width:min(380px,56%)!important;max-height:70%!important;overflow:auto!important;padding:clamp(14px,2vh,22px)!important}.roulette-result strong{font-size:clamp(22px,2.5vw,36px)!important;margin:7px 0 12px!important}
  .rps-match-card,.word-round-card{max-width:min(460px,72%)!important;max-height:76%!important;overflow:auto!important;padding:clamp(16px,2.5vh,26px)!important}.rps-match-card h3,.word-round-card h3{font-size:clamp(27px,3vw,42px)!important}
  .gomoku-result h3{font-size:clamp(27px,3vw,42px)!important}.gomoku-result p{font-size:clamp(12px,1vw,16px)!important;margin-bottom:10px!important}
}
@media(min-width:821px) and (max-height:760px){
  .luck-game-content>.luck-prompt{font-size:clamp(25px,2.4vw,36px)!important}.luck-game-content>.luck-subprompt{font-size:clamp(13px,1.1vw,17px)!important}
  .enhance-wrap{gap:clamp(10px,2vw,24px)!important}.energy-core{width:min(25vh,150px)!important}.enhance-info{transform:scale(.94);transform-origin:center}.enhance-actions .luck-action{min-height:48px!important;padding:10px 8px!important;font-size:clamp(15px,1.35vw,19px)!important}
  .luck-game-screen .result-banner{max-width:min(340px,36%)!important;font-size:clamp(12px,.95vw,16px)!important;padding:7px 11px!important}
  .rps-match-card,.word-round-card,.roulette-result{max-height:68%!important}
}


/* v19: readability */
.game-tile .tile-copy strong,.home-section-head h3,.random-recommend-head h2,.luck-title h2,.luck-prompt,.online-game-screen h2,.online-game-screen h3,.fish-page-title h2,.ladder-title h1,.result-banner,.online-toast,.word-required-letter,.rps-center b,.draw-title,.draw-status strong,.draw-result strong{
  text-rendering:optimizeLegibility;letter-spacing:-.025em;
}
.game-tile .tile-copy strong,.home-section-head h3,.luck-title h2,.fish-page-title h2,.online-game-screen h2,.online-game-screen h3,.draw-title{
  -webkit-text-stroke:.22px rgba(28,43,85,.24);paint-order:stroke fill;text-shadow:0 1px 0 rgba(255,255,255,.75),0 2px 5px rgba(37,54,98,.12)
}
.game-tile .tile-copy small,.luck-subprompt,.luck-rule-card p,.word-turn-wait,.word-required-card p,.online-lobby p{line-height:1.48;font-weight:800}
button,.luck-choice,.luck-action,.rps-choice,.word-submit-btn,.word-giveup-btn{font-weight:1000;text-shadow:0 1px 1px rgba(0,0,0,.08)}
/* RPS result above VS */
.rps-center{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:140px}
.rps-round-result{height:36px;min-width:132px;margin-bottom:8px;padding:7px 13px;border-radius:999px;display:flex;align-items:center;justify-content:center;opacity:0;color:#fff;font-size:15px;font-weight:1000;letter-spacing:-.02em;transform:translateY(4px);transition:.2s;background:transparent;box-shadow:none;pointer-events:none}
.rps-round-result:not(:empty){opacity:1;transform:none;background:#6878a8;box-shadow:0 8px 20px rgba(65,83,135,.18)}
.rps-round-result.win{background:linear-gradient(135deg,#26bc86,#45d2a5);box-shadow:0 8px 22px rgba(39,188,134,.28)}
.rps-round-result.lose{background:linear-gradient(135deg,#ee6378,#d84967);box-shadow:0 8px 22px rgba(219,73,103,.25)}
.rps-round-result.draw{background:linear-gradient(135deg,#7b8bbd,#6573a4)}
.rps-center b{font-size:clamp(31px,3.25vw,48px)!important}
/* Scratch: success must never enlarge/crop the ticket */
.scratch-choice-ticket{width:100%!important;max-width:none!important}
.scratch-choice-ticket,.scratch-choice-ticket.win,.scratch-choice-ticket.checked,.scratch-choice-ticket.checked.win{transform:none!important;animation:none!important}
.scratch-choice-cell.triple-hit{animation:none!important;transform:none!important;filter:drop-shadow(0 0 13px rgba(255,211,78,.85))!important}
.scratch-choice-cell.pair-glow{transform:none!important}
/* Draw game family */
.draw-shell{width:100%;height:100%;min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:10px;padding:clamp(10px,1.4vw,18px);color:#2b3e82}
.draw-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.draw-head-copy small{display:block;color:#7a8cb8;font-size:11px;font-weight:1000;letter-spacing:.16em}.draw-title{margin:2px 0 0;font-size:clamp(25px,2.6vw,38px);color:#273c83}.draw-head-copy p{margin:5px 0 0;color:#6f80ad;font-weight:850;font-size:13px;line-height:1.4}
.draw-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.draw-controls label{display:flex;align-items:center;gap:7px;padding:6px 9px;border-radius:12px;background:rgba(255,255,255,.82);border:1px solid #dfe7ff;color:#53699d;font-size:12px;font-weight:950}.draw-controls select,.draw-controls input{height:34px;border:1px solid #cdd9f7;border-radius:9px;background:#fff;color:#324a88;font-weight:1000;padding:0 9px;outline:none}.draw-controls input{width:64px;text-align:center}.draw-btn{border:0;border-radius:12px;padding:10px 17px;background:linear-gradient(135deg,#5c7cff,#6d5be7);color:#fff;font-size:14px;font-weight:1000;box-shadow:0 5px 0 #3e4caa}.draw-btn:active{transform:translateY(2px);box-shadow:0 3px 0 #3e4caa}.draw-btn.secondary{background:linear-gradient(135deg,#ff9961,#e56c69);box-shadow:0 5px 0 #a64b4e}
.draw-status{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 13px;border:1px solid #dfe7ff;border-radius:14px;background:rgba(255,255,255,.9);box-shadow:0 7px 18px rgba(62,87,143,.08)}.draw-status strong{font-size:clamp(15px,1.45vw,20px);color:#314a8a}.draw-status span{color:#7888ae;font-size:12px;font-weight:900}.draw-status.red{border-color:#ffbbc4;background:#fff5f7}.draw-status.red strong{color:#d74962}.draw-status.blue{border-color:#bccaff;background:#f5f7ff}.draw-status.blue strong{color:#4164d5}.draw-status.win{border-color:#ffe09a;background:#fff9e6}.draw-status.win strong{color:#b87509}.draw-status.lose{border-color:#ffc2cf;background:#fff3f6}.draw-status.lose strong{color:#cd435f}
.draw-board{min-height:0;overflow:auto;display:grid;align-content:center;justify-content:center;gap:clamp(6px,.75vw,10px);padding:8px;border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(240,245,255,.82));border:1px solid #dce6ff}.draw-board.count-2{grid-template-columns:repeat(2,minmax(130px,220px));gap:clamp(14px,2vw,26px)}.draw-board.count-30,.draw-board.custom-grid{grid-template-columns:repeat(10,minmax(48px,72px));align-content:center}
.draw-card{position:relative;aspect-ratio:1;border:0;border-radius:13px;background:transparent;padding:0;perspective:500px;cursor:pointer;min-width:0}.draw-card:disabled{cursor:default}.draw-card-inner{position:absolute;inset:0;border-radius:inherit;transform-style:preserve-3d;transition:transform .38s cubic-bezier(.18,.75,.22,1)}.draw-card.revealed .draw-card-inner{transform:rotateY(180deg)}.draw-face{position:absolute;inset:0;border-radius:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;backface-visibility:hidden;border:2px solid rgba(255,255,255,.92);box-shadow:0 7px 15px rgba(58,73,127,.14)}.draw-cover{background:linear-gradient(145deg,#7066ed,#4c77e8);color:#fff}.draw-cover b{font-size:clamp(18px,2.1vw,30px)}.draw-cover small{font-size:9px;letter-spacing:.12em;font-weight:1000;opacity:.88}.draw-reveal{transform:rotateY(180deg);background:#fff}.draw-reveal b{font-size:clamp(23px,2.5vw,36px)}.draw-reveal small{margin-top:2px;font-size:10px;font-weight:1000}.draw-card.win .draw-reveal{background:linear-gradient(145deg,#fff7c9,#ffe278);border-color:#ffd052;color:#975e00}.draw-card.blank .draw-reveal{background:linear-gradient(145deg,#f7f8fc,#e8ebf2);border-color:#cfd5e1;color:#667087}.draw-card.owner-red .draw-face{box-shadow:0 0 0 3px #ff6579,0 8px 18px rgba(212,65,86,.2)}.draw-card.owner-blue .draw-face{box-shadow:0 0 0 3px #557cff,0 8px 18px rgba(67,92,207,.2)}.draw-card.revealed.win{animation:drawWinPop .45s ease both}.draw-card.revealed.blank{animation:drawFailWobble .42s ease both}@keyframes drawWinPop{45%{transform:translateY(-5px)}100%{transform:none}}@keyframes drawFailWobble{25%{transform:rotate(-2deg)}55%{transform:rotate(2deg)}100%{transform:none}}
.draw-board.count-2 .draw-card{min-width:140px}.draw-board.count-2 .draw-reveal b,.draw-board.count-2 .draw-cover b{font-size:clamp(38px,5vw,70px)}.draw-board.count-2 .draw-reveal small{font-size:15px}.draw-result{min-height:44px;display:flex;align-items:center;justify-content:center;gap:12px}.draw-result strong{font-size:18px;color:#344a88}.draw-result .draw-btn{min-width:150px}
.draw-streak{display:flex;gap:5px;align-items:center}.draw-streak i{width:16px;height:16px;border-radius:50%;background:#e0e5f1;box-shadow:inset 0 0 0 1px #cbd3e5}.draw-streak i.on{background:#ffd04d;box-shadow:0 0 12px rgba(255,193,42,.55),inset 0 0 0 2px #fff}
/* shared all-game feedback */
.global-tap-fx{position:fixed;z-index:99999;width:18px;height:18px;border:2px solid rgba(92,112,255,.6);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);animation:globalTap .42s ease-out forwards}@keyframes globalTap{to{width:58px;height:58px;opacity:0}}
.game-burst{position:fixed;z-index:99998;inset:0;pointer-events:none;overflow:hidden}.game-burst i{position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;background:currentColor;animation:burstFly .75s ease-out forwards;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-15px)}@keyframes burstFly{to{opacity:0;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-150px) scale(.25)}}
.game-stage-pulse{animation:stagePulse .34s ease}@keyframes stagePulse{45%{filter:brightness(1.07)}100%{filter:none}}
@media(max-width:900px){.scratch-choice-ticket{width:min(88vw,430px)!important;max-width:430px!important}.rps-round-result{height:31px;min-width:112px;font-size:13px;margin-bottom:5px}.draw-shell{height:auto;min-height:100%;padding:8px}.draw-board{overflow:visible}.draw-board.count-30,.draw-board.custom-grid{grid-template-columns:repeat(6,minmax(42px,1fr));width:min(96vw,520px);justify-self:center}.draw-board.count-2{grid-template-columns:repeat(2,minmax(110px,1fr));width:min(94vw,460px);justify-self:center}.draw-card{border-radius:10px}.draw-status{min-height:39px}.draw-head{align-items:flex-start}.draw-title{font-size:25px}}
@media(max-width:520px){.draw-board.count-30,.draw-board.custom-grid{grid-template-columns:repeat(6,minmax(38px,1fr));gap:5px;padding:6px}.draw-board.count-2 .draw-card{min-width:0}.draw-controls{gap:5px}.draw-controls label{padding:5px 7px}.draw-controls select,.draw-controls input{height:31px}.draw-btn{padding:8px 12px;font-size:13px}.draw-head-copy p{font-size:12px}.draw-status{padding:7px 9px}.draw-status span{font-size:11px}}


/* v20 · bright, high-readability unified game theme */
:root{--v20-ink:#263a76;--v20-muted:#6479a6;--v20-line:#dbe5fb;--v20-card:#ffffff;--v20-soft:#f4f8ff}
body{background:linear-gradient(145deg,#eef8ff,#fff7f0 48%,#f5f0ff)!important;color:var(--v20-ink)}
body[data-view="luck-game"] .luck-game-screen{background:#f2f8ff!important;color:var(--v20-ink)!important}
body[data-view="luck-game"] .luck-bg{background:radial-gradient(circle at 14% 18%,rgba(111,193,255,.28),transparent 30%),radial-gradient(circle at 88% 18%,rgba(255,191,119,.28),transparent 28%),radial-gradient(circle at 55% 92%,rgba(183,151,255,.2),transparent 34%),linear-gradient(145deg,#f5fbff,#fff8f2)!important}
body[data-view="luck-game"] .luck-topbar{background:rgba(255,255,255,.94)!important;border-bottom:1px solid #dce6f8!important;box-shadow:0 8px 26px rgba(67,93,145,.10)!important}
body[data-view="luck-game"] .luck-title h2,body[data-view="luck-game"] .luck-title small{color:#304887!important;text-shadow:0 1px 0 #fff!important}
body[data-view="luck-game"] .luck-back-btn{background:#fff!important;color:#40588f!important;border:1px solid #d7e2f7!important;box-shadow:0 4px 12px rgba(55,77,126,.09)!important}
body[data-view="luck-game"] .luck-main{background:rgba(255,255,255,.96)!important;border:1px solid #dce6f8!important;box-shadow:0 20px 50px rgba(67,90,137,.13)!important}
body[data-view="luck-game"] .luck-main::before{background:radial-gradient(circle at 50% 34%,rgba(122,163,255,.11),transparent 45%)!important}
body[data-view="luck-game"] .luck-rule-card,body[data-view="luck-game"] .luck-score-card{background:#fff!important;border:1px solid #dce6f8!important;box-shadow:0 10px 26px rgba(64,86,135,.09)!important}
body[data-view="luck-game"] .luck-rule-card h3,body[data-view="luck-game"] .luck-score-card h3{color:#2d447f!important}
body[data-view="luck-game"] .luck-rule-card p,body[data-view="luck-game"] .luck-score-row{color:#5a6f9d!important;font-weight:850!important}
body[data-view="luck-game"] .luck-score-row{border-top-color:#e5ecfa!important}body[data-view="luck-game"] .luck-score-row strong{color:#273f7c!important}
body[data-view="luck-game"] .luck-kicker{color:#647caf!important}body[data-view="luck-game"] .luck-prompt{color:#253d7a!important;text-shadow:0 2px 0 #fff,0 3px 8px rgba(53,79,130,.13)!important}body[data-view="luck-game"] .luck-subprompt{color:#6276a1!important}
body[data-view="luck-game"] .luck-choice{background:linear-gradient(180deg,#fff,#edf3ff)!important;color:#314a85!important;border:2px solid #cddbf5!important;box-shadow:0 7px 15px rgba(54,78,129,.11)!important;text-shadow:none!important}body[data-view="luck-game"] .luck-choice.selected{background:linear-gradient(180deg,#e8efff,#d7e3ff)!important;border-color:#708bdf!important;color:#243d83!important;box-shadow:0 0 0 3px rgba(92,122,219,.12),0 8px 20px rgba(63,91,166,.16)!important}
body[data-view="luck-game"] .result-banner{background:#fff!important;color:#2b427e!important;border:2px solid #d7e3fa!important;box-shadow:0 12px 32px rgba(58,80,128,.18)!important;text-shadow:none!important}body[data-view="luck-game"] .result-banner.win{background:#fff8d9!important;color:#946000!important;border-color:#f3ce65!important}body[data-view="luck-game"] .result-banner.lose{background:#fff0f4!important;color:#b63c5e!important;border-color:#f0abc0!important}
/* Draw menu and draw boards: fully opaque and crisp. */
body[data-view="luck-game"] .luck-game-screen[data-game="draw"] .luck-game-content{padding:clamp(10px,1.8vw,22px)!important;align-items:stretch!important;justify-content:stretch!important;overflow:auto!important}
.draw-shell,.draw-board,.draw-status,.draw-mode-menu,.draw-mode-card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;filter:none!important;opacity:1!important}
.draw-shell{background:#fff!important;border:1px solid #dce6f8;border-radius:22px;box-shadow:0 16px 38px rgba(55,82,139,.11);color:#263f7c!important;grid-template-rows:auto auto auto minmax(0,1fr) auto!important}
.draw-board{background:#f4f8ff!important;border:1px solid #d8e4fa!important}.draw-card,.draw-card:disabled,.draw-card-inner,.draw-face{opacity:1!important;filter:none!important}.draw-face{box-shadow:0 6px 14px rgba(53,78,130,.13)!important}.draw-cover{background:linear-gradient(145deg,#7c75f2,#557fe9)!important;color:#fff!important}.draw-reveal{background:#fff!important;color:#405482!important}.draw-card.blank .draw-reveal{background:#f7f9fe!important;color:#566887!important}.draw-card.win .draw-reveal{background:#fff4bc!important;color:#925900!important}
.draw-mode-menu{height:100%;min-height:0;display:flex;flex-direction:column;gap:14px;padding:clamp(8px,1.5vw,16px);background:#fff;border-radius:20px}.draw-mode-menu-head{text-align:center}.draw-mode-menu-head small{display:block;color:#7387b4;font-size:12px;font-weight:1000;letter-spacing:.14em}.draw-mode-menu-head h3{margin:4px 0;color:#263f7e;font-size:clamp(28px,3vw,42px);text-shadow:0 2px 0 #fff}.draw-mode-menu-head p{margin:5px 0 0;color:#6378a5;font-weight:850;line-height:1.45}.draw-mode-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:center}.draw-mode-card{min-height:clamp(140px,22vh,230px);padding:18px;border:2px solid #dbe5fa;border-radius:20px;background:linear-gradient(145deg,#fff,#f2f7ff);color:#2c447f;text-align:left;box-shadow:0 9px 20px rgba(52,76,127,.10);transition:.16s}.draw-mode-card:hover{transform:translateY(-3px);border-color:#91a9eb;box-shadow:0 13px 27px rgba(53,80,145,.15)}.draw-mode-card b{display:block;font-size:clamp(21px,2vw,31px);font-weight:1000}.draw-mode-card span{display:block;margin-top:7px;color:#6479a6;font-size:13px;font-weight:850;line-height:1.45}.draw-mode-card i{display:inline-grid;place-items:center;width:42px;height:42px;margin-bottom:10px;border-radius:13px;background:#eef2ff;font-style:normal;font-size:24px}.draw-mode-nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:7px;border:1px solid #dce6f8;border-radius:14px;background:#f5f8ff}.draw-mode-nav button{border:1px solid #d6e0f5;border-radius:10px;background:#fff;color:#536a9e;padding:7px 11px;font-weight:1000}.draw-mode-nav button.active{background:#627be5;color:#fff;border-color:#627be5}.draw-mode-nav .draw-mode-home{margin-left:auto;background:#fff5dd;color:#966400;border-color:#f0d486}
/* Online brighter and readable */
body[data-view="online-game"] .online-game-screen{background:linear-gradient(145deg,#eef8ff,#fff8f2)!important;color:#273f7d!important}
body[data-view="online-game"] .online-title-wrap h2{color:#263d7d!important;text-shadow:0 1px 0 #fff!important}body[data-view="online-game"] .online-title-wrap small{color:#5d78b8!important}body[data-view="online-game"] .online-lobby-copy h3{color:#263d7d!important;text-shadow:0 2px 0 #fff,0 4px 12px rgba(47,70,123,.12)!important}body[data-view="online-game"] .online-lobby-copy h3 em{color:#5b66d8!important}body[data-view="online-game"] .online-lobby-copy p{color:#6076a2!important}body[data-view="online-game"] .online-eyebrow{background:#eef2ff!important;border-color:#d9e3fb!important;color:#685cd3!important}body[data-view="online-game"] .online-feature-row span{background:#fff!important;border-color:#dce5f8!important;color:#5a709e!important}body[data-view="online-game"] .online-lobby-panel{background:#fff!important;border:1px solid #dce5f8!important;box-shadow:0 18px 42px rgba(54,79,132,.12)!important}body[data-view="online-game"] .online-room-card{background:linear-gradient(180deg,#fff,#f4f8ff)!important;color:#2b427e!important;border-color:#dbe5f9!important}body[data-view="online-game"] .online-room-card small,body[data-view="online-game"] .online-field-label{color:#667aa4!important}body[data-view="online-game"] .online-ai-practice{color:#fff!important}body[data-view="online-game"] .online-topbar{background:rgba(255,255,255,.96)!important;border-bottom:1px solid #dbe6f8!important;box-shadow:0 8px 26px rgba(57,82,135,.10)!important}body[data-view="online-game"] .online-layout{background:transparent!important}.online-game-content{background:rgba(255,255,255,.97)!important;border:1px solid #d8e3f7!important;box-shadow:0 18px 42px rgba(52,77,130,.13)!important}.online-player-strip{background:linear-gradient(180deg,#607bdd,#4c66c8)!important}.online-toast{background:#fff!important;color:#2b437e!important;border:1px solid #d8e3f8!important;text-shadow:none!important;box-shadow:0 9px 24px rgba(52,75,125,.16)!important}
.rps-arena{background:linear-gradient(145deg,#f8fbff,#fff7f7)!important;color:#2b417b!important}.rps-scoreboard,.rps-hand-side{background:#fff!important;border-color:#dce5f8!important;box-shadow:0 8px 20px rgba(54,78,128,.09)!important}.rps-hand-label{color:#40588d!important;font-weight:1000!important}.rps-center span{color:#677ba5!important;font-weight:850!important}
.yut-arena{background:linear-gradient(145deg,#f5fbff,#fff9ed)!important}.yut-side-panel{background:#fff!important;border:1px solid #dce5f5!important;box-shadow:0 14px 34px rgba(63,79,110,.11)!important;color:#2c4277!important}.turn-banner{background:#eef4ff!important;border-color:#d4e0f5!important;color:#334b81!important}.turn-banner.myturn{background:#fff5cf!important;border-color:#efd071!important;color:#865800!important}.yut-result-name strong{background:none!important;color:#6f4716!important;text-shadow:none!important;-webkit-text-fill-color:initial!important}.yut-result-name small,.yut-help{color:#5b6e91!important;font-weight:850!important}.yut-bench{background:#f6f9ff!important;border-color:#dce5f4!important}.yut-bench-head strong{color:#334b7e!important;font-size:13px!important}.yut-bench-head span{color:#697ca2!important}.yut-move-chip{background:#f5f7fd!important;color:#4e618d!important;border-color:#dce4f3!important}.yut-power-gauge{background:#e8eef9!important;color:#405681!important}
/* simple, larger circular yut pieces */
.yut-node>.yut-piece{width:86%!important;aspect-ratio:1!important}.yut-bench .yut-piece{width:30px!important;height:30px!important}.yut-piece{border-radius:50%!important;overflow:visible!important;border:3px solid #fff!important}.yut-piece.host{background:radial-gradient(circle at 34% 28%,#ff9a9a,#ef405e 60%,#b51f3b)!important}.yut-piece.guest{background:radial-gradient(circle at 34% 28%,#91c8ff,#3977e6 60%,#2046aa)!important}.yut-piece-main{display:grid;place-items:center;width:100%;height:100%;color:#fff;font-size:clamp(12px,1.25vw,18px);font-weight:1000;line-height:1;text-shadow:0 1px 2px rgba(0,0,0,.3)}.yut-stack-count{left:50%!important;top:-15px!important;transform:translateX(-50%)!important;min-width:31px!important;height:19px!important;padding:0 6px!important;display:flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;word-break:keep-all!important;writing-mode:horizontal-tb!important;line-height:1!important;font-size:11px!important;font-weight:1000!important;z-index:20!important}.yut-piece-no,.yut-piece-face{display:none!important}
.word-arena{background:linear-gradient(145deg,#f6fbff,#f7fff8)!important;color:#263f7d!important}.word-history-panel,.word-required-card{background:#fff!important;border-color:#dbe5f7!important;box-shadow:0 8px 20px rgba(52,76,126,.09)!important}.word-last-event{background:#f5f8ff!important;color:#526996!important}.word-turn-wait{color:#6479a5!important}.word-input{color:#253d78!important;background:#fff!important}
/* High contrast typography across games */
.game-tile .tile-copy strong,.home-section-head h3,.luck-title h2,.luck-prompt,.draw-title,.draw-status strong,.rps-round-result,.rps-match-card h3,.yut-win-overlay h3,.gomoku-result h3,.word-win-overlay h3,.word-round-overlay h3,.fish-page-title h2,.ladder-title h1{font-weight:1000!important;letter-spacing:-.025em!important;text-rendering:geometricPrecision;-webkit-text-stroke:.28px rgba(31,48,94,.24);paint-order:stroke fill;text-shadow:0 1px 0 rgba(255,255,255,.95),0 2px 5px rgba(44,68,120,.12)!important}.game-tile .tile-copy small,.draw-head-copy p,.draw-status span,.luck-rule-card p,.luck-subprompt,.word-required-card p,.word-history-head,.gomoku-help,.yut-help{font-weight:850!important;line-height:1.5!important}
button{letter-spacing:-.015em}button:disabled{opacity:.62} .draw-card:disabled{opacity:1!important}
@media(max-width:900px){.draw-mode-grid{grid-template-columns:1fr 1fr;gap:8px}.draw-mode-card{min-height:118px;padding:12px}.draw-mode-card i{width:34px;height:34px;font-size:20px;margin-bottom:6px}.draw-mode-card b{font-size:19px}.draw-mode-card span{font-size:11px}.draw-mode-nav{gap:4px;padding:5px}.draw-mode-nav button{padding:6px 8px;font-size:11px}.yut-node>.yut-piece{width:90%!important}.yut-bench .yut-piece{width:27px!important;height:27px!important}}
@media(max-width:520px){.draw-mode-menu{padding:4px;gap:8px}.draw-mode-menu-head h3{font-size:25px}.draw-mode-grid{grid-template-columns:1fr 1fr;gap:6px}.draw-mode-card{min-height:104px;padding:9px;border-radius:14px}.draw-mode-card b{font-size:16px}.draw-mode-card span{font-size:10px;margin-top:4px}.draw-mode-card i{width:30px;height:30px;font-size:18px}.draw-mode-nav .draw-mode-home{margin-left:0}.draw-mode-nav button{font-size:10px;padding:5px 6px}}


/* v22 · one outline only: light text -> dark outline, dark text -> white outline */
.text-outline-dark{
  -webkit-text-stroke:.28px rgba(8,13,25,.96)!important;
  text-shadow:1px 0 0 rgba(8,13,25,.96),-1px 0 0 rgba(8,13,25,.96),0 1px 0 rgba(8,13,25,.96),0 -1px 0 rgba(8,13,25,.96)!important;
}
.text-outline-light{
  -webkit-text-stroke:.28px rgba(255,255,255,.98)!important;
  text-shadow:1px 0 0 rgba(255,255,255,.98),-1px 0 0 rgba(255,255,255,.98),0 1px 0 rgba(255,255,255,.98),0 -1px 0 rgba(255,255,255,.98)!important;
}
/* Icons/emoji/art are intentionally not outlined. */
.no-auto-text-outline,.tile-visual,.game-art,.yut-piece-main,.draw-mode-card>i,.rps-hand,.luck-title-icon{ -webkit-text-stroke:0!important; }

/* Dynamic home stickers. */
.game-tile>.tile-badge{display:none!important}
.game-tile{position:relative!important}
.v22-badge-stack{position:absolute;z-index:12;left:10px;top:9px;display:flex;align-items:center;pointer-events:none}
.v22-game-badge{display:inline-flex;align-items:center;justify-content:center;min-height:23px;padding:4px 8px;border-radius:999px;border:2px solid rgba(255,255,255,.94);box-shadow:0 4px 9px rgba(39,57,103,.16);font-size:10px;font-weight:1000;line-height:1;letter-spacing:.07em;color:#fff;white-space:nowrap}
.v22-game-badge.off{background:#6477a8}.v22-game-badge.on{background:#25aa81}
/* HOT / NEW / 추천 are separate corner post-it stickers, never inline with ON/OFF. */
.v23-promo-stack{position:absolute;z-index:18;right:-3px;top:10px;display:flex;flex-direction:column;align-items:flex-end;gap:5px;pointer-events:none;transform-origin:100% 0}
.v23-promo-sticker{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:50px;min-height:29px;padding:5px 10px 5px 11px;border:1px solid rgba(80,65,70,.10);border-radius:5px 2px 5px 3px;color:#fff;font-size:11px;font-weight:1000;line-height:1;letter-spacing:.06em;white-space:nowrap;box-shadow:0 5px 9px rgba(45,55,90,.18),inset 0 1px 0 rgba(255,255,255,.42);clip-path:polygon(3% 4%,98% 0,100% 91%,6% 100%,0 14%)}
.v23-promo-sticker::after{content:"";position:absolute;left:12%;right:12%;top:-3px;height:6px;border-radius:2px;background:rgba(255,255,255,.48);box-shadow:0 1px 2px rgba(50,50,60,.08)}
.v23-promo-sticker.hot{background:linear-gradient(145deg,#ff665a,#f23852);transform:rotate(5deg)}
.v23-promo-sticker.new{background:linear-gradient(145deg,#65cf47,#2fac67);transform:rotate(-4deg)}
.v23-promo-sticker.reco{background:linear-gradient(145deg,#8e72ff,#a44ee8);transform:rotate(3deg)}
.v23-promo-sticker:nth-child(2){margin-right:7px}.v23-promo-sticker:nth-child(3){margin-right:2px}
@media(max-width:520px){.v22-badge-stack{left:7px;top:7px}.v22-game-badge{min-height:20px;padding:3px 6px;font-size:9px}.v23-promo-stack{right:-2px;top:8px;gap:3px}.v23-promo-sticker{min-width:42px;min-height:24px;padding:4px 7px 4px 8px;font-size:9px;border-radius:4px 2px 4px 3px}.v23-promo-sticker::after{height:5px;top:-2px}}

/* Yut animal selector and true 1:1 circular pieces. */
.yut-animal-picker{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0 0 8px;padding:8px;border:1px solid #d9e4f6;border-radius:15px;background:#f7faff;box-shadow:0 6px 15px rgba(49,73,120,.07)}
.yut-animal-row{min-width:0}.yut-animal-row>strong{display:block;margin-bottom:5px;color:#304a82;font-size:11px;font-weight:1000}.yut-animal-options{display:flex;gap:4px;flex-wrap:wrap}
.yut-animal-btn{width:31px!important;height:31px!important;min-width:31px!important;min-height:31px!important;aspect-ratio:1/1!important;padding:0!important;border-radius:50%!important;border:2px solid #d5e0f4!important;background:#fff!important;display:grid!important;place-items:center!important;font-size:18px!important;line-height:1!important;box-shadow:0 3px 7px rgba(48,70,118,.10)!important;cursor:pointer}
.yut-animal-btn.selected{border-color:#546fe4!important;box-shadow:0 0 0 2px #cbd4ff,0 4px 8px rgba(69,88,175,.18)!important}.yut-animal-btn:disabled{opacity:.28!important;filter:grayscale(.7);cursor:not-allowed!important}.yut-animal-btn.selected:disabled{opacity:1!important;filter:none}
.yut-piece{box-sizing:border-box!important;width:auto!important;height:auto!important;aspect-ratio:1/1!important;border-radius:50%!important;overflow:visible!important;flex:0 0 auto!important;padding:0!important}
.yut-node>.yut-piece{width:88%!important;height:auto!important;max-width:48px!important;max-height:none!important;aspect-ratio:1/1!important}
.yut-bench .yut-piece{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;aspect-ratio:1/1!important;border-radius:50%!important}
.yut-piece-main{position:absolute!important;inset:7%!important;width:auto!important;height:auto!important;aspect-ratio:1/1!important;border-radius:50%!important;display:grid!important;place-items:center!important;overflow:hidden!important;background:#fffaf2!important;color:#172340!important;font-size:clamp(17px,1.65vw,25px)!important;line-height:1!important;text-shadow:none!important;-webkit-text-stroke:0!important}
.yut-piece-main::before,.yut-piece-main::after{display:none!important;content:none!important}
.yut-stack-count{white-space:nowrap!important;word-break:keep-all!important;writing-mode:horizontal-tb!important}
@media(max-width:900px){.yut-animal-picker{grid-column:1/3;margin-bottom:1px;padding:5px}.yut-animal-btn{width:27px!important;height:27px!important;min-width:27px!important;min-height:27px!important;font-size:16px!important}.yut-node>.yut-piece{width:90%!important}.yut-bench .yut-piece{width:29px!important;height:29px!important;min-width:29px!important;min-height:29px!important}}
/* The four important yut junctions are unlabeled thick circles. */
.yut-node.special-marker{
  background:radial-gradient(circle at 35% 28%,#fff,#f4f8ff 72%)!important;
  border:5px solid #284681!important;
  box-shadow:0 0 0 3px #fff,0 5px 13px rgba(35,60,110,.25),inset 0 0 0 2px #9fb5e6!important;
}
.yut-node.special-marker.center{
  background:radial-gradient(circle at 35% 28%,#fffdf7,#f2f7ff 74%)!important;
  border-width:6px!important;
}
.yut-node.special-marker .yut-node-label{display:none!important}

/* True circular character-face yut pieces. */
.yut-piece{
  aspect-ratio:1 / 1!important;
  border-radius:50%!important;
  padding:0!important;
  overflow:visible!important;
  display:grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  border:3px solid #fff!important;
}
.yut-node>.yut-piece{width:84%!important;height:84%!important;min-width:0!important;min-height:0!important}
.yut-bench .yut-piece{width:32px!important;height:32px!important}
.yut-piece::before{display:none!important}
.yut-piece-main{
  position:absolute!important;inset:11%!important;width:auto!important;height:auto!important;
  border-radius:50%!important;background:#fffaf2!important;color:transparent!important;
  display:block!important;overflow:hidden!important;box-shadow:inset 0 -2px 3px rgba(31,48,83,.08)!important;
}
.yut-piece-main::before{
  content:"•  •";position:absolute;left:50%;top:25%;transform:translateX(-50%);
  width:100%;text-align:center;color:#263657;font-size:clamp(9px,1.0vw,15px);font-weight:1000;
  letter-spacing:.12em;line-height:1;text-shadow:none!important;white-space:nowrap;
}
.yut-piece-main::after{
  content:"⌣";position:absolute;left:50%;top:48%;transform:translateX(-50%);
  color:#ef6c78;font-size:clamp(9px,1vw,15px);font-weight:1000;line-height:1;text-shadow:none!important;
}
.yut-piece.host{background:radial-gradient(circle at 32% 28%,#ffb1b8,#f04e66 60%,#b92342)!important}
.yut-piece.guest{background:radial-gradient(circle at 32% 28%,#add8ff,#4d83ea 60%,#244daf)!important}
.yut-stack-count{
  left:50%!important;top:-17px!important;transform:translateX(-50%)!important;
  min-width:34px!important;height:20px!important;padding:0 7px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  white-space:nowrap!important;word-break:keep-all!important;writing-mode:horizontal-tb!important;
  line-height:1!important;font-size:11px!important;font-weight:1000!important;z-index:30!important;
  color:#17284d!important;background:#fff!important;border:2px solid #17284d!important;
}
@media(max-width:900px){.yut-node>.yut-piece{width:88%!important;height:88%!important}.yut-bench .yut-piece{width:29px!important;height:29px!important}}



/* v24 · large OFFLINE / ONLINE home tabs */
.home-game-tabs{
  position:relative;
  width:min(100%,1180px);
  margin:4px auto 4px;
  padding:8px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  border:2px solid rgba(113,132,199,.20);
  border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(241,246,255,.98));
  box-shadow:0 15px 34px rgba(49,72,139,.13),inset 0 1px 0 #fff;
  isolation:isolate;
}
.home-game-tab{
  position:relative;
  min-width:0;
  min-height:82px;
  padding:13px 18px;
  border:2px solid transparent;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  cursor:pointer;
  background:#f6f8ff;
  color:#334a8c;
  font:inherit;
  font-weight:1000;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease;
  box-shadow:inset 0 0 0 1px rgba(100,120,184,.08);
}
.home-game-tab:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(53,78,150,.13),inset 0 0 0 1px rgba(100,120,184,.08)}
.home-game-tab:active{transform:translateY(1px)}
.home-game-tab .tab-icon{font-size:clamp(27px,2.4vw,38px);line-height:1;filter:drop-shadow(0 3px 3px rgba(44,65,120,.12))}
.home-game-tab .tab-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0;text-align:left}
.home-game-tab .tab-copy strong{font-size:clamp(21px,1.9vw,30px);line-height:1.05;letter-spacing:-.035em;white-space:nowrap}
.home-game-tab .tab-copy small{margin-top:5px;color:#7b8ab5;font-size:11px;font-weight:900;letter-spacing:.04em;white-space:nowrap}
.home-game-tab .tab-state{
  flex:0 0 auto;
  min-width:43px;
  padding:6px 9px;
  border-radius:999px;
  text-align:center;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.08em;
}
.home-game-tab[data-game-tab="offline"] .tab-state{background:#fff0f4;color:#d94f77;border:1px solid #ffc8d6}
.home-game-tab[data-game-tab="online"] .tab-state{background:#e9fbf6;color:#168c70;border:1px solid #bcebdd}
.home-game-tab[data-game-tab="offline"].active{
  background:linear-gradient(145deg,#fff0f5,#fff7ed 58%,#fff);
  color:#9e3159;
  border-color:#ffafc4;
  box-shadow:0 12px 25px rgba(223,76,118,.16),inset 0 2px 0 #fff;
}
.home-game-tab[data-game-tab="online"].active{
  background:linear-gradient(145deg,#eafff8,#eef9ff 58%,#fff);
  color:#147b69;
  border-color:#8be0c8;
  box-shadow:0 12px 25px rgba(35,176,145,.16),inset 0 2px 0 #fff;
}
.home-game-tab.active::after{
  content:"";
  position:absolute;
  left:50%;bottom:-10px;
  width:17px;height:17px;
  transform:translateX(-50%) rotate(45deg);
  background:inherit;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  opacity:.42;
  border-radius:0 0 4px 0;
}
/* v25: stronger than legacy #hubScreen .home-section display:block!important */
#hubScreen.arcade-home .game-tab-panel[hidden]{display:none!important;visibility:hidden!important;pointer-events:none!important}
#hubScreen.arcade-home .game-tab-panel:not([hidden]){display:block!important;visibility:visible!important;pointer-events:auto!important}
.game-tab-panel.tab-panel-active{animation:v24TabPanelIn .22s ease both}
.game-tab-panel>.home-section-head{display:none!important}
@keyframes v24TabPanelIn{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:700px){
  .home-game-tabs{padding:6px;gap:6px;border-radius:21px;margin-top:0}
  .home-game-tab{min-height:66px;padding:9px 8px;gap:7px;border-radius:16px}
  .home-game-tab .tab-icon{font-size:25px}
  .home-game-tab .tab-copy strong{font-size:clamp(16px,4.8vw,21px)}
  .home-game-tab .tab-copy small{display:none}
  .home-game-tab .tab-state{min-width:36px;padding:5px 6px;font-size:9px}
  .home-game-tab.active::after{bottom:-8px;width:13px;height:13px}
}
@media(max-width:390px){
  .home-game-tab{gap:5px;padding-inline:6px}
  .home-game-tab .tab-icon{font-size:21px}
  .home-game-tab .tab-copy strong{font-size:15px}
  .home-game-tab .tab-state{min-width:32px;padding:4px 5px;font-size:8px}
}


/* AD TV: outer frame 700 wide, inner screen 16:9, no crop */
#hubScreen .random-recommend-section,
section.random-recommend-section{
  width:min(700px,100%)!important;
  max-width:700px!important;
  height:auto!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}
#hubScreen .recommend-viewport,
.recommend-viewport{
  width:100%!important;
  max-width:100%!important;
  aspect-ratio:16/9!important;
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  flex:0 0 auto!important;
  overflow:hidden!important;
}
#hubScreen .random-banner-card,
#hubScreen .random-banner-card img,
#hubScreen .random-banner-card .banner-placeholder,
.random-banner-card,
.random-banner-card img,
.random-banner-card .banner-placeholder{
  min-height:0!important;
}


body[data-view="hub"] #onlineGameScreen,
body[data-view="hub"] #luckGameScreen,
body[data-view="hub"] #fishSetupScreen,
body[data-view="hub"] #fishGameScreen,
body[data-view="hub"] #resultScreen,
body[data-view="hub"] .wizard-card,
body[data-view="hub"] .setup-only{
  content-visibility:hidden;
  contain:strict;
}
#hubScreen.arcade-home{
  contain:layout style;
}
#hubScreen .game-tile{
  contain:layout paint;
  content-visibility:auto;
  contain-intrinsic-size:180px 180px;
}
body.hub-booting #hubScreen *{
  animation-play-state:paused !important;
}


body.hub-booting #hubScreen .game-tile,
body.hub-booting .home-game-tab{
  pointer-events:none;
}
body.hub-booting #hubScreen{
  transform:translateZ(0);
}


#hubScreen .recommend-viewport{
  position:relative!important;
  width:100%!important;
  aspect-ratio:16/9!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}
#hubScreen .recommend-viewport .random-recommend-grid{
  position:relative!important;
  display:flex!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
}
#hubScreen .recommend-viewport .random-banner-card,
#hubScreen .recommend-viewport .random-game-card{
  position:relative!important;
  flex:0 0 100%!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  padding:0!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#0b1018!important;
}
#hubScreen .random-banner-card img,
#hubScreen .random-banner-card .banner-placeholder{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:12px!important;
  box-sizing:border-box!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#0b1018!important;
}
@media(max-width:820px){
  #hubScreen .random-banner-card,
  #hubScreen .random-banner-card img,
  #hubScreen .random-banner-card .banner-placeholder{
    min-height:0!important;
  }
}


:root{
  --gp-bg:#eef3fb;
  --gp-card:#ffffff;
  --gp-ink:#1c2436;
  --gp-muted:#66758f;
  --gp-line:rgba(40,64,110,.12);
  --gp-blue:#2f6bff;
  --gp-sky:#3aa0ff;
  --gp-gold:#ffb024;
  --gp-mint:#1dbf8a;
}
html,body{background:var(--gp-bg)!important;color:var(--gp-ink);}
body[data-view="hub"] .app-shell{
  background:
    radial-gradient(circle at 8% -8%, #d7e8ff 0%, transparent 34%),
    radial-gradient(circle at 96% 0%, #ffe7b0 0%, transparent 26%),
    linear-gradient(180deg,#f7fbff 0%, #eef3fb 48%, #f5f7fc 100%)!important;
}
#hubScreen.arcade-home{
  background:transparent!important;
  color:var(--gp-ink);
}
#hubScreen.arcade-home::before,
#hubScreen.arcade-home::after,
#hubScreen .arcade-deco,
#hubScreen .arcade-deco::before,
#hubScreen .arcade-deco::after{display:none!important;}
.arcade-topbar{
  min-height:58px!important;
  padding:8px 2px!important;
}
.arcade-brand-mini{
  color:#1c2436!important;
  text-shadow:none!important;
  letter-spacing:.16em!important;
}
.arcade-brand-mini span{
  background:#fff!important;
  border:1px solid var(--gp-line)!important;
  box-shadow:0 8px 18px rgba(47,107,255,.08)!important;
}
.recent-game-quick,
.arcade-floating-pill,
#todayVisitorCount{
  min-height:40px!important;
  height:auto!important;
  padding:0 12px!important;
  border:1px solid var(--gp-line)!important;
  background:#fff!important;
  color:var(--gp-ink)!important;
  box-shadow:0 8px 18px rgba(32,54,110,.08)!important;
}
#todayVisitorCount{
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  color:var(--gp-ink)!important;
  font-weight:800!important;
}
#todayVisitorCount span{color:#66758f!important;}
#todayVisitorCount b{color:var(--gp-blue)!important;font-size:15px!important;}
.arcade-hero-card{
  background:#fff!important;
  border:1px solid var(--gp-line)!important;
  border-radius:28px!important;
  padding:22px 24px!important;
  box-shadow:0 16px 36px rgba(40,70,130,.08)!important;
}
.arcade-home h1{color:var(--gp-ink)!important;text-shadow:none!important;}
.arcade-home h1 .hero-accent{
  color:var(--gp-blue)!important;
  text-shadow:none!important;
}
.arcade-home .arcade-sub{color:var(--gp-muted)!important;}
.arcade-kicker{color:#7a869e!important;}
.arcade-mascot-wrap{display:block!important;}
.random-recommend-section{
  border:1px solid var(--gp-line)!important;
  border-radius:24px!important;
  background:#fff!important;
  box-shadow:0 16px 34px rgba(40,70,130,.08)!important;
  padding:16px!important;
}
.random-recommend-head h2{color:var(--gp-ink)!important;text-shadow:none!important;}
.random-recommend-kicker{color:var(--gp-blue)!important;}
.recommend-viewport{
  border-radius:16px!important;
  background:#10141d!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)!important;
}
.recommend-app-ad{
  background:#fff!important;
  border:1px solid var(--gp-line)!important;
  box-shadow:0 10px 24px rgba(40,70,130,.06)!important;
}
.recommend-app-ad-title{color:var(--gp-ink)!important;}
.recommend-app-ad-text{color:var(--gp-muted)!important;}
.recommend-app-ad a{
  background:linear-gradient(180deg,#2f6bff,#1f56e6)!important;
  color:#fff!important;
}
.home-game-tabs{
  background:#fff!important;
  border:1px solid var(--gp-line)!important;
  box-shadow:0 12px 28px rgba(40,70,130,.07)!important;
}
.home-game-tab{background:#f6f8fd!important;color:#445069!important;}
.home-game-tab.active{
  background:#fff!important;
  border-color:rgba(47,107,255,.35)!important;
  color:var(--gp-ink)!important;
  box-shadow:0 8px 16px rgba(47,107,255,.10)!important;
}
.home-section-head h3,#hubScreen h3{color:var(--gp-ink)!important;}
.arcade-home .game-tile{
  background:#fff!important;
  border:1px solid var(--gp-line)!important;
  box-shadow:0 12px 26px rgba(40,70,130,.07)!important;
  color:var(--gp-ink)!important;
}
.arcade-home .game-tile:hover{
  transform:translateY(-4px);
  border-color:rgba(47,107,255,.28)!important;
  box-shadow:0 16px 30px rgba(47,107,255,.12)!important;
}
.arcade-home .tile-copy strong{color:var(--gp-ink)!important;}
.arcade-home .tile-copy small{color:#7b879d!important;}
#site-version-fixed{
  background:rgba(255,255,255,.86)!important;
  color:#5b6780!important;
  border:1px solid var(--gp-line)!important;
}
body:not([data-view="hub"]) #site-version-fixed{display:none!important;}
body[data-view="hub"] #site-version-fixed{display:flex!important;}


#hubScreen .random-banner-card .banner-placeholder,
.random-banner-card .banner-placeholder{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  margin:0!important;
  padding:0!important;
  position:absolute!important;
  inset:0!important;
  font-size:clamp(18px,2.4vw,28px)!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
  color:#dbe7ff!important;
  background:#0b1018!important;
  line-height:1.2!important;
}
#hubScreen .random-banner-card,
.random-banner-card{
  position:relative!important;
}


.game-tile .tile-visual{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  border-radius:18px;
  overflow:hidden;
  background:#d7e4f7;
}
.game-tile .tile-photo{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* do not hide hub, do not paint over gameplay widgets */


/* Interior visual pass. Logic/hit-areas unchanged. pointer-events kept. */

#fishGameScreen .fishing-scene{background-image:none!important;
  background:
    linear-gradient(180deg,rgba(135,213,237,.42) 0%,rgba(200,238,248,.18) 36%,rgba(15,100,137,.55) 41%,rgba(8,62,97,.72) 100%),
    url("assets/fishing.jpg") center top / cover no-repeat !important;
  box-shadow:inset 0 -40px 50px rgba(0,40,70,.18);
}
#fishGameScreen .fish-control-deck,
#fishSetupScreen .fish-odds-panel,
#fishSetupScreen .wizard-card{
  background:rgba(255,255,255,.88)!important;
  border:1px solid rgba(30,90,140,.12)!important;
  box-shadow:0 16px 32px rgba(20,60,100,.12)!important;
  backdrop-filter:blur(12px);
  border-radius:22px!important;
}
#fishGameScreen .caught-fish,
#fishGameScreen .chibi-fish-art{
  filter:drop-shadow(0 8px 10px rgba(0,40,70,.25));
}

.yut-arena,
.yut-board-wrap{
  filter:drop-shadow(0 18px 24px rgba(80,50,20,.14));
}
.yut-board{
  background:
    radial-gradient(circle at 28% 22%,rgba(255,255,255,.5),transparent 34%),
    url("assets/yut.jpg") center/cover no-repeat,
    linear-gradient(145deg,#f2dfb9,#d2ad78 72%,#c89b63)!important;
  box-shadow:0 18px 36px rgba(90,50,20,.18), inset 0 0 0 3px rgba(255,236,200,.55)!important;
}
.yut-board::after{
  content:"";
  position:absolute;inset:8%;
  border:2px solid rgba(255,248,230,.35);
  border-radius:24px;
  pointer-events:none;
}
.yut-piece,
.yut-piece-main{
  filter:drop-shadow(0 6px 8px rgba(80,40,10,.28));
}
.yut-stick{
  box-shadow:0 8px 14px rgba(80,40,10,.22);
  border-radius:10px;
}
.yut-throw-btn{
  background:linear-gradient(180deg,#ffd36a,#f0a020)!important;
  color:#3a2408!important;
  box-shadow:0 12px 20px rgba(180,100,10,.25)!important;
  border:0!important;
}
.yut-side-panel,
.yut-side-card,
.yut-bench{
  background:rgba(255,252,246,.9)!important;
  border:1px solid rgba(140,90,40,.12)!important;
  box-shadow:0 10px 22px rgba(90,50,20,.08)!important;
}

#luckGameScreen{
  background:
    linear-gradient(180deg,rgba(255,250,252,.78),rgba(255,255,255,.86)),
    url("assets/luck.jpg") center/cover no-repeat !important;
}
.luck-stage,
.luck-main,
.luck-rule-card,
.luck-score-card{
  background:rgba(255,255,255,.9)!important;
  border:1px solid rgba(180,80,120,.12)!important;
  box-shadow:0 16px 30px rgba(120,40,80,.08)!important;
  border-radius:22px!important;
}
.luck-topbar{
  background:rgba(255,255,255,.82)!important;
  backdrop-filter:blur(16px);
}

#onlineGameScreen{
  background:
    linear-gradient(180deg,rgba(245,250,255,.82),rgba(255,255,255,.9)),
    url("assets/online.jpg") center/cover no-repeat !important;
}
.online-lobby-panel,
.online-layout,
.online-arena,
.online-match-lobby{
  background:rgba(255,255,255,.9)!important;
  border:1px solid rgba(50,90,160,.12)!important;
  box-shadow:0 16px 32px rgba(40,70,140,.10)!important;
  border-radius:22px!important;
}

#gameScreen .ladder-paper,
#gameScreen .wizard-card,
#resultScreen{
  background:
    linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,252,245,.9)),
    url("assets/ladder.jpg") center/cover no-repeat !important;
  box-shadow:0 18px 34px rgba(80,50,20,.10)!important;
}
#gameScreen .wizard-card{
  border-radius:24px!important;
}

.primary-btn, button.btn-play, .fishing-start-btn{
  transform:translateZ(0);
}


:root{
  --ui-bg:#eef4ff;
  --ui-paper:#ffffff;
  --ui-ink:#1c2740;
  --ui-muted:#66758f;
  --ui-line:rgba(36,64,120,.13);
  --ui-blue:#2f6bff;
  --ui-gold:#ffb024;
  --ui-radius:22px;
}
html,body{
  background:var(--ui-bg)!important;
  color:var(--ui-ink)!important;
}
.app-shell, .hub-screen, .wizard-card, .modal, .modal-card,
#gameScreen, #resultScreen, #savedGamesModal,
#fishSetupScreen, #fishGameScreen, #luckGameScreen, #onlineGameScreen{
  font-family:"Noto Sans KR", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, .btn, input, select, textarea{
  border-radius:14px!important;
  font-weight:800;
}
input, select, textarea{
  border:1px solid var(--ui-line)!important;
  background:#fff!important;
  color:var(--ui-ink)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.app-topbar, .arcade-topbar, .luck-topbar, .fish-game-titlebar, .fish-title-actions,
.online-topbar, .game-topbar{
  background:rgba(255,255,255,.86)!important;
  border-bottom:1px solid var(--ui-line)!important;
  backdrop-filter:blur(16px);
}
.wizard-card, .card, .modal-card, .online-lobby-panel, .luck-rule-card, .luck-score-card,
.fish-odds-panel, .fish-control-deck, .yut-side-panel, .yut-side-card, .ladder-paper{
  background:rgba(255,255,255,.92)!important;
  border:1px solid var(--ui-line)!important;
  border-radius:var(--ui-radius)!important;
  box-shadow:0 16px 36px rgba(36,64,120,.10)!important;
}
.primary-btn, .fishing-start-btn, .yut-throw-btn, #createGameBtn, #newGameBtn,
#createOnlineRoomBtn, #joinOnlineRoomBtn, #onlineReadyBtn{
  background:linear-gradient(180deg,#4d86ff,#2f6bff)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 12px 22px rgba(47,107,255,.24)!important;
}
.yut-throw-btn{
  background:linear-gradient(180deg,#ffd36a,#f0a020)!important;
  color:#3a2408!important;
}
.secondary-btn, .luck-back-btn, .online-leave-btn, .ladder-toggle-btn{
  background:#fff!important;
  color:var(--ui-ink)!important;
  border:1px solid var(--ui-line)!important;
}

/* HUB already has tiles; polish leftover chrome */
#hubScreen .home-section-head h3{letter-spacing:-.04em;}
#hubScreen .game-tile{
  border-radius:24px!important;
  overflow:hidden;
}

/* LADDER play + setup + result */
#gameScreen, #resultScreen{
  background:
    linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,250,240,.88)),
    url("assets/ladder.jpg") center/cover no-repeat !important;
}
#gameScreen .player-chip, #gameScreen .player-row, .saved-list div{
  background:#fff!important;
  border:1px solid var(--ui-line)!important;
  border-radius:16px!important;
}

/* FISH all phases */
#fishSetupScreen, #fishGameScreen{
  background:
    linear-gradient(180deg,rgba(220,244,255,.72),rgba(255,255,255,.82)),
    url("assets/fishing.jpg") center/cover no-repeat !important;
}
.fish-result-card, .fish-history, .fish-hud{
  background:rgba(255,255,255,.9)!important;
  border:1px solid rgba(20,80,120,.12)!important;
  border-radius:18px!important;
  box-shadow:0 12px 24px rgba(20,70,110,.12)!important;
}

/* YUT */
.yut-arena{
  background:
    linear-gradient(180deg,rgba(255,248,235,.55),rgba(255,255,255,.2)),
    url("assets/yut.jpg") center/cover no-repeat;
  border-radius:28px;
  padding:12px;
}
.yut-node{box-shadow:0 0 0 3px rgba(255,255,255,.65),0 6px 10px rgba(80,40,10,.16)!important;}
.yut-move-chip{border-radius:999px!important;box-shadow:0 8px 16px rgba(80,40,10,.16)!important;}
.yut-win-overlay{backdrop-filter:blur(10px);}

/* LUCK all minigames share stage */
#luckGameScreen, .luck-bg, .luck-stage{
  background-color:transparent!important;
}
.luck-game-content, .luck-main{
  background:rgba(255,255,255,.9)!important;
  border-radius:24px!important;
  box-shadow:0 16px 32px rgba(120,40,80,.10)!important;
}

/* ONLINE all phases */
#onlineGameScreen .online-lobby,
#onlineGameScreen .online-match-lobby,
#onlineGameScreen .online-arena,
#onlineGameScreen .online-game-content{
  background:rgba(255,255,255,.92)!important;
  border:1px solid var(--ui-line)!important;
  border-radius:24px!important;
  box-shadow:0 16px 32px rgba(40,70,140,.10)!important;
}

.modal, .app-exit-dialog{
  background:rgba(20,30,50,.35)!important;
}
.modal > div, .app-exit-dialog > div, .modal-card{
  background:#fff!important;
}


html,body{max-width:100%;overflow-x:hidden;}
.app-shell, #hubScreen, #gameScreen, #resultScreen,
#fishSetupScreen, #fishGameScreen, #luckGameScreen, #onlineGameScreen{
  max-width:100%;
  min-height:100dvh;
  box-sizing:border-box;
  padding-left:max(10px, env(safe-area-inset-left));
  padding-right:max(10px, env(safe-area-inset-right));
  padding-bottom:max(12px, env(safe-area-inset-bottom));
}

/* Tiles: show full art, do not crop the picture or the title */
#hubScreen .game-tile{
  overflow:visible!important;
  min-height:0!important;
  height:auto!important;
  grid-template-rows:auto auto auto!important;
}
#hubScreen .game-tile .tile-visual{
  aspect-ratio:16/10;
  overflow:hidden;
  background:#e8eef8;
}
#hubScreen .game-tile .tile-photo{
  width:100%;
  height:100%;
  object-fit:contain!important;
  object-position:center!important;
  background:#eef3fb;
}
#hubScreen .game-tile .tile-copy{
  overflow:visible!important;
  padding:8px 4px 10px!important;
}
#hubScreen .game-tile .tile-copy strong,
#hubScreen .game-tile .tile-copy small{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:unset!important;
  display:block;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
#hubScreen .home-game-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
@media(max-width:720px){
  #hubScreen .arcade-hero-card{padding:14px!important;}
  #hubScreen h1{font-size:clamp(28px,8vw,40px)!important;line-height:1.15!important;}
  #hubScreen .arcade-sub{font-size:14px!important;}
  #hubScreen .home-game-tab{min-height:64px!important;padding:10px!important;}
  #hubScreen .game-tile .tile-copy strong{font-size:15px!important;}
  #hubScreen .game-tile .tile-copy small{font-size:11px!important;}
  .random-recommend-section{width:min(100%,700px)!important;margin:0 auto;}
  #todayVisitorCount{font-size:12px!important;}
}
@media(max-width:420px){
  #hubScreen .home-game-grid{gap:8px!important;}
  #hubScreen .arcade-topbar{gap:6px;}
}

/* Game screens: scroll instead of clipping controls */
#gameScreen, #fishGameScreen, #fishSetupScreen, #luckGameScreen, #onlineGameScreen, #resultScreen{
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
.fishing-scene, .yut-arena, .luck-stage, .online-arena{
  max-width:100%!important;
}
.yut-board{width:min(92vw,64vh,610px)!important;}


/* 사다리 1단계: 안잘리게 + 모바일 맞춤. 규칙/캔버스 로직 유지 */

body[data-view="game"] #step1,
body[data-view="game"] #step2,
body[data-view="game"] #step3,
body[data-view="game"] #step4,
body[data-view="result"] #resultScreen{
  width:100%;
  max-width:100%;
  min-height:100dvh;
  box-sizing:border-box;
  overflow-x:hidden;
  overflow-y:auto;
}

body[data-view="game"] .wizard-card,
body[data-view="game"] #step1,
body[data-view="game"] #step2,
body[data-view="game"] #step3{
  background:
    linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,250,240,.92)),
    url("assets/ladder.jpg") center/cover no-repeat;
}

body[data-view="game"] .wizard-actions{
  position:sticky;
  bottom:0;
  z-index:5;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:10px 0 max(10px, env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.96) 30%,#fff);
}
body[data-view="game"] .wizard-actions .primary-btn,
body[data-view="game"] .wizard-actions .secondary-btn{
  flex:1 1 140px;
  min-height:48px;
}

body[data-view="game"] #step4{
  display:flex!important;
  flex-direction:column;
  height:100dvh;
  max-height:100dvh;
  padding-bottom:0!important;
}
body[data-view="game"] #step4 > header.game-titlebar,
body[data-view="game"] .game-titlebar{
  height:auto!important;
  min-height:56px!important;
  flex:0 0 auto;
  padding:8px 10px!important;
  gap:8px!important;
  flex-wrap:wrap;
}
body[data-view="game"] .playfield{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  display:flex;
  flex-direction:column;
  padding:6px!important;
}
body[data-view="game"] #ladderPanel.ladder-paper{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  display:flex;
  flex-direction:column;
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(80,50,20,.12)!important;
  box-shadow:0 16px 28px rgba(80,50,20,.10)!important;
}
body[data-view="game"] .paper-topbar{
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:8px 10px!important;
}
body[data-view="game"] .blind-title span:last-child{
  display:block;
  font-size:12px;
  line-height:1.3;
  white-space:normal!important;
}
body[data-view="game"] .board-wrap{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  overflow:hidden!important;
}
body[data-view="game"] .board-inner{
  height:100%!important;
  min-height:280px!important;
  grid-template-rows:minmax(52px,auto) minmax(180px,1fr) minmax(40px,auto)!important;
}
body[data-view="game"] #ladderCanvas{
  width:100%!important;
  max-width:100%!important;
  min-height:180px!important;
  height:auto!important;
}
body[data-view="game"] .label-row,
body[data-view="game"] .top-labels{
  height:auto!important;
  min-height:44px;
}
body[data-view="game"] .player-name-input{
  font-size:12px!important;
  height:28px!important;
}
body[data-view="game"] .paper-footer{
  flex:0 0 auto;
  min-height:0!important;
  padding:8px 10px max(10px, env(safe-area-inset-bottom))!important;
}
body[data-view="game"] .paper-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
body[data-view="game"] .paper-actions button{
  flex:1 1 120px;
  min-height:44px;
}

@media(max-width:700px){
  body[data-view="game"] .playfield{min-height:0!important;}
  body[data-view="game"] .board-wrap{min-height:240px!important;}
  body[data-view="game"] .board-inner{height:auto!important;min-height:240px!important;}
  body[data-view="game"] .title-mascot{width:34px!important;height:34px!important;}
  body[data-view="game"] .game-title-group h1,
  body[data-view="game"] .game-title-group strong{font-size:16px!important;}
}


body[data-view="game"] #step4,
body[data-view="game"] .playfield,
body[data-view="game"] #ladderPanel,
body[data-view="game"] .board-wrap,
body[data-view="game"] .board-inner{
  overflow:hidden!important;
  scrollbar-width:none!important;
}
body[data-view="game"] #step4::-webkit-scrollbar,
body[data-view="game"] .playfield::-webkit-scrollbar,
body[data-view="game"] .board-wrap::-webkit-scrollbar,
body[data-view="game"] .board-inner::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}
body[data-view="game"] #step4{
  height:100dvh!important;
  max-height:100dvh!important;
  overflow:hidden!important;
}
body[data-view="game"] .board-inner{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
body[data-view="game"] #ladderCanvas{
  display:block;
  width:100%!important;
  max-width:100%!important;
}
body[data-view="game"] .label-row{
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
}
body[data-view="game"] .top-label-stack,
body[data-view="game"] .player-name-input{
  max-width:min(88px,18vw)!important;
}
@media(max-width:700px){
  body[data-view="game"] .playfield{min-height:0!important;}
  body[data-view="game"] .board-wrap{overflow:hidden!important;min-height:0!important;}
}


body[data-view="game"] .board-inner{
  display:grid!important;
  grid-template-rows:96px minmax(0,1fr) 68px!important;
  height:100%!important;
  min-height:0!important;
  width:100%!important;
  overflow:hidden!important;
}
body[data-view="game"] .top-labels{
  height:96px!important;
  min-height:96px!important;
  overflow:visible!important;
  position:relative!important;
}
body[data-view="game"] .bottom-labels{
  height:68px!important;
  min-height:68px!important;
  overflow:visible!important;
  position:relative!important;
}
body[data-view="game"] .top-label-stack{
  position:absolute!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:6px!important;
  z-index:3!important;
}
body[data-view="game"] .top-label-stack .label-chip,
body[data-view="game"] .top-number-chip{
  position:static!important;
  transform:none!important;
  min-width:36px!important;
  padding:6px 8px!important;
  font-size:16px!important;
}
body[data-view="game"] .bottom-labels .label-chip{
  position:absolute!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  white-space:nowrap!important;
  max-width:min(120px,18vw)!important;
  padding:8px 10px!important;
  font-size:15px!important;
  line-height:1.1!important;
}
body[data-view="game"] .label-chip.played::after{
  content:none!important;
  font-size:12px!important;
  margin-left:3px!important;
}
body[data-view="game"] .board-wrap{
  overflow:hidden!important;
}
body[data-view="game"] #ladderCanvas{
  min-height:0!important;
  height:100%!important;
}


/* Numbers were under the canvas. Keep chips above the board drawing. */
body[data-view="game"] .board-inner{
  min-width:0!important;
  position:relative!important;
}
body[data-view="game"] #ladderCanvas{
  position:relative!important;
  z-index:1!important;
  height:100%!important;
  max-height:100%!important;
}
body[data-view="game"] .top-labels,
body[data-view="game"] .bottom-labels{
  position:relative!important;
  z-index:8!important;
  overflow:visible!important;
}
body[data-view="game"] .top-label-stack{
  z-index:9!important;
}
body[data-view="game"] .bottom-labels .label-chip{
  position:absolute!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  z-index:9!important;
  white-space:nowrap!important;
}


body[data-view="game"] .label-chip.played::after,
body[data-view="game"] .top-number-chip.played::after{
  content:none!important;
  color:#2a2433!important;
  opacity:1!important;
  font-weight:900!important;
  font-size:13px!important;
  margin-left:3px!important;
  -webkit-text-fill-color:#2a2433!important;
}


body[data-view="game"] .label-chip.played::after,
body[data-view="game"] .top-number-chip.played::after{content:none!important;}
body[data-view="game"] .played-check{
  color:#1f1a24!important;
  -webkit-text-fill-color:#1f1a24!important;
  font-weight:900!important;
  font-size:13px!important;
}


body[data-view="game"] .label-chip.played::after,
body[data-view="game"] .top-number-chip.played::after{content:none!important;display:none!important;}
body[data-view="game"] .played-check,
body[data-view="game"] .played-check svg,
body[data-view="game"] .played-check path{
  color:#1a1520!important;
  -webkit-text-fill-color:#1a1520!important;
  stroke:#1a1520!important;
  filter:none!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
}


#fishGameScreen .fishing-scene,
#fishSetupScreen,
#fishGameScreen{
  background-image:none!important;
}
#fishSetupScreen, #fishGameScreen{
  background:linear-gradient(180deg,#e7f6ff,#f7fbff)!important;
}
.fish-photo{
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 10px 12px rgba(0,40,70,.22));
}
.fish-photo.mini{width:54px;height:36px;}
.fish-odds-thumb{display:grid;place-items:center;overflow:hidden;}
.chibi-fish-art svg{display:none;}


#fishGameScreen .fishing-scene{
  background:
    linear-gradient(180deg,rgba(160,220,255,.25) 0 36%,rgba(6,80,120,.2) 48%,rgba(3,36,64,.32) 100%),
    url("assets/fishing.jpg") center top / cover no-repeat !important;
}
#fishGameScreen .caught-fish{
  width:min(36vw,380px)!important;
  background:transparent!important;
  box-shadow:none!important;
  z-index:16!important;
}
#fishGameScreen .fish-photo{mix-blend-mode:multiply;object-fit:contain;background:transparent!important;}
#fishGameScreen .fish-result-card{z-index:26;max-width:230px;}
.fish-power-wrap{
  width:min(280px,70vw);
  padding:8px 12px 10px;
  border-radius:16px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(20,80,120,.12);
  box-shadow:0 8px 18px rgba(10,40,70,.12);
}
.fish-power-label{display:flex;justify-content:space-between;font-size:12px;font-weight:900;color:#24506e;}
.fish-power-gauge{
  width:100%;
  height:18px;
  margin-top:6px;
  accent-color:#1f8ad8;
}


#fishGameScreen .fishing-scene{
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,20,40,.18)),
    url("assets/sea-bg.jpg") center / cover no-repeat !important;
}
#fishGameScreen .fish-sun,
#fishGameScreen .fish-cloud,
#fishGameScreen .sea-sky-glow{opacity:.18!important;}
.fish-power-wrap{
  width:min(320px,78vw);
  padding:8px 12px 10px;
  border-radius:16px;
  background:rgba(255,255,255,.9);
  border:1px solid rgba(20,80,120,.12);
}
.fish-power-track{
  height:14px;
  margin-top:6px;
  border-radius:999px;
  background:#d7e7f3;
  overflow:hidden;
}
#fishPowerFill{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#7ad0ff,#1f8ad8 60%,#ffb024);
  transition:width .05s linear;
}
#fishingStartBtn.charging{filter:brightness(1.08);transform:translateY(1px);}


#fishGameScreen .fish-photo,
#fishGameScreen .fish-odds-thumb img,
#fishGameScreen .fish-result-portrait img{
  background:transparent!important;
  mix-blend-mode:normal!important;
  object-fit:contain!important;
  box-shadow:none!important;
}
#fishGameScreen .caught-fish,
#fishGameScreen .chibi-fish-art{
  background:transparent!important;
  box-shadow:none!important;
}


#fishGameScreen .first-person-rod{
  width:min(52vw,560px)!important;
  height:min(62vh,520px)!important;
  left:46%!important;
  bottom:-4%!important;
  z-index:19!important;
}
#fishGameScreen .first-person-rod .fp-rod-grip,
#fishGameScreen .first-person-rod .fp-rod-reel,
#fishGameScreen .first-person-rod .fp-rod-blank,
#fishGameScreen .first-person-rod .fp-rod-guide,
#fishGameScreen .first-person-rod .fp-hand{
  display:none!important;
}
#fishGameScreen .fp-rod-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  pointer-events:none;
  filter:drop-shadow(0 10px 12px rgba(0,20,40,.28));
}


#fishGameScreen .fish-sun,
#fishGameScreen .fish-cloud,
#fishGameScreen .sea-sky-glow,
#fishGameScreen .far-island,
#fishGameScreen .shore-line,
#fishGameScreen .water-layer,
#fishGameScreen .sea-sparkles,
#fishGameScreen .fishing-scene::before,
#fishGameScreen .fishing-scene::after{
  display:none!important;
}
#fishGameScreen .cast-zone{
  top:68%!important;
  left:58%!important;
}
#fishGameScreen .fish-bobber{
  top:68%!important;
  left:58%!important;
}
#fishGameScreen .caught-fish{
  width:min(22vw,240px)!important;
  max-height:28vh!important;
  left:58%!important;
  top:58%!important;
  z-index:16!important;
}
#fishGameScreen .caught-fish .fish-photo{
  max-height:26vh;
  object-fit:contain;
}


#fishGameScreen .fish-control-deck{
  left:auto!important;
  right:18px!important;
  bottom:18px!important;
  transform:none!important;
  z-index:45!important;
  align-items:flex-end!important;
}
#fishGameScreen .fish-power-wrap{width:min(260px,72vw);}
#fishingScene.casting .fish-power-wrap,
#fishingScene.waiting-bite .fish-power-wrap,
#fishingScene.biting .fish-power-wrap,
#fishingScene.reeling .fish-power-wrap{
  display:none!important;
}
#fishGameScreen .first-person-rod{z-index:19!important;}


#fishGameScreen .first-person-rod{
  left:22%!important;
  width:min(42vw,420px)!important;
  height:min(38vh,300px)!important;
  bottom:-6%!important;
  z-index:17!important;
}
#fishGameScreen .fish-control-deck{
  left:auto!important;
  right:16px!important;
  bottom:12%!important;
  transform:none!important;
  z-index:50!important;
  align-items:flex-end!important;
}
#fishGameScreen .caught-fish{
  filter:none!important;
}
#fishGameScreen .fish-photo{
  filter:none!important;
  background:transparent!important;
}


#fishGameScreen .caught-fish{
  width:min(42vw,460px)!important;
  max-height:46vh!important;
  left:50%!important;
  top:38%!important;
  transform:translate(-50%,-50%)!important;
  z-index:16!important;
}
#fishGameScreen .caught-fish .fish-photo,
#fishGameScreen .chibi-fish-art,
#fishGameScreen .chibi-fish-art img{
  width:100%!important;
  height:auto!important;
  max-height:44vh!important;
  object-fit:contain!important;
}
#fishGameScreen .fish-result-portrait,
#fishGameScreen .fish-result-portrait img{
  width:88px!important;
  height:88px!important;
  object-fit:contain!important;
}


#fishGameScreen .fish-control-deck,
#fishGameScreen .fish-power-wrap,
#fishGameScreen .fish-toast{
  background:transparent!important;
  box-shadow:none!important;
  border:none!important;
  backdrop-filter:none!important;
}
#fishGameScreen .fish-power-wrap{
  padding:4px 2px!important;
}
#fishGameScreen .fish-power-label{
  color:#fff!important;
  text-shadow:0 1px 4px rgba(0,30,50,.55);
}
#fishGameScreen .fish-power-track{
  background:rgba(255,255,255,.28)!important;
  border:1px solid rgba(255,255,255,.35);
}
#fishGameScreen .fishing-start-btn{
  background:linear-gradient(180deg,#3aa4ff,#1d74d8)!important;
  box-shadow:0 8px 18px rgba(0,40,80,.28)!important;
}


#fishGameScreen .fish-power-wrap{display:none!important;}
#fishGameScreen .fish-power-wrap.is-on{display:block!important;}


/* Light chrome = dark ink. Do not touch gameplay logic. */
.app-topbar, .arcade-topbar, .luck-topbar, .fish-game-titlebar,
.online-topbar, .game-topbar, .hero, .setup-only,
.fish-title-actions .title-btn, .title-btn,
.fish-page-title, .fish-page-title h2, .fish-page-title small,
.fish-hud, .fish-hud span, .fish-hud strong, .fish-hud i,
.fish-result-card, .fish-result-card *,
.fish-odds-panel, .fish-odds-panel *,
.fish-odds-head, .fish-odds-list, .fish-odds-list *,
.wizard-card, .wizard-card *, .modal-card, .modal-card *,
.luck-rule-card, .luck-score-card, .luck-rule-card *, .luck-score-card *,
.yut-side-panel, .yut-side-card, .yut-side-panel *, .yut-side-card *,
.ladder-paper, .paper-footer, .paper-btn, .ladder-toggle-btn,
.label-chip, .top-number-chip, .bottom-labels .label-chip,
.online-lobby-panel, .online-lobby-panel *,
.hub-screen, .game-tile .tile-copy, .game-tile h3, .game-tile p{
  color:#1a2433 !important;
  -webkit-text-fill-color:#1a2433 !important;
}
.fish-page-title small,
.fish-odds-panel small,
.muted, .eyebrow{
  color:#4e5d73 !important;
  -webkit-text-fill-color:#4e5d73 !important;
}
.fish-hud, .fish-result-card, .fish-odds-panel,
.fish-game-titlebar, .title-btn{
  background:rgba(255,255,255,.92) !important;
  border-color:rgba(20,40,70,.12) !important;
}
.fishing-start-btn, .fishing-start-btn *,
.primary-btn, .primary-btn *{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.yut-throw-btn, .yut-throw-btn *{
  color:#3a2408 !important;
  -webkit-text-fill-color:#3a2408 !important;
}
.fish-history-chip{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.fish-power-label, .fish-power-label *{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:0 1px 4px rgba(0,20,40,.55);
}


#fishGameScreen .caught-fish,
#fishGameScreen .caught-fish.jumping,
#fishGameScreen .caught-fish.winner,
#fishGameScreen .caught-fish.blank-fish,
#fishGameScreen .caught-fish.legendary{
  left:50%!important;
  top:42%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
}


#fishGameScreen .caught-fish,
#fishGameScreen .caught-fish.jumping,
#fishGameScreen .caught-fish.winner,
#fishGameScreen .caught-fish.blank-fish,
#fishGameScreen .caught-fish.legendary{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  width:min(48vw,420px)!important;
  max-height:42vh!important;
  translate:-50% -50%!important;
  transform-origin:center center!important;
}
#fishGameScreen .first-person-rod{
  left:50%!important;
  bottom:-2%!important;
  width:min(72vw,520px)!important;
  height:min(48vh,420px)!important;
  transform:translateX(-50%)!important;
  z-index:20!important;
}
#fishGameScreen .fp-rod-photo{
  object-position:center bottom!important;
}
#fishGameScreen .fish-control-deck{
  right:12px!important;
  bottom:14%!important;
  z-index:50!important;
}


#fishGameScreen .first-person-rod{
  left:50%!important;
  bottom:-4%!important;
  width:min(88vw,640px)!important;
  height:min(34vh,280px)!important;
  transform:translateX(-50%)!important;
  z-index:20!important;
}
#fishGameScreen .fp-rod-photo{object-position:center bottom!important;}
#fishGameScreen .fp-rod-grip,
#fishGameScreen .fp-rod-reel,
#fishGameScreen .fp-rod-blank,
#fishGameScreen .fp-rod-guide,
#fishGameScreen .fp-hand{display:none!important;}


#fishGameScreen .caught-fish,
#fishGameScreen .caught-fish.jumping,
#fishGameScreen .caught-fish.winner,
#fishGameScreen .caught-fish.blank-fish,
#fishGameScreen .caught-fish.legendary{
  left:50%!important;
  top:48%!important;
  width:min(46vw,380px)!important;
  max-height:36vh!important;
  translate:-50% -50%!important;
  z-index:21!important;
}
#fishGameScreen .fish-result-card{
  left:auto!important;
  right:14px!important;
  top:86px!important;
  bottom:auto!important;
  max-width:200px!important;
  min-width:160px!important;
  transform:none!important;
  z-index:28!important;
}
#fishGameScreen .fish-hud-right{right:14px!important;top:12px!important;}
#fishGameScreen .first-person-rod{
  left:12%!important;
  bottom:-6%!important;
  width:min(42vw,340px)!important;
  height:min(28vh,220px)!important;
  transform:none!important;
  z-index:18!important;
  pointer-events:none!important;
}
#fishGameScreen .fishing-line{opacity:0!important;}
#fishGameScreen .fish-control-deck{
  right:12px!important;
  left:auto!important;
  bottom:12%!important;
  transform:none!important;
  z-index:50!important;
}


#fishGameScreen .fishing-scene{
  background:
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,20,40,.12)),
    url("assets/sea-bg.jpg") center / cover no-repeat !important;
}
#fishGameScreen .first-person-rod{left:50%!important;bottom:-3%!important;width:min(58vw,480px)!important;height:min(52vh,460px)!important;z-index:20!important;}
#fishGameScreen .fp-rod-photo{object-fit:contain!important;object-position:center bottom!important;}
#fishGameScreen .fp-rod-grip,
#fishGameScreen .fp-rod-reel,
#fishGameScreen .fp-rod-blank,
#fishGameScreen .fp-rod-guide,
#fishGameScreen .fp-hand{display:none!important;}
#fishGameScreen .fishing-line{opacity:0!important;}


#fishGameScreen .caught-fish,
#fishGameScreen .caught-fish.jumping,
#fishGameScreen .caught-fish.winner,
#fishGameScreen .caught-fish.blank-fish,
#fishGameScreen .caught-fish.legendary{
  left:50%!important;
  top:42%!important;
  right:auto!important;
  bottom:auto!important;
  width:min(70vw,340px)!important;
  height:min(30vh,230px)!important;
  max-width:calc(100vw - 24px)!important;
  translate:-50% -50%!important;
  transform:none!important;
  overflow:hidden!important;
  background:transparent!important;
}
#fishGameScreen .caught-fish .chibi-fish-art,
#fishGameScreen .caught-fish .fish-photo,
#fishGameScreen .caught-fish img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
}


#fishGameScreen .first-person-rod{
  left:50%!important;
  transform:translateX(-50%) rotate(-3deg);
  transform-origin:50% 100%!important;
}
#fishingScene.waiting-bite .first-person-rod{
  animation:fishRodIdle 1.15s ease-in-out infinite;
}
@keyframes fishRodIdle{
  0%,100%{transform:translateX(-50%) rotate(-4deg) translateY(0)}
  50%{transform:translateX(-50%) rotate(5deg) translateY(10px)}
}


#fishGameScreen .caught-fish,
#fishGameScreen .caught-fish.jumping,
#fishGameScreen .caught-fish.winner,
#fishGameScreen .caught-fish.blank-fish,
#fishGameScreen .caught-fish.legendary{
  left:50%!important;
  top:36%!important;
  width:min(62vw,320px)!important;
  height:min(26vh,200px)!important;
  translate:-50% -50%!important;
  transform:none!important;
  z-index:22!important;
}


#fishGameScreen .caught-fish,
#fishGameScreen .caught-fish.jumping,
#fishGameScreen .caught-fish.winner,
#fishGameScreen .caught-fish.blank-fish,
#fishGameScreen .caught-fish.legendary{
  left:50%!important;
  top:36%!important;
  width:min(82vw,420px)!important;
  height:min(38vh,300px)!important;
  overflow:visible!important;
  translate:-50% -50%!important;
  transform:none!important;
}
#fishGameScreen .caught-fish .chibi-fish-art,
#fishGameScreen .caught-fish .fish-photo,
#fishGameScreen .caught-fish img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  overflow:visible!important;
}


#fishGameScreen .fishing-scene{overflow:visible!important;}
#fishGameScreen .caught-fish,
#fishGameScreen .caught-fish.jumping,
#fishGameScreen .caught-fish.winner,
#fishGameScreen .caught-fish.blank-fish,
#fishGameScreen .caught-fish.legendary{
  left:50%!important;
  top:40%!important;
  width:56%!important;
  max-width:360px!important;
  height:auto!important;
  max-height:32%!important;
  overflow:visible!important;
  translate:-50% -50%!important;
  transform:none!important;
}
#fishGameScreen .caught-fish img,
#fishGameScreen .caught-fish .fish-photo,
#fishGameScreen .caught-fish .chibi-fish-art{
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
}


#fishGameScreen .first-person-rod{
  left:50%!important;
  bottom:0!important;
  width:min(92vw,720px)!important;
  height:min(58vh,520px)!important;
  transform:translateX(-50%);
  transform-origin:50% 100%!important;
  z-index:20!important;
  overflow:visible!important;
}
#fishGameScreen .fp-rod-only{
  position:absolute;left:50%;bottom:18%;width:42%;height:78%;
  transform:translateX(-50%);
  object-fit:contain;object-position:bottom center;
  pointer-events:none;
  transform-origin:50% 100%;
}
#fishGameScreen .fp-hands-only{
  position:absolute;left:50%;bottom:-2%;width:100%;height:46%;
  transform:translateX(-50%);
  object-fit:contain;object-position:bottom center;
  pointer-events:none;
  z-index:2;
}
#fishingScene.waiting-bite .fp-rod-only{animation:rodTip 1.1s ease-in-out infinite}
#fishingScene.waiting-bite .fp-hands-only{animation:handsIdle 1.1s ease-in-out infinite}
#fishingScene.casting .fp-rod-only{animation:rodCast .8s cubic-bezier(.2,.7,.25,1) 1}
#fishingScene.casting .fp-hands-only{animation:handsCast .8s cubic-bezier(.2,.7,.25,1) 1}
#fishingScene.biting .fp-rod-only{animation:rodBite .4s ease-in-out 3}
#fishingScene.biting .fp-hands-only{animation:handsBite .4s ease-in-out 3}
#fishingScene.reeling .fp-rod-only{animation:rodReel 1s ease-in-out 1}
#fishingScene.reeling .fp-hands-only{animation:handsReel 1s ease-in-out 1}
@keyframes rodTip{0%,100%{transform:translateX(-50%) rotate(-4deg)}50%{transform:translateX(-50%) rotate(6deg)}}
@keyframes handsIdle{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(8px)}}
@keyframes rodCast{0%{transform:translateX(-50%) rotate(-8deg)}40%{transform:translateX(-50%) rotate(-26deg)}70%{transform:translateX(-50%) rotate(14deg)}100%{transform:translateX(-50%) rotate(-4deg)}}
@keyframes handsCast{0%{transform:translateX(-50%) rotate(-4deg)}40%{transform:translateX(-50%) rotate(-12deg) translateY(-10px)}70%{transform:translateX(-50%) rotate(8deg)}100%{transform:translateX(-50%) rotate(0)}}
@keyframes rodBite{0%,100%{transform:translateX(-50%) rotate(-6deg)}50%{transform:translateX(-50%) rotate(12deg)}}
@keyframes handsBite{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(12px) rotate(4deg)}}
@keyframes rodReel{0%{transform:translateX(-50%) rotate(-8deg)}50%{transform:translateX(-50%) rotate(10deg)}100%{transform:translateX(-50%) rotate(-3deg)}}
@keyframes handsReel{0%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}100%{transform:translateX(-50%) translateY(0)}}


#fishGameScreen .first-person-rod{
  left:50%!important;
  right:auto!important;
  bottom:0!important;
  width:min(70vw,560px)!important;
  height:min(62vh,560px)!important;
  transform:translateX(-50%)!important;
}
#fishGameScreen .fp-rod-only{
  left:50%!important;
  bottom:12%!important;
  width:38%!important;
  height:86%!important;
  object-position:center bottom!important;
}
#fishGameScreen .fp-hands-only{
  left:50%!important;
}


#fishGameScreen .fp-rod-only,
#fishGameScreen .fp-hands-only{display:none!important;}
#fishGameScreen .fp-rod-photo{
  display:block!important;
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;
  object-position:center bottom;
}
#fishGameScreen .first-person-rod{
  left:50%!important;
  bottom:-2%!important;
  width:min(64vw,520px)!important;
  height:min(58vh,520px)!important;
  transform:translateX(-50%);
  transform-origin:50% 100%!important;
}
#fishingScene.waiting-bite .first-person-rod{animation:holdIdle 1.15s ease-in-out infinite}
#fishingScene.casting .first-person-rod{animation:holdCast .85s cubic-bezier(.2,.7,.25,1) 1}
#fishingScene.biting .first-person-rod{animation:holdBite .42s ease-in-out 3}
#fishingScene.reeling .first-person-rod{animation:holdReel 1.05s ease-in-out 1}
@keyframes holdIdle{0%,100%{transform:translateX(-50%) rotate(-3deg)}50%{transform:translateX(-50%) rotate(5deg) translateY(8px)}}
@keyframes holdCast{0%{transform:translateX(-50%) rotate(-6deg)}38%{transform:translateX(-50%) rotate(-24deg) translateY(-12px)}68%{transform:translateX(-50%) rotate(12deg) translateY(10px)}100%{transform:translateX(-50%) rotate(-3deg)}}
@keyframes holdBite{0%,100%{transform:translateX(-50%) rotate(-5deg)}50%{transform:translateX(-50%) rotate(10deg) translateY(10px)}}
@keyframes holdReel{0%{transform:translateX(-50%) rotate(-6deg)}50%{transform:translateX(-50%) rotate(8deg) translateY(8px)}100%{transform:translateX(-50%) rotate(-3deg)}}


#fishGameScreen .first-person-rod{
  left:50%!important;
  bottom:0!important;
  width:min(78vw,620px)!important;
  height:min(62vh,560px)!important;
  transform:translateX(-50%);
  overflow:visible!important;
  z-index:20!important;
}
#fishGameScreen .fp-mover{
  position:absolute;inset:0;
  transform-origin:50% 100%;
}
#fishGameScreen .fp-rod-photo{
  display:block!important;
  width:100%;height:100%;
  object-fit:contain;
  object-position:center bottom;
}
#fishingScene.show-result .first-person-rod,
#fishingScene.show-result .fp-mover{display:none!important;}
#fishingScene.waiting-bite .fp-mover{animation:mvIdle 1.1s ease-in-out infinite}
#fishingScene.casting .fp-mover{animation:mvCast .85s cubic-bezier(.2,.7,.25,1) 1}
#fishingScene.biting .fp-mover{animation:mvBite .4s ease-in-out 3}
#fishingScene.reeling .fp-mover{animation:mvReel 1s ease-in-out 1}
@keyframes mvIdle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(6deg) translateY(10px)}}
@keyframes mvCast{0%{transform:rotate(-6deg)}35%{transform:rotate(-26deg) translateY(-14px)}70%{transform:rotate(14deg) translateY(12px)}100%{transform:rotate(-3deg)}}
@keyframes mvBite{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(12deg) translateY(12px)}}
@keyframes mvReel{0%{transform:rotate(-8deg)}50%{transform:rotate(10deg) translateY(10px)}100%{transform:rotate(-3deg)}}


#fishGameScreen,
#fishGameScreen .fishing-scene{
  overflow:hidden!important;
}

#fishGameScreen .first-person-rod{
  overflow:hidden!important;
  bottom:0!important;
  height:min(48vh,420px)!important;
}
#fishGameScreen .fp-mover{
  animation-duration:.9s;
}
@keyframes mvIdle{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(3deg)}}
@keyframes mvCast{0%{transform:rotate(-4deg)}40%{transform:rotate(-12deg)}75%{transform:rotate(8deg)}100%{transform:rotate(-2deg)}}
@keyframes mvBite{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(6deg)}}
@keyframes mvReel{0%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}100%{transform:rotate(-2deg)}}


#fishGameScreen,
#fishGameScreen .fishing-scene,
#fishGameScreen .first-person-rod{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
#fishGameScreen{
  max-height:100dvh!important;
}
#fishGameScreen .first-person-rod{
  left:50%!important;
  bottom:-18%!important;
  width:min(72vw,560px)!important;
  height:min(52vh,460px)!important;
  transform:translateX(-50%);
}
#fishGameScreen .fp-rod-photo{
  object-position:center 78%!important;
}


.home-game-tab .tab-state{
  -webkit-text-fill-color:unset!important;
  font-weight:900!important;
}
.home-game-tab[data-game-tab="offline"] .tab-state{
  background:#ffe3ec!important;
  color:#c2185b!important;
  -webkit-text-fill-color:#c2185b!important;
  border:1px solid #ffb3c7!important;
}
.home-game-tab[data-game-tab="online"] .tab-state{
  background:#d8f8ee!important;
  color:#0b7a5c!important;
  -webkit-text-fill-color:#0b7a5c!important;
  border:1px solid #8ee0c8!important;
}
.home-game-tab.active[data-game-tab="offline"] .tab-state{
  background:#c2185b!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.home-game-tab.active[data-game-tab="online"] .tab-state{
  background:#0b7a5c!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}


.arcade-hero-card .title-logo-hero{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  text-align:center!important;
  gap:8px!important;
}
.hub-title-logo{
  width:min(340px,72vw);
  height:auto;
  display:block;
  filter:drop-shadow(0 12px 18px rgba(40,70,160,.28));
  border-radius:28px;
}
.arcade-hero-card{
  background:linear-gradient(180deg,#6ec4ff 0%,#3b8bff 42%,#2d6dff 100%)!important;
  border:0!important;
}
.arcade-hero-card .arcade-sub{
  color:#eef6ff!important;
  -webkit-text-fill-color:#eef6ff!important;
  text-shadow:0 1px 4px rgba(10,30,80,.35);
  max-width:420px;
  margin:0 auto;
}


.arcade-hero-card{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  padding:6px 0 2px!important;
}
.arcade-hero-card .title-logo-hero{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  gap:6px!important;
}
.hub-title-banner{
  width:min(560px,92vw)!important;
  height:auto!important;
  border-radius:18px!important;
  display:block;
  filter:drop-shadow(0 10px 16px rgba(40,80,160,.22));
}
.arcade-hero-card .arcade-sub{
  color:#35507a!important;
  -webkit-text-fill-color:#35507a!important;
  text-shadow:none!important;
}


#hubScreen .random-recommend-section{
  background:linear-gradient(180deg,#2b2f38,#16181e 55%,#101217)!important;
  border:3px solid #3a3f4a!important;
  border-radius:28px!important;
  padding:14px 16px 36px!important;
  box-shadow:0 18px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12)!important;
  position:relative!important;
}
#hubScreen .random-recommend-section::before{
  content:"";
  position:absolute;left:50%;bottom:-18px;
  width:120px;height:14px;
  transform:translateX(-50%);
  background:#2a2e36;
  border-radius:0 0 10px 10px;
  box-shadow:0 8px 0 #0f1115;
}
#hubScreen .random-recommend-section::after{
  content:"";
  position:absolute;left:50%;bottom:-28px;
  width:180px;height:10px;
  transform:translateX(-50%);
  background:#3a404c;
  border-radius:8px;
}
#hubScreen .random-recommend-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
#hubScreen .random-recommend-kicker{
  color:#8fd0ff!important;
  -webkit-text-fill-color:#8fd0ff!important;
  letter-spacing:.12em;
}
#hubScreen #randomRecommendTitle{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-weight:900!important;
  text-shadow:0 0 8px rgba(80,180,255,.45);
}
#hubScreen .recommend-viewport{
  background:#05070b!important;
  border:7px solid #0a0c10!important;
  border-radius:14px!important;
  box-shadow:inset 0 0 0 2px #4b5568, inset 0 0 30px rgba(0,0,0,.35)!important;
  overflow:hidden!important;
}
#hubScreen .recommend-controls button{
  background:#2a303a!important;
  color:#e8eef7!important;
  -webkit-text-fill-color:#e8eef7!important;
  border:1px solid #4a5564!important;
}


#hubScreen .arcade-hero-card{
  width:min(700px,100%)!important;
  max-width:700px!important;
  margin:8px auto 10px!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#hubScreen .title-bar-banner{
  position:relative!important;
  width:100%!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:#1a7adf!important;
  box-shadow:0 12px 24px rgba(30,70,150,.22)!important;
}
#hubScreen .hub-title-banner{
  width:100%!important;
  height:auto!important;
  max-height:168px!important;
  object-fit:cover!important;
  object-position:center 42%!important;
  display:block!important;
  border-radius:0!important;
  filter:none!important;
}
#hubScreen .title-bar-banner .arcade-sub{
  position:absolute!important;
  left:0;right:0;bottom:0;
  margin:0!important;
  padding:10px 14px 12px!important;
  background:linear-gradient(180deg,transparent,rgba(8,30,70,.72))!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-shadow:0 1px 3px rgba(0,0,0,.35)!important;
  font-size:13px!important;
  line-height:1.35!important;
}


#hubScreen .arcade-hero-card{
  width:100%!important;
  max-width:none!important;
  margin:0 0 12px!important;
  padding:0!important;
}
#hubScreen .title-bar-banner{
  width:100%!important;
  max-width:none!important;
  border-radius:0!important;
}
#hubScreen .hub-title-banner{
  width:100%!important;
  max-height:none!important;
  height:clamp(120px,18vw,220px)!important;
  object-fit:cover!important;
  object-position:center 40%!important;
}


#hubScreen .arcade-hero-card{
  width:100%!important;
  max-width:none!important;
  margin:0 0 12px!important;
}
#hubScreen .title-bar-banner{
  width:100%!important;
  display:flex!important;
  flex-direction:column!important;
  border-radius:0!important;
  overflow:hidden!important;
}
#hubScreen .hub-title-banner{
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center center!important;
  display:block!important;
}
#hubScreen .title-bar-banner .arcade-sub{
  position:static!important;
  background:#1a66d6!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  padding:10px 16px!important;
  margin:0!important;
  text-align:center!important;
  font-size:14px!important;
  line-height:1.4!important;
  white-space:normal!important;
}


#hubScreen .hub-title-banner{
  width:100%!important;
  height:clamp(72px,11vw,112px)!important;
  max-height:112px!important;
  object-fit:contain!important;
  object-position:center center!important;
  background:#3aa0ff;
}
#hubScreen .title-bar-banner .arcade-sub{
  position:static!important;
  background:#2b6fe0!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  padding:7px 14px!important;
  font-size:13px!important;
  line-height:1.35!important;
}


.home-game-tab .tab-state,
.home-game-tab[data-game-tab="offline"] .tab-state,
.home-game-tab[data-game-tab="online"] .tab-state,
.home-game-tab.active .tab-state{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.home-game-tab[data-game-tab="offline"] .tab-state{
  background:#c2185b!important;
  border-color:#c2185b!important;
}
.home-game-tab[data-game-tab="online"] .tab-state{
  background:#0b7a5c!important;
  border-color:#0b7a5c!important;
}


#hubScreen .hub-title-banner{
  width:100%!important;
  height:clamp(88px,10vw,128px)!important;
  object-fit:cover!important;
  object-position:center center!important;
}


.v22-game-badge,
.v22-game-badge.off,
.v22-game-badge.on{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.v22-game-badge.off{background:#5b6ea3!important;}
.v22-game-badge.on{background:#1e9d76!important;}


#hubScreen .title-bar-banner{
  background:#2f9bff!important;
}
#hubScreen .hub-title-banner{
  width:100%!important;
  height:clamp(96px,12vw,148px)!important;
  object-fit:contain!important;
  object-position:center center!important;
  image-rendering:auto;
}


.v23-promo-sticker,
.v23-promo-sticker.hot,
.v23-promo-sticker.new,
.v23-promo-sticker.reco,
.tile-badge,
.tile-badge.badge-new,
.tile-badge.badge-pop,
.tile-badge.badge-reco{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.v23-promo-sticker.new,
.tile-badge.badge-new{background:#e23d7a!important;}
.v23-promo-sticker.hot{background:#ff7a18!important;}
.v23-promo-sticker.reco{background:#3b6bff!important;}


#hubScreen .title-bar-banner{background:#2f9bff!important;overflow:hidden!important;}
#hubScreen .hub-title-banner{
  width:100%!important;
  height:clamp(92px,11vw,140px)!important;
  object-fit:cover!important;
  object-position:left center!important;
}


#hubScreen .arcade-hero-card,
#hubScreen .title-bar-banner{
  width:100%!important;
  max-width:none!important;
  background:transparent!important;
  padding:0!important;
  border-radius:0!important;
}
#hubScreen .hub-title-banner{
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block!important;
}
#hubScreen .title-bar-banner .arcade-sub{
  position:static!important;
  width:100%!important;
  background:#1f6ad8!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-align:center!important;
  padding:8px 16px!important;
  margin:0!important;
}


/* Game interiors: ink on paper, white on dark. Logic untouched. */
#luckGameScreen,#fishSetupScreen,#fishGameScreen,#onlineGameScreen,#gameScreen,#resultScreen{
  -webkit-text-fill-color:unset;
}
.wizard-card,.modal-card,.luck-rule-card,.luck-score-card,
.yut-side-panel,.yut-side-card,.ladder-paper,.paper-footer,
.online-lobby-panel,.fish-odds-panel,.fish-result-card,.fish-hud,
.fish-game-titlebar,.title-btn,.paper-btn,.label-chip,.top-number-chip,
.last-settings-badge,.luck-action-card{
  color:#1a2433!important;
  -webkit-text-fill-color:#1a2433!important;
}
.wizard-card small,.luck-rule-card small,.fish-odds-panel small,
.fish-page-title small,.muted,.eyebrow,.arcade-sub{
  color:#4b5b73!important;
  -webkit-text-fill-color:#4b5b73!important;
}
.primary-btn,.primary-btn *,.fishing-start-btn,.fishing-start-btn *,
.online-start-btn,.host-btn{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.yut-throw-btn,.yut-throw-btn *{
  color:#3a2408!important;
  -webkit-text-fill-color:#3a2408!important;
}
#fishGameScreen .fish-history-chip,
#fishGameScreen .fish-power-label,
#fishGameScreen .fish-power-label *{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
#luckGameScreen .luck-topbar,
#onlineGameScreen .online-topbar,
#gameScreen .game-topbar{
  color:#1a2433!important;
  -webkit-text-fill-color:#1a2433!important;
}
.tile-copy strong{color:#1a2433!important;-webkit-text-fill-color:#1a2433!important;}
.tile-copy small{color:#5a6a80!important;-webkit-text-fill-color:#5a6a80!important;}


#hubScreen .title-bar-banner{
  position:relative!important;
  width:100%!important;
}
#hubScreen .hub-title-banner{
  width:100%!important;
  height:auto!important;
  display:block!important;
}
#hubScreen .title-bar-banner .arcade-sub{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  margin:0!important;
  padding:10px 18px 12px!important;
  width:100%!important;
  box-sizing:border-box!important;
  background:linear-gradient(180deg,transparent,rgba(12,40,90,.72))!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-family:"Noto Sans KR",Pretendard,-apple-system,sans-serif!important;
  font-size:clamp(13px,1.15vw,16px)!important;
  font-weight:700!important;
  line-height:1.45!important;
  text-align:center!important;
  letter-spacing:-.01em!important;
  white-space:normal!important;
}


/* Setup uses data-view=setup. Keep labels in their own column so they cannot collide. */
nav.stepper.hidden,
body[data-view="hub"] nav.stepper,
body[data-view="luck-game"] nav.stepper,
body[data-view="online-game"] nav.stepper,
body[data-view="luck-game"] .setup-only,
body[data-view="online-game"] .setup-only,
body[data-view="hub"] .setup-only,
body[data-view="luck-game"] #step1,
body[data-view="luck-game"] #step2,
body[data-view="luck-game"] #step3,
body[data-view="luck-game"] #step4{
  display:none!important;
}
body[data-view="setup"] nav.stepper:not(.hidden){
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr)!important;
  align-items:start!important;
  gap:0 6px!important;
  margin:0 0 18px!important;
  padding:0 2px!important;
}
body[data-view="setup"] nav.stepper .step-line,
body[data-view="game"] nav.stepper .step-line{
  width:100%!important;
  min-width:0!important;
  flex:none!important;
  height:3px!important;
  margin:15px 0 0!important;
  align-self:start!important;
}
body[data-view="setup"] nav.stepper .step-dot,
body[data-view="game"] nav.stepper .step-dot{
  width:100%!important;
  max-width:none!important;
  flex:none!important;
  min-width:0!important;
  display:grid!important;
  justify-items:center!important;
  align-content:start!important;
  gap:7px!important;
  padding:0 4px!important;
  color:#334155!important;
  -webkit-text-fill-color:#334155!important;
  -webkit-text-stroke:0!important;
  text-shadow:none!important;
  filter:none!important;
  letter-spacing:0!important;
  font-weight:800!important;
}
body[data-view="setup"] nav.stepper .step-dot b,
body[data-view="game"] nav.stepper .step-dot b{
  width:34px!important;
  height:34px!important;
  -webkit-text-stroke:0!important;
  text-shadow:none!important;
}
body[data-view="setup"] nav.stepper .step-dot span,
body[data-view="game"] nav.stepper .step-dot span{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  color:#334155!important;
  -webkit-text-fill-color:#334155!important;
  -webkit-text-stroke:0!important;
  text-shadow:none!important;
  filter:none!important;
  white-space:normal!important;
  overflow:visible!important;
  text-align:center!important;
  line-height:1.3!important;
  font-size:13px!important;
  font-weight:800!important;
  letter-spacing:0!important;
  word-break:keep-all!important;
  overflow-wrap:break-word!important;
}
body[data-view="setup"] nav.stepper .step-dot.active,
body[data-view="setup"] nav.stepper .step-dot.active span,
body[data-view="game"] nav.stepper .step-dot.active,
body[data-view="game"] nav.stepper .step-dot.active span{
  color:#be185d!important;
  -webkit-text-fill-color:#be185d!important;
}
body[data-view="setup"] nav.stepper .step-dot.active b,
body[data-view="game"] nav.stepper .step-dot.active b{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
@media(max-width:820px){
  body[data-view="setup"] nav.stepper,
  body[data-view="game"] nav.stepper{
    grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1fr)!important;
    gap:0 2px!important;
  }
  body[data-view="setup"] nav.stepper .step-dot span,
  body[data-view="game"] nav.stepper .step-dot span{
    display:block!important;
    font-size:11px!important;
    line-height:1.25!important;
  }
}
/* Dark text on light cards must not get a white halo. */
body[data-view="setup"] .step-dot,
body[data-view="setup"] .step-dot *,
body[data-view="setup"] .wizard-card,
body[data-view="setup"] .wizard-card h2,
body[data-view="setup"] .wizard-card p,
body[data-view="setup"] .wizard-card .step-tag,
body[data-view="game"] .step-dot,
body[data-view="game"] .step-dot *,
body[data-view="game"] .wizard-card,
body[data-view="game"] .wizard-card h2,
body[data-view="game"] .wizard-card p,
body[data-view="game"] .wizard-card .step-tag{
  -webkit-text-stroke:0!important;
}
body[data-view="setup"] .wizard-card h2,
body[data-view="game"] .wizard-card h2{color:#1e293b!important;-webkit-text-fill-color:#1e293b!important;text-shadow:none!important}
body[data-view="setup"] .wizard-card p,
body[data-view="setup"] .count-help,
body[data-view="game"] .wizard-card p,
body[data-view="game"] .count-help{color:#475569!important;-webkit-text-fill-color:#475569!important;text-shadow:none!important}
.scratch-pick-cover,
.scratch-pick-cover strong,
.scratch-pick-cover b{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-shadow:0 1px 4px rgba(40,20,70,.45)!important;
}
.scratch-pick-number{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.scratch-choice-cell.selected::after{
  color:#fff8d8!important;
  -webkit-text-fill-color:#fff8d8!important;
  background:#7b1729!important;
}


/* Dark text: white edge. Light text: dark edge. Step labels stay clean (no halo). */
.text-outline-light{
  -webkit-text-stroke:.4px #fff!important;
  text-shadow:
    1px 0 0 #fff,-1px 0 0 #fff,0 1px 0 #fff,0 -1px 0 #fff,
    1px 1px 0 #fff,-1px 1px 0 #fff,1px -1px 0 #fff,-1px -1px 0 #fff!important;
}
body[data-view="setup"] .setup-only.hero .hero-actions .ghost-btn,
body[data-view="setup"] .setup-only.hero #backToHubFromSetupBtn,
body[data-view="setup"] .setup-only.hero #loadGameBtn{
  background:#fff!important;
  color:#1a2340!important;
  -webkit-text-fill-color:#1a2340!important;
  border:2px solid #fff!important;
  box-shadow:0 3px 0 rgba(20,40,90,.18)!important;
  text-shadow:1px 0 0 #fff,-1px 0 0 #fff,0 1px 0 #fff,0 -1px 0 #fff!important;
  -webkit-text-stroke:.35px #fff!important;
}
body[data-view="setup"] .setup-only.hero #newGameBtn,
#newGameBtn.ghost-btn{
  background:linear-gradient(180deg,#ffe56a,#ffc83a)!important;
  color:#1a2340!important;
  -webkit-text-fill-color:#1a2340!important;
  border:2px solid #fff!important;
  box-shadow:0 4px 0 #d4a21a,0 8px 16px rgba(180,120,10,.28)!important;
  text-shadow:1px 0 0 #fff,-1px 0 0 #fff,0 1px 0 #fff,0 -1px 0 #fff!important;
  -webkit-text-stroke:.4px #fff!important;
  font-weight:900!important;
}
body[data-view="game"] #newGameInGameBtn.title-btn{
  background:#fff!important;
  color:#1a2340!important;
  -webkit-text-fill-color:#1a2340!important;
  border:2px solid #fff!important;
  text-shadow:1px 0 0 #fff,-1px 0 0 #fff,0 1px 0 #fff,0 -1px 0 #fff!important;
  -webkit-text-stroke:.35px #fff!important;
}


body[data-view="hub"] #hubScreen.arcade-home{
  background:
    radial-gradient(ellipse at 50% -10%,rgba(120,190,255,.35),transparent 42%),
    linear-gradient(180deg,#9ad6ff 0%,#e7f4ff 28%,#f7f4ff 100%)!important;
}
body[data-view="hub"] #hubScreen .arcade-hero-card{
  perspective:1600px;
  padding:4px 0 10px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
body[data-view="hub"] #hubScreen .title-bar-banner,
body[data-view="hub"] #hubScreen .arcade-hero-inner.title-bar-banner{
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  border-radius:28px!important;
  overflow:hidden!important;
  background:#1a4fb6!important;
  transform:rotateX(7deg) translateZ(0);
  transform-origin:50% 100%;
  box-shadow:
    0 28px 48px rgba(24,58,130,.32),
    0 8px 0 #163a86,
    inset 0 1px 0 rgba(255,255,255,.4)!important;
}
body[data-view="hub"] #hubScreen .title-bar-banner::before{
  content:"";
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(115deg,rgba(255,255,255,.34) 0 12%,transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,.12),transparent 30%);
}
body[data-view="hub"] #hubScreen .hub-title-banner{
  position:relative;z-index:1;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center!important;
  filter:saturate(1.08) contrast(1.04);
}
body[data-view="hub"] #hubScreen .title-bar-banner .arcade-sub{
  position:relative!important;
  z-index:3;
  left:auto!important;right:auto!important;bottom:auto!important;
  width:100%!important;
  margin:0!important;
  padding:11px 18px 13px!important;
  background:linear-gradient(180deg,#2a62d8,#1b45a8)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-shadow:0 1px 0 #0b2a6a,0 2px 8px rgba(0,20,60,.35)!important;
  -webkit-text-stroke:0!important;
  font-size:clamp(13px,1.15vw,16px)!important;
  font-weight:800!important;
  line-height:1.45!important;
  text-align:center!important;
}
body[data-view="hub"] #hubScreen .home-game-grid{
  perspective:1200px;
  gap:18px!important;
}
body[data-view="hub"] #hubScreen .game-tile{
  overflow:visible!important;
  isolation:isolate;
  background:
    linear-gradient(180deg,#ffffff 0%,#eef3ff 100%)!important;
  border:1px solid rgba(255,255,255,.9)!important;
  border-radius:24px!important;
  box-shadow:
    0 16px 28px rgba(40,70,140,.16),
    0 2px 0 rgba(255,255,255,.9),
    inset 0 1px 0 #fff!important;
  transform-style:preserve-3d;
  transition:transform .22s ease, box-shadow .22s ease;
}
body[data-view="hub"] #hubScreen .game-tile:hover{
  transform:translateY(-8px) rotateX(4deg)!important;
  box-shadow:
    0 26px 40px rgba(40,70,140,.22),
    0 4px 0 rgba(255,255,255,.95)!important;
}
body[data-view="hub"] #hubScreen .game-tile:has(.tile-photo) .tile-visual:has(svg){
  display:none!important;
}
body[data-view="hub"] #hubScreen .game-tile .tile-visual{
  position:relative;
  aspect-ratio:16/10!important;
  margin:2px 2px 0!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:#12356e!important;
  transform:rotateX(10deg) translateZ(12px);
  box-shadow:
    0 14px 22px rgba(20,40,90,.22),
    inset 0 0 0 2px rgba(255,255,255,.35)!important;
}
body[data-view="hub"] #hubScreen .game-tile .tile-visual::after{
  content:"";
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(130deg,rgba(255,255,255,.38) 0 16%,transparent 38%,transparent 62%,rgba(20,40,80,.16) 100%);
}
body[data-view="hub"] #hubScreen .game-tile .tile-photo{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 40%!important;
  transform:scale(1.04);
  filter:saturate(1.08) contrast(1.05);
}
body[data-view="hub"] #hubScreen .game-tile .tile-copy{
  position:relative;
  z-index:3;
  padding:10px 8px 12px!important;
  text-align:center!important;
}
body[data-view="hub"] #hubScreen .game-tile .tile-copy strong{
  color:#1a2a62!important;
  -webkit-text-fill-color:#1a2a62!important;
  text-shadow:none!important;
  -webkit-text-stroke:0!important;
  font-size:clamp(16px,1.5vw,20px)!important;
  font-weight:900!important;
}
body[data-view="hub"] #hubScreen .game-tile .tile-copy small{
  color:#5b6d99!important;
  -webkit-text-fill-color:#5b6d99!important;
  text-shadow:none!important;
}
@media(prefers-reduced-motion:reduce){
  body[data-view="hub"] #hubScreen .title-bar-banner,
  body[data-view="hub"] #hubScreen .game-tile,
  body[data-view="hub"] #hubScreen .game-tile .tile-visual{
    transform:none!important;
  }
}


body[data-view="hub"] #hubScreen .arcade-hero-card.lobby-hero{
  padding:0!important;
  margin:0 0 16px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  perspective:none!important;
}
body[data-view="hub"] #hubScreen .lobby-stage{
  display:grid!important;
  grid-template-columns:minmax(160px,30%) minmax(0,1fr)!important;
  grid-template-rows:1fr!important;
  align-items:center!important;
  width:100%!important;
  min-height:clamp(210px,26vw,300px)!important;
  margin:0!important;
  padding:22px 28px 26px!important;
  border-radius:28px!important;
  overflow:hidden!important;
  position:relative!important;
  background:#4db0ff!important;
  transform:none!important;
  box-shadow:0 16px 32px rgba(24,70,140,.18)!important;
}
body[data-view="hub"] #hubScreen .lobby-sky{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 40%!important;
  z-index:0;
  pointer-events:none;
}
body[data-view="hub"] #hubScreen .lobby-mascot{
  position:relative!important;
  z-index:2;
  grid-column:1;
  grid-row:1 / span 2;
  width:100%!important;
  max-height:clamp(180px,26vw,320px)!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  background:transparent!important;
  filter:drop-shadow(0 16px 16px rgba(20,50,110,.3));
  transform:translateZ(0);
  animation:lobbyFloat 3.6s ease-in-out infinite;
}
body[data-view="hub"] #hubScreen .lobby-copy{
  position:relative;
  z-index:3;
  grid-column:2;
  grid-row:1 / span 2;
  align-self:center;
  padding:6px 8px 8px 10px;
}
body[data-view="hub"] #hubScreen .lobby-kicker{
  margin:0 0 8px!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-size:clamp(11px,1vw,13px)!important;
  font-weight:900!important;
  letter-spacing:.16em!important;
  text-shadow:0 1px 0 #163882,0 2px 8px rgba(10,30,80,.35)!important;
}
body[data-view="hub"] #hubScreen .lobby-title,
body[data-view="hub"] #hubScreen .lobby-title span{
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  filter:none!important;
}
body[data-view="hub"] #hubScreen .lobby-title{
  display:block!important;
  margin:0!important;
  font-size:clamp(28px,4.6vw,60px)!important;
  line-height:1.08!important;
  font-weight:900!important;
  letter-spacing:-.03em!important;
  color:#ffe44d!important;
  -webkit-text-fill-color:#ffe44d!important;
  -webkit-text-stroke:2.4px #1c3b96!important;
  paint-order:stroke fill;
  text-shadow:0 3px 0 #1a357f,0 7px 14px rgba(16,40,110,.28)!important;
}
body[data-view="hub"] #hubScreen .lobby-title span{
  color:#8aedff!important;
  -webkit-text-fill-color:#8aedff!important;
  -webkit-text-stroke:2.4px #1c3b96!important;
}
body[data-view="hub"] #hubScreen .lobby-copy{
  align-self:center!important;
  padding:0 8px 0 12px!important;
}
body[data-view="hub"] #hubScreen .lobby-stage .arcade-sub{
  position:relative!important;
  left:auto!important;right:auto!important;bottom:auto!important;
  display:block!important;
  width:auto!important;
  max-width:36em!important;
  margin:10px 0 0!important;
  padding:0!important;
  background:transparent!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-align:left!important;
  font-size:clamp(13px,1.15vw,16px)!important;
  font-weight:750!important;
  line-height:1.45!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  text-shadow:0 1px 0 #163882,0 2px 10px rgba(10,30,80,.4)!important;
}
body[data-view="hub"] #hubScreen .hub-title-banner{display:none!important;}
@keyframes lobbyFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@media(max-width:720px){
  body[data-view="hub"] #hubScreen .lobby-stage{
    grid-template-columns:100px minmax(0,1fr)!important;
    min-height:150px!important;
    padding:16px 14px 18px!important;
    border-radius:20px!important;
  }
  body[data-view="hub"] #hubScreen .lobby-title{
    font-size:clamp(22px,7.4vw,32px)!important;
    -webkit-text-stroke:1.8px #1c3b96!important;
  }
  body[data-view="hub"] #hubScreen .lobby-title span{-webkit-text-stroke:1.8px #1c3b96!important;}
  body[data-view="hub"] #hubScreen .lobby-stage .arcade-sub{font-size:12px!important;}
}
@media(prefers-reduced-motion:reduce){
  body[data-view="hub"] #hubScreen .lobby-mascot{animation:none!important;}
}


body[data-view="setup"],
body[data-view="game"],
body[data-view="result"]{
  background:
    radial-gradient(ellipse at 50% -8%,rgba(140,200,255,.45),transparent 46%),
    linear-gradient(180deg,#8fd0ff 0%,#e9f4ff 38%,#f4f0ff 100%)!important;
}
body[data-view="setup"] .setup-only.hero,
body[data-view="setup"] .setup-card,
body[data-view="setup"] .setup-panel,
body[data-view="setup"] .card{
  box-shadow:0 16px 28px rgba(40,70,140,.16),0 2px 0 #fff!important;
}
body[data-view="game"] .game-screen{
  background:transparent!important;
}
body[data-view="game"] .playfield{
  perspective:1400px;
}
body[data-view="game"] .ladder-paper{
  background:
    linear-gradient(180deg,rgba(255,255,255,.18),transparent 28%),
    repeating-linear-gradient(90deg,rgba(186,132,62,.07) 0 12px,rgba(255,255,255,.04) 12px 24px),
    linear-gradient(180deg,#fff6e8,#f3e2c4)!important;
  border:3px solid #fff!important;
  box-shadow:
    0 24px 40px rgba(80,50,20,.22),
    0 10px 0 #c7924a,
    inset 0 1px 0 rgba(255,255,255,.8)!important;
}
body[data-view="game"] .board-wrap{
  background:linear-gradient(180deg,#fffdf8,#f7ead3)!important;
  box-shadow:inset 0 8px 18px rgba(120,80,30,.08),0 10px 18px rgba(90,50,10,.08)!important;
  border-radius:18px!important;
}
body[data-view="game"] .paper-btn,
body[data-view="setup"] .hero-actions .ghost-btn,
body[data-view="setup"] #newGameBtn,
body[data-view="setup"] #createGameBtn{
  transform:translateZ(0);
  box-shadow:0 5px 0 rgba(20,40,80,.16),0 10px 18px rgba(20,40,80,.12)!important;
}
body[data-view="game"] .paper-btn:active,
body[data-view="setup"] .hero-actions .ghost-btn:active{
  transform:translateY(2px);
}
#fishGameScreen.fish-game-screen,
.fish-game-screen{
  background:
    linear-gradient(180deg,#7ec8ff 0 18%,#3aa7e6 42%,#0b6ea8 72%,#05486f 100%)!important;
}
.fish-game-titlebar{
  background:linear-gradient(180deg,#1d4f86,#163a66)!important;
  box-shadow:0 10px 24px rgba(0,20,40,.28)!important;
}
.fish-control-deck,
.fish-power-wrap{
  box-shadow:0 14px 24px rgba(0,20,40,.28), inset 0 1px 0 rgba(255,255,255,.25)!important;
  transform:translateZ(0);
}
.fish-hud{
  box-shadow:0 10px 18px rgba(0,20,40,.22)!important;
}
.luck-game-screen{
  background:
    radial-gradient(ellipse at 50% 0,rgba(255,220,120,.28),transparent 42%),
    linear-gradient(180deg,#2a3d8f,#1a2558 55%,#12183a)!important;
}
.luck-topbar{
  background:linear-gradient(180deg,rgba(12,18,40,.88),rgba(12,18,40,.45))!important;
}
.luck-game-screen .luck-card,
.luck-game-screen button.pick,
.luck-game-screen .choice-btn{
  box-shadow:0 12px 20px rgba(0,0,0,.28),0 4px 0 rgba(0,0,0,.18)!important;
}
body[data-view="result"] .result-card{
  box-shadow:0 22px 40px rgba(40,70,140,.2),0 6px 0 #d7c09a!important;
}


html,body{max-width:100%;overflow-x:hidden;}
.app-shell,.hub-screen,.game-screen,.luck-game-screen,.fish-game-screen,.online-game-screen,.result-screen{
  max-width:100vw;
  min-width:0;
}
img.tile-photo,img.lobby-mascot,img.lobby-sky,img.hub-title-banner{
  max-width:100%;
}
.wizard-card,.luck-main,.luck-side,.roulette-shell,.roulette-editor,.roulette-play{
  min-width:0;
}
/* PC */
@media(min-width:821px){
  body[data-view="luck-game"] .luck-stage{
    grid-template-columns:minmax(0,1fr) minmax(220px,28%);
    height:calc(100dvh - 72px);
    overflow:hidden;
  }
  body[data-view="luck-game"] .luck-game-content,
  body[data-view="luck-game"] .roulette-play,
  body[data-view="luck-game"] .roulette-editor-body{
    overflow:auto;
    overscroll-behavior:contain;
  }
  body[data-view="game"] .playfield{
    height:calc(100dvh - 76px);
    overflow:hidden;
  }
  body[data-view="setup"] .app-shell{
    height:auto;
    min-height:100dvh;
    overflow:auto;
  }
}
/* Mobile / small window */
@media(max-width:820px){
  body[data-view="hub"] .app-shell,
  body[data-view="setup"] .app-shell,
  body[data-view="luck-game"] .app-shell,
  body[data-view="online-game"] .app-shell,
  body[data-view="result"] .app-shell{
    width:100vw!important;
    max-width:100vw!important;
    height:auto!important;
    min-height:100dvh!important;
    aspect-ratio:auto!important;
    overflow:auto!important;
    border-radius:0!important;
  }
  body[data-view="luck-game"] .luck-game-screen{
    position:relative!important;
    inset:auto!important;
    min-height:100dvh;
    height:auto!important;
    overflow:auto!important;
  }
  body[data-view="luck-game"] .luck-stage{
    display:flex!important;
    flex-direction:column!important;
    height:auto!important;
    min-height:0!important;
    gap:12px!important;
    padding:10px!important;
    overflow:visible!important;
  }
  body[data-view="luck-game"] .luck-main{
    overflow:visible!important;
    min-height:0!important;
  }
  body[data-view="luck-game"] .luck-game-content{
    overflow:visible!important;
    height:auto!important;
  }
  body[data-view="luck-game"] .luck-side{
    flex-direction:column!important;
    gap:10px!important;
  }
  body[data-view="luck-game"] .roulette-shell,
  .luck-game-screen[data-game="roulette"] .roulette-shell{
    grid-template-columns:1fr!important;
    height:auto!important;
    min-height:0!important;
    gap:12px!important;
  }
  .luck-game-screen[data-game="roulette"] .roulette-editor,
  .luck-game-screen[data-game="roulette"] .roulette-play{
    min-height:0!important;
    height:auto!important;
    overflow:visible!important;
  }
  .luck-game-screen[data-game="roulette"] .roulette-wheel-box{
    width:min(72vw,280px)!important;
  }
  body[data-view="setup"] .hero.setup-only,
  body[data-view="setup"] nav.stepper:not(.hidden){
    width:100%;
  }
  body[data-view="setup"] .wizard-card{
    width:100%!important;
    max-width:100%!important;
  }
  body[data-view="game"] .app-shell,
  body[data-view="game"] .game-screen{
    width:100vw!important;
    height:100dvh!important;
    overflow:hidden!important;
  }
  body[data-view="game"] .playfield{
    height:calc(100dvh - 64px)!important;
    overflow:hidden!important;
  }
  body[data-view="game"] .ladder-paper{
    width:calc(100% - 10px)!important;
    height:calc(100% - 10px)!important;
  }
  body[data-view="fish-game"] .app-shell{
    width:100vw!important;
    height:100dvh!important;
    max-width:none!important;
    aspect-ratio:auto!important;
    border-radius:0!important;
  }
  .home-game-grid,
  #hubScreen .home-game-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #hubScreen .lobby-stage{
    min-height:0!important;
  }
}
@media(max-width:480px){
  body[data-view="luck-game"] .luck-topbar{
    height:auto!important;
    min-height:56px;
    padding:8px 10px!important;
  }
  .luck-game-screen[data-game="roulette"] .roulette-wheel-box{
    width:min(78vw,240px)!important;
  }
  body[data-view="setup"] nav.stepper:not(.hidden) .step-dot span{
    font-size:10px!important;
  }
}


body[data-view="game"] .game-titlebar{
  height:auto!important;
  min-height:56px!important;
  padding:8px 10px!important;
  gap:8px!important;
}
body[data-view="game"] .title-actions{
  flex-wrap:nowrap!important;
  gap:6px!important;
}
body[data-view="game"] .title-btn,
body[data-view="game"] #newGameInGameBtn{
  white-space:nowrap!important;
  min-height:36px!important;
  padding:6px 10px!important;
  font-size:13px!important;
}
body[data-view="game"] .board-inner{
  grid-template-rows:auto minmax(0,1fr) auto!important;
}
body[data-view="game"] .top-labels{
  height:auto!important;
  min-height:72px!important;
  padding:4px 0!important;
}
body[data-view="game"] .bottom-labels{
  height:auto!important;
  min-height:64px!important;
  padding:6px 2px 8px!important;
  overflow:visible!important;
}
body[data-view="game"] .label-chip,
body[data-view="game"] .bottom-labels .label-chip,
body[data-view="game"] .top-label-stack .label-chip{
  white-space:normal!important;
  word-break:keep-all!important;
  overflow:visible!important;
  text-overflow:unset!important;
  max-width:min(112px,20vw)!important;
  padding:5px 6px!important;
  font-size:clamp(11px,2.6vw,15px)!important;
  line-height:1.15!important;
  text-align:center!important;
}
body[data-view="game"] .result-toast{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:unset!important;
  font-size:clamp(13px,3.2vw,16px)!important;
  line-height:1.35!important;
}
body[data-view="game"] .paper-footer{
  flex-wrap:wrap!important;
  gap:8px!important;
}
body[data-view="game"] .paper-actions{
  width:100%;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
}
body[data-view="game"] .paper-actions button{
  flex:none!important;
  min-height:44px!important;
  white-space:nowrap!important;
  font-size:14px!important;
}
@media(min-width:821px){
  body[data-view="game"] .label-chip,
  body[data-view="game"] .bottom-labels .label-chip{
    max-width:140px!important;
    font-size:16px!important;
    padding:8px 10px!important;
  }
  body[data-view="game"] .paper-actions{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}


.theme-switch{
  display:flex;align-items:center;gap:6px;
  margin-left:6px;
  color:#31406a;font-size:11px;font-weight:900;letter-spacing:.04em;
  white-space:nowrap;
}
.theme-switch select{
  height:34px;border-radius:999px;padding:0 10px;
  border:1px solid #d5def0;background:#fff;color:#24325a;
  font-weight:800;font-size:12px;
}
body[data-theme="sky"]{
  --bg:#e7f4ff;--bg-2:#f7f4ff;--card:#fffdfc;--text:#1a2a62;--muted:#5b6d99;--line:#d5e4f7;
  --pink:#ff6f91;--pink-dark:#e84f78;--lavender:#6b8cff;
}
body[data-theme="candy"]{
  --bg:#ffe8f2;--bg-2:#fff3e8;--card:#fff7fb;--text:#5a2040;--muted:#a06b86;--line:#f7cfe0;
  --pink:#ff5d9a;--pink-dark:#e13d7c;--lavender:#c86bff;
}
body[data-theme="mint"]{
  --bg:#e5fbf3;--bg-2:#eef8ff;--card:#f7fffc;--text:#16463c;--muted:#4e7d72;--line:#c6eadc;
  --pink:#2db7a0;--pink-dark:#1b8f7c;--lavender:#3aa0d8;
}
body[data-theme="sunset"]{
  --bg:#ffe9d6;--bg-2:#fff1cf;--card:#fffaf3;--text:#5a2d12;--muted:#a06a42;--line:#f3d2b0;
  --pink:#ff7a3d;--pink-dark:#e25b1e;--lavender:#ffb020;
}
body[data-theme="night"]{
  --bg:#12182b;--bg-2:#1b2340;--card:#1c2544;--text:#eef3ff;--muted:#9aa8d0;--line:#2c3a66;
  --pink:#ff7ab8;--pink-dark:#ff4f9a;--lavender:#8aa4ff;
}
body[data-theme]{
  background:var(--bg)!important;
  color:var(--text);
}
body[data-theme="candy"][data-view="hub"] #hubScreen.arcade-home,
body[data-theme="candy"][data-view="setup"],
body[data-theme="candy"][data-view="game"],
body[data-theme="candy"][data-view="result"]{
  background:linear-gradient(180deg,#ffd3e6 0%,#fff1e6 42%,#fff7fb 100%)!important;
}
body[data-theme="mint"][data-view="hub"] #hubScreen.arcade-home,
body[data-theme="mint"][data-view="setup"],
body[data-theme="mint"][data-view="game"],
body[data-theme="mint"][data-view="result"]{
  background:linear-gradient(180deg,#bff3e4 0%,#e7fbff 42%,#f4fffb 100%)!important;
}
body[data-theme="sunset"][data-view="hub"] #hubScreen.arcade-home,
body[data-theme="sunset"][data-view="setup"],
body[data-theme="sunset"][data-view="game"],
body[data-theme="sunset"][data-view="result"]{
  background:linear-gradient(180deg,#ffc38a 0%,#ffe7c4 42%,#fff6ea 100%)!important;
}
body[data-theme="night"][data-view="hub"] #hubScreen.arcade-home,
body[data-theme="night"][data-view="setup"],
body[data-theme="night"][data-view="game"],
body[data-theme="night"][data-view="result"],
body[data-theme="night"][data-view="luck-game"]{
  background:linear-gradient(180deg,#0d1324 0%,#171f3a 50%,#10162a 100%)!important;
  color:#eef3ff;
}
body[data-theme="night"] .game-tile,
body[data-theme="night"] .wizard-card,
body[data-theme="night"] .ladder-paper,
body[data-theme="night"] .luck-rule-card,
body[data-theme="night"] .luck-score-card{
  background:linear-gradient(180deg,#222c52,#1a2344)!important;
  color:#eef3ff!important;
  border-color:#364679!important;
}
body[data-theme="night"] .tile-copy strong,
body[data-theme="night"] .tile-copy small,
body[data-theme="night"] .wizard-card h2,
body[data-theme="night"] .label-chip{
  color:#eef3ff!important;
  -webkit-text-fill-color:#eef3ff!important;
}
body[data-theme="night"] .theme-switch{color:#d7def7;}
body[data-theme="night"] .theme-switch select{background:#1b2444;color:#eef3ff;border-color:#3b4a7a;}
@media(max-width:720px){
  .theme-switch span, .theme-switch{font-size:0;}
  .theme-switch select{font-size:12px;height:32px;}
  .theme-switch{font-size:12px;gap:0;}
}


html,body,button,input,select,textarea,label,a,h1,h2,h3,h4,p,span,small,strong,b,em,li,td,th{
  font-family:Pretendard,"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
body.font-ready,
body.font-ready button,
body.font-ready input,
body.font-ready textarea,
body.font-ready select{
  font-family:Pretendard,"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
/* Light themes: dark ink on light surfaces */
body[data-theme="sky"],
body[data-theme="candy"],
body[data-theme="mint"],
body[data-theme="sunset"]{
  --ink:#17233f;
  --ink-soft:#4d5d7c;
  color:var(--ink)!important;
}
body[data-theme="candy"]{--ink:#4a1730;--ink-soft:#8a4d68;}
body[data-theme="mint"]{--ink:#12382f;--ink-soft:#3f6d62;}
body[data-theme="sunset"]{--ink:#4a240e;--ink-soft:#8a5a32;}
body[data-theme="sky"] .game-tile,
body[data-theme="candy"] .game-tile,
body[data-theme="mint"] .game-tile,
body[data-theme="sunset"] .game-tile,
body[data-theme="sky"] .wizard-card,
body[data-theme="candy"] .wizard-card,
body[data-theme="mint"] .wizard-card,
body[data-theme="sunset"] .wizard-card,
body[data-theme="sky"] .ladder-paper,
body[data-theme="candy"] .ladder-paper,
body[data-theme="mint"] .ladder-paper,
body[data-theme="sunset"] .ladder-paper,
body[data-theme="sky"] .modal-card,
body[data-theme="candy"] .modal-card,
body[data-theme="mint"] .modal-card,
body[data-theme="sunset"] .modal-card{
  color:var(--ink)!important;
}
body[data-theme="sky"] .tile-copy strong,
body[data-theme="candy"] .tile-copy strong,
body[data-theme="mint"] .tile-copy strong,
body[data-theme="sunset"] .tile-copy strong,
body[data-theme="sky"] .wizard-card h2,
body[data-theme="candy"] .wizard-card h2,
body[data-theme="mint"] .wizard-card h2,
body[data-theme="sunset"] .wizard-card h2,
body[data-theme="sky"] .wizard-card *,
body[data-theme="candy"] .wizard-card *,
body[data-theme="mint"] .wizard-card *,
body[data-theme="sunset"] .wizard-card *,
body[data-theme="sky"] .label-chip,
body[data-theme="candy"] .label-chip,
body[data-theme="mint"] .label-chip,
body[data-theme="sunset"] .label-chip,
body[data-theme="sky"] .step-dot span,
body[data-theme="candy"] .step-dot span,
body[data-theme="mint"] .step-dot span,
body[data-theme="sunset"] .step-dot span,
body[data-theme="sky"] .home-section-head h3,
body[data-theme="candy"] .home-section-head h3,
body[data-theme="mint"] .home-section-head h3,
body[data-theme="sunset"] .home-section-head h3,
body[data-theme="sky"] .tab-copy strong,
body[data-theme="candy"] .tab-copy strong,
body[data-theme="mint"] .tab-copy strong,
body[data-theme="sunset"] .tab-copy strong,
body[data-theme="sky"] .arcade-brand-mini,
body[data-theme="candy"] .arcade-brand-mini,
body[data-theme="mint"] .arcade-brand-mini,
body[data-theme="sunset"] .arcade-brand-mini{
  color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;
  text-shadow:none!important;
}
body[data-theme="sky"] .tile-copy small,
body[data-theme="candy"] .tile-copy small,
body[data-theme="mint"] .tile-copy small,
body[data-theme="sunset"] .tile-copy small,
body[data-theme="sky"] .tab-copy small,
body[data-theme="candy"] .tab-copy small,
body[data-theme="mint"] .tab-copy small,
body[data-theme="sunset"] .tab-copy small,
body[data-theme="sky"] .wizard-card p,
body[data-theme="candy"] .wizard-card p,
body[data-theme="mint"] .wizard-card p,
body[data-theme="sunset"] .wizard-card p{
  color:var(--ink-soft)!important;
  -webkit-text-fill-color:var(--ink-soft)!important;
}
body[data-theme="sky"] input,
body[data-theme="candy"] input,
body[data-theme="mint"] input,
body[data-theme="sunset"] input,
body[data-theme="sky"] select,
body[data-theme="candy"] select,
body[data-theme="mint"] select,
body[data-theme="sunset"] select,
body[data-theme="sky"] textarea,
body[data-theme="candy"] textarea,
body[data-theme="mint"] textarea,
body[data-theme="sunset"] textarea{
  background:#fff!important;
  color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;
}
/* Night: light ink on dark surfaces */
body[data-theme="night"]{
  --ink:#f3f6ff;
  --ink-soft:#b9c5e6;
  color:var(--ink)!important;
}
body[data-theme="night"] .game-tile,
body[data-theme="night"] .wizard-card,
body[data-theme="night"] .ladder-paper,
body[data-theme="night"] .modal-card,
body[data-theme="night"] .luck-rule-card,
body[data-theme="night"] .luck-score-card,
body[data-theme="night"] .paper-footer{
  color:var(--ink)!important;
}
body[data-theme="night"] .tile-copy strong,
body[data-theme="night"] .tile-copy small,
body[data-theme="night"] .wizard-card,
body[data-theme="night"] .wizard-card *,
body[data-theme="night"] .label-chip,
body[data-theme="night"] .step-dot span,
body[data-theme="night"] .home-section-head h3,
body[data-theme="night"] .tab-copy strong,
body[data-theme="night"] .tab-copy small,
body[data-theme="night"] .arcade-brand-mini,
body[data-theme="night"] .result-toast,
body[data-theme="night"] .luck-rule-card *,
body[data-theme="night"] .luck-score-card *{
  color:var(--ink)!important;
  -webkit-text-fill-color:var(--ink)!important;
  text-shadow:none!important;
}
body[data-theme="night"] .tile-copy small,
body[data-theme="night"] .tab-copy small,
body[data-theme="night"] .wizard-card p{
  color:var(--ink-soft)!important;
  -webkit-text-fill-color:var(--ink-soft)!important;
}
body[data-theme="night"] input,
body[data-theme="night"] select,
body[data-theme="night"] textarea{
  background:#151c36!important;
  color:#f3f6ff!important;
  -webkit-text-fill-color:#f3f6ff!important;
  border-color:#3b4a7a!important;
}
/* Colored controls stay inverted (white on color) */
body[data-theme] .primary-btn,
body[data-theme] .paper-btn.primary,
body[data-theme] #newGameBtn,
body[data-theme] .badge-hot,
body[data-theme] .badge-pop,
body[data-theme] .badge-new,
body[data-theme] .badge-reco,
body[data-theme] .badge-online,
body[data-theme] .tab-state,
body[data-theme] .home-game-tab .tab-state{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}


/* Theme ink must not wash out buttons. Color buttons = white text. Light buttons = dark text. */
body[data-theme] button.primary-btn,
body[data-theme] .primary-btn,
body[data-theme] .paper-btn.primary,
body[data-theme] #newGameBtn,
body[data-theme] #createGameBtn,
body[data-theme] .roulette-spin,
body[data-theme] .roulette-apply,
body[data-theme] .roulette-add,
body[data-theme] .fishing-start-btn,
body[data-theme] .yut-throw-btn,
body[data-theme] .luck-choice.selected,
body[data-theme] .home-game-tab .tab-state,
body[data-theme] .badge-hot,
body[data-theme] .badge-pop,
body[data-theme] .badge-new,
body[data-theme] .badge-reco,
body[data-theme] .badge-online{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-shadow:none!important;
}
body[data-theme] .ghost-btn,
body[data-theme] .title-btn,
body[data-theme] .paper-btn:not(.primary),
body[data-theme] .luck-back-btn,
body[data-theme] .recent-game-quick,
body[data-theme] .theme-switch select{
  color:#1a2340!important;
  -webkit-text-fill-color:#1a2340!important;
  background:#fff!important;
}
body[data-theme="night"] .ghost-btn,
body[data-theme="night"] .title-btn,
body[data-theme="night"] .paper-btn:not(.primary),
body[data-theme="night"] .luck-back-btn,
body[data-theme="night"] .recent-game-quick,
body[data-theme="night"] .theme-switch select{
  color:#f3f6ff!important;
  -webkit-text-fill-color:#f3f6ff!important;
  background:#1b2444!important;
  border-color:#3b4a7a!important;
}
body[data-theme] .wizard-card button.primary-btn,
body[data-theme] .wizard-card .primary-btn{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}


.text-outline-light,.text-outline-dark,
body .text-outline-light,body .text-outline-dark,
h1,h2,h3,h4,p,span,small,strong,b,a,button,input,select,textarea,label,li{
  -webkit-text-stroke:0!important;
  text-shadow:none!important;
}
.lobby-title,.lobby-title span{
  -webkit-text-stroke:0!important;
  text-shadow:none!important;
}


@media(min-width:821px){
  body[data-view="game"] .app-shell,
  body[data-view="luck-game"] .app-shell,
  body[data-view="online-game"] .app-shell,
  body[data-view="setup"] .app-shell,
  body[data-view="result"] .app-shell,
  body[data-view="fish-game"] .app-shell{
    width:100vw!important;
    max-width:none!important;
    height:100dvh!important;
    aspect-ratio:auto!important;
    margin:0!important;
    padding:12px 16px!important;
    border-radius:0!important;
  }
  body[data-view="fish-game"] .app-shell{padding:0!important;}
  body[data-view="luck-game"] .luck-game-screen{
    position:absolute!important;
    inset:0!important;
    height:100%!important;
  }
  body[data-view="luck-game"] .luck-stage{
    height:calc(100dvh - 84px)!important;
  }
  body[data-view="game"] .game-titlebar,
  body[data-view="luck-game"] .luck-topbar,
  body[data-view="online-game"] .online-topbar,
  body[data-view="fish-game"] .fish-game-titlebar{
    min-height:76px!important;
  }
  body[data-view="game"] .game-title-group h1,
  body[data-view="game"] .game-title-group strong,
  body[data-view="luck-game"] .luck-topbar strong,
  body[data-view="online-game"] .online-topbar strong,
  body[data-view="fish-game"] .fish-page-title h2{
    font-size:clamp(22px,2.2vw,34px)!important;
  }
  body[data-view="game"] button,
  body[data-view="luck-game"] button,
  body[data-view="online-game"] button,
  body[data-view="setup"] button,
  body[data-view="result"] button,
  body[data-view="fish-game"] button{
    min-height:56px!important;
    font-size:18px!important;
    padding-left:16px!important;
    padding-right:16px!important;
  }
  body[data-view="game"] .label-chip,
  body[data-view="game"] .bottom-labels .label-chip{
    font-size:clamp(16px,1.6vw,24px)!important;
    padding:10px 12px!important;
    max-width:180px!important;
  }
  body[data-view="game"] .result-toast,
  body[data-view="luck-game"] .luck-rule-card,
  body[data-view="luck-game"] .luck-score-card{
    font-size:clamp(16px,1.4vw,22px)!important;
  }
  .luck-game-screen[data-game="roulette"] .roulette-wheel-box{
    width:min(46vh,460px)!important;
  }
  body[data-view="online-game"] .yut-board{
    width:min(70vh,640px)!important;
  }
  body[data-view="online-game"] .yut-throw-btn{
    min-height:68px!important;
    width:min(360px,100%)!important;
    font-size:22px!important;
  }
  body[data-view="fish-game"] .fish-hud strong{
    font-size:22px!important;
  }
  body[data-view="fish-game"] .fish-hud{
    padding:12px 16px!important;
  }
  .scratch-nine-title{font-size:clamp(28px,3vw,48px)!important;}
  .scratch-choice-ticket{width:min(52vw,560px)!important;}
}


.ladder-paper,.wizard-card,.modal-card,.game-tile,
.paper-footer,.result-toast,.label-chip,.top-number-chip,
.tile-copy strong,.tile-copy small,.tab-copy strong,.tab-copy small,
.home-section-head h3,.arcade-sub,.lobby-kicker{
  color:#1a2340!important;
  -webkit-text-fill-color:#1a2340!important;
}
.tile-copy small,.tab-copy small,.wizard-card p,.arcade-sub{
  color:#4d5d7c!important;
  -webkit-text-fill-color:#4d5d7c!important;
}
.paper-btn,.paper-btn.strong,.ladder-toggle-btn,
body[data-theme] .paper-btn.strong,
body[data-theme] .ladder-toggle-btn,
body[data-theme] .primary-btn{
  color:#5a3200!important;
  -webkit-text-fill-color:#5a3200!important;
}
body[data-theme] .badge-hot,
body[data-theme] .badge-pop,
body[data-theme] .badge-new,
body[data-theme] .tab-state,
body[data-view="game"] .game-titlebar,
body[data-view="game"] .game-title-group h2,
body[data-view="game"] .game-status,
body[data-view="game"] .title-btn,
body[data-view="setup"] .setup-only.hero,
body[data-view="setup"] .setup-only.hero h1,
body[data-view="setup"] .setup-only.hero .sub{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}


.word-meaning-line{
  margin:8px 0 0!important;
  max-width:92%;
  color:#d7f6ef!important;
  font-size:clamp(14px,1.3vw,20px)!important;
  font-weight:800!important;
  line-height:1.35!important;
}
#wordTurnHint{margin-bottom:0;}


body[data-view="online-game"] .online-start-prompt,
body[data-view="online-game"] .online-start-prompt *{
  color:#5a3a00!important;
  -webkit-text-fill-color:#5a3a00!important;
  -webkit-text-stroke:0!important;
  text-shadow:none!important;
}
body[data-view="online-game"] .online-start-prompt strong{
  color:#4a2e00!important;
  -webkit-text-fill-color:#4a2e00!important;
}
.word-required-card{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  grid-template-rows:auto auto auto auto!important;
  align-items:center!important;
  column-gap:16px!important;
}
.word-required-letter{
  grid-column:1!important;
  grid-row:1 / span 4!important;
  margin:0!important;
}
.word-required-head{grid-column:2!important;grid-row:1!important;}
#wordTurnHint{
  grid-column:2!important;
  grid-row:2!important;
  margin:6px 0 0!important;
  position:static!important;
  -webkit-text-stroke:0!important;
  text-shadow:none!important;
}
.word-meaning-line{
  grid-column:2!important;
  grid-row:3!important;
  margin:4px 0 0!important;
  position:static!important;
  -webkit-text-stroke:0!important;
  text-shadow:none!important;
}
.word-head-rule{grid-column:2!important;grid-row:4!important;justify-self:start;}
.word-required-card p{
  -webkit-text-stroke:0!important;
  text-shadow:none!important;
}


body[data-view="game"] #boardWrap.board-wrap{
  overflow-x:auto!important;
  overflow-y:hidden!important;
}
body[data-view="game"] #boardInner.board-inner{
  width:var(--ladder-w,100%)!important;
  min-width:var(--ladder-w,100%)!important;
  max-width:none!important;
}
body[data-view="game"] #topLabels,
body[data-view="game"] #bottomLabels,
body[data-view="game"] #ladderCanvas{
  width:var(--ladder-w,100%)!important;
  max-width:none!important;
}
body[data-view="game"] #ladderCanvas{
  height:auto!important;
  min-height:0!important;
}
body[data-view="game"] .top-label-stack{
  position:absolute!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
}
body[data-view="game"] .bottom-labels .label-chip{
  position:absolute!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
}


body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .luck-side{display:none!important;}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .luck-stage{
  grid-template-columns:1fr!important;padding:10px 16px 14px!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .luck-main,
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .luck-game-content,
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-broadcast-shell,
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-pick-stage{
  width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-pick-layout{
  display:flex!important;flex-direction:row!important;align-items:stretch!important;
  justify-content:flex-start!important;gap:22px!important;width:100%!important;height:100%!important;
  padding:8px 10px!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-hud{
  display:flex!important;flex-direction:column!important;justify-content:center!important;
  flex:0 0 300px!important;max-width:320px!important;min-width:260px!important;
  padding:22px 20px!important;border-radius:24px!important;
  background:linear-gradient(180deg,rgba(20,16,28,.78),rgba(12,10,18,.88))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 16px 40px rgba(0,0,0,.22)!important;
  color:#fff!important;text-align:left!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-hud .scratch-nine-kicker{
  letter-spacing:.18em!important;font-size:11px!important;color:#f0c36a!important;margin:0 0 8px!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-hud .scratch-nine-title{
  margin:0 0 16px!important;font-size:clamp(22px,2.2vw,34px)!important;line-height:1.2!important;color:#fff!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-prize-rail{
  list-style:none!important;margin:0 0 16px!important;padding:0!important;display:flex!important;flex-direction:column!important;gap:6px!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-prize-rail li{
  display:grid!important;grid-template-columns:36px 1fr auto!important;align-items:center!important;
  gap:10px!important;padding:8px 10px!important;border-radius:14px!important;
  background:rgba(255,255,255,.06)!important;color:#d7d0c6!important;font-weight:800!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-prize-rail li b{
  width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#2a2433;color:#fff;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-prize-rail li.hit{
  background:linear-gradient(90deg,#3a2a12,#7a5418)!important;color:#ffe9b0!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-prize-rail li.big{
  background:linear-gradient(90deg,#4a2e08,#c48922)!important;color:#fff4d2!important;transform:scale(1.02);
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-prize-rail li.max{
  background:linear-gradient(90deg,#6a3a08,#f0b43a)!important;color:#2a1604!important;box-shadow:0 8px 20px rgba(240,180,58,.28);
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-prize-rail li em{font-style:normal;opacity:.75;font-size:12px;}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-hud .scratch-outcome-key{
  width:100%!important;grid-template-columns:1fr!important;gap:6px!important;margin:0 0 10px!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-hud .scratch-ticket-status{
  width:100%!important;min-height:44px!important;color:#ffe9b8!important;background:rgba(255,210,90,.1)!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-hud .scratch-mini-stats{display:none!important;}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-choice-ticket,
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-nine-ticket{
  flex:1 1 auto!important;width:100%!important;min-width:0!important;max-width:none!important;
  height:auto!important;max-height:100%!important;align-self:center!important;
  writing-mode:horizontal-tb!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-nine-grid{
  display:grid!important;grid-template-columns:1fr 1fr 1fr!important;width:100%!important;aspect-ratio:1!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-choice-cell{
  min-width:0!important;aspect-ratio:1!important;max-height:none!important;
}


body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .luck-side{display:none!important;}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .luck-stage{
  grid-template-columns:1fr!important;padding:10px 14px 12px!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .luck-main,
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .luck-game-content,
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-broadcast-shell,
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-pick-stage{
  width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-pick-layout{
  display:grid!important;
  grid-template-columns:300px minmax(0,1fr)!important;
  grid-template-rows:minmax(0,1fr)!important;
  align-items:stretch!important;
  gap:18px!important;
  width:100%!important;height:100%!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-hud{
  height:100%!important;max-width:none!important;width:100%!important;min-width:0!important;flex:none!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-nine-ticket,
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-choice-ticket{
  width:100%!important;height:100%!important;
  min-width:0!important;max-width:none!important;
  flex:none!important;
  display:flex!important;flex-direction:column!important;
  writing-mode:horizontal-tb!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-nine-grid{
  flex:1 1 auto!important;
  display:grid!important;
  grid-template-columns:1fr 1fr 1fr!important;
  grid-template-rows:1fr 1fr 1fr!important;
  width:100%!important;height:100%!important;
  aspect-ratio:auto!important;
  min-height:0!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-choice-cell{
  width:100%!important;height:100%!important;
  aspect-ratio:auto!important;max-height:none!important;min-height:0!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-hud .scratch-outcome-key span,
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-hud .scratch-match-meter span{
  background:rgba(255,255,255,.08)!important;border:0!important;color:#efe7d8!important;
}


body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-hud .scratch-live{
  display:grid!important;grid-template-columns:1fr 1fr 1fr!important;gap:6px!important;margin:10px 0 8px!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-hud .scratch-live span{
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  gap:2px!important;min-height:64px!important;padding:8px 4px!important;border-radius:14px!important;
  background:rgba(255,255,255,.07)!important;border:0!important;color:#efe7d8!important;box-shadow:none!important;
  font-size:12px!important;font-weight:800!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-hud .scratch-live span b{
  width:auto!important;height:auto!important;min-width:0!important;background:transparent!important;
  color:#ffe7a8!important;font-size:20px!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-hud .scratch-live span i{color:#cbbfa8!important;font-style:normal!important;}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-hud .scratch-live-now{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  margin:0 0 8px!important;padding:10px 12px!important;border-radius:14px!important;
  background:rgba(255,196,80,.12)!important;color:#ffe9b8!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-hud .scratch-live-now strong{
  background:transparent!important;box-shadow:none!important;color:#fff3d0!important;font-size:22px!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-hud .scratch-ticket-status{
  background:linear-gradient(90deg,#6a3a08,#c48922)!important;color:#fff6d8!important;border:0!important;
  border-radius:16px!important;min-height:46px!important;font-weight:900!important;
}
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-hud .scratch-nine-progress,
body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-hud .scratch-mini-stats{display:none!important;}


.luck-game-screen[data-game="scratch"] .luck-side{display:none!important;}
.luck-game-screen[data-game="scratch"] .luck-stage{grid-template-columns:1fr!important;}
.luck-game-screen[data-game="scratch"] .scratch-pick-layout{
  display:grid!important;grid-template-columns:minmax(260px,300px) minmax(0,1fr)!important;
  width:100%!important;height:100%!important;align-items:stretch!important;
}
.luck-game-screen[data-game="scratch"] .scratch-nine-ticket,
.luck-game-screen[data-game="scratch"] .scratch-choice-ticket,
#scratchTicket{
  width:100%!important;height:100%!important;max-width:none!important;min-width:0!important;
}
.luck-game-screen[data-game="scratch"] .scratch-nine-grid{
  display:grid!important;grid-template-columns:1fr 1fr 1fr!important;grid-template-rows:1fr 1fr 1fr!important;
  width:100%!important;height:100%!important;aspect-ratio:auto!important;
}


.luck-game-screen[data-game="scratch"] .luck-stage{grid-template-columns:1fr!important;width:100%!important;}
.luck-game-screen[data-game="scratch"] .luck-side{display:none!important;}
.luck-game-screen[data-game="scratch"] .luck-main{width:100%!important;grid-column:1/-1!important;}
.luck-game-screen[data-game="scratch"] .luck-game-content{
  display:block!important;align-items:stretch!important;justify-content:stretch!important;
  width:100%!important;height:100%!important;padding:12px!important;
}
.luck-game-screen[data-game="scratch"] .scratch-shell,
.luck-game-screen[data-game="scratch"] .scratch-broadcast-shell,
.luck-game-screen[data-game="scratch"] .scratch-pick-stage,
.luck-game-screen[data-game="scratch"] .scratch-pick-layout{
  width:100%!important;height:100%!important;max-width:none!important;
}
.luck-game-screen[data-game="scratch"] .scratch-pick-layout{
  display:grid!important;grid-template-columns:minmax(240px,280px) minmax(0,1fr)!important;
}
#scratchTicket,.luck-game-screen[data-game="scratch"] .scratch-choice-ticket,
.luck-game-screen[data-game="scratch"] .scratch-nine-ticket{
  width:100%!important;height:100%!important;max-width:none!important;min-width:0!important;
}


.luck-game-screen[data-game="scratch"] .scratch-shell,
.luck-game-screen[data-game="scratch"] .scratch-broadcast-shell{
  display:block!important;
  grid-template-columns:1fr!important;
  width:100%!important;height:100%!important;
}
.luck-game-screen[data-game="scratch"] .luck-stage{
  display:block!important;grid-template-columns:1fr!important;
}
.luck-game-screen[data-game="scratch"] .luck-side{display:none!important;}
.luck-game-screen[data-game="scratch"] .luck-main,
.luck-game-screen[data-game="scratch"] .luck-game-content,
.luck-game-screen[data-game="scratch"] .scratch-pick-stage,
.luck-game-screen[data-game="scratch"] .scratch-pick-layout{
  width:100%!important;height:100%!important;max-width:none!important;
}
.luck-game-screen[data-game="scratch"] .scratch-pick-layout{
  display:grid!important;grid-template-columns:280px minmax(0,1fr)!important;
}
#scratchTicket{
  width:100%!important;height:100%!important;max-width:none!important;min-width:0!important;
}


#luckGameScreen[data-game="scratch"] .luck-stage{display:block!important;grid-template-columns:none!important;}
#luckGameScreen[data-game="scratch"] .luck-side{display:none!important;width:0!important;padding:0!important;margin:0!important;}
#luckGameScreen[data-game="scratch"] #luckMain,
#luckGameScreen[data-game="scratch"] #luckGameContent{width:100%!important;height:100%!important;max-width:none!important;display:block!important;}
#luckGameScreen[data-game="scratch"] .scratch-shell,
#luckGameScreen[data-game="scratch"] .scratch-pick-stage,
#luckGameScreen[data-game="scratch"] .scratch-pick-layout{width:100%!important;height:100%!important;max-width:none!important;display:block!important;}
#luckGameScreen[data-game="scratch"] .scratch-pick-layout{display:grid!important;grid-template-columns:280px minmax(0,1fr)!important;}
#luckGameScreen[data-game="scratch"] #scratchTicket,
#luckGameScreen[data-game="scratch"] .scratch-choice-ticket,
#luckGameScreen[data-game="scratch"] .scratch-nine-ticket{
  width:100%!important;height:100%!important;max-width:none!important;min-width:0!important;flex:none!important;
}


#luckGameScreen[data-game="scratch"] .luck-stage,
#luckGameScreen[data-game="scratch"] #luckMain,
#luckGameScreen[data-game="scratch"] #luckGameContent,
#luckGameScreen[data-game="scratch"] .scratch-shell,
#luckGameScreen[data-game="scratch"] .scratch-pick-stage{
  overflow:hidden!important;max-width:100%!important;max-height:100%!important;box-sizing:border-box!important;
}
#luckGameScreen[data-game="scratch"] .scratch-pick-layout{
  width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
  display:grid!important;grid-template-columns:minmax(180px,26%) minmax(0,1fr)!important;
  gap:12px!important;overflow:hidden!important;
}
#luckGameScreen[data-game="scratch"] #scratchTicket{
  width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
  min-width:0!important;box-sizing:border-box!important;
}
#luckGameScreen[data-game="scratch"] .scratch-hud{min-width:0!important;max-height:100%!important;overflow:auto!important;}
#luckGameScreen[data-game="scratch"] .scratch-nine-grid{min-height:0!important;height:100%!important;}
@media(max-width:720px){
  #luckGameScreen[data-game="scratch"] .scratch-pick-layout{grid-template-columns:1fr!important;overflow:auto!important;}
}


#fishGameScreen .fish-title-actions{
  display:flex!important;align-items:center!important;gap:0!important;
  padding:4px!important;border-radius:18px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 8px 20px rgba(8,30,60,.16)!important;
}
#fishGameScreen .fish-title-actions .title-btn{
  margin:0!important;min-height:40px!important;padding:8px 14px!important;
  border:0!important;border-radius:14px!important;
  background:transparent!important;color:#1d3b73!important;
  box-shadow:none!important;font-size:15px!important;
}
#fishGameScreen .fish-title-actions .title-btn + .title-btn{
  border-left:1px solid rgba(30,60,110,.12)!important;
  border-radius:0!important;
}
#fishGameScreen .fish-title-actions .title-btn:last-child{
  border-radius:0 14px 14px 0!important;
}
#fishGameScreen .fish-title-actions .title-btn:first-child{
  border-radius:14px 0 0 14px!important;
}
#fishGameScreen .fish-title-actions .title-btn:hover{
  background:rgba(40,90,180,.08)!important;color:#12305f!important;
}
#fishGameScreen .fish-toast{
  background:rgba(8,28,52,.78)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border:1px solid rgba(255,255,255,.28)!important;
  box-shadow:0 10px 24px rgba(0,20,40,.28)!important;
  text-shadow:none!important;
}


#fishGameScreen .sea-wave{
  position:absolute;left:-12%;width:124%;pointer-events:none;z-index:5;
  background:repeating-linear-gradient(
    -8deg,
    transparent 0 14px,
    rgba(255,255,255,.10) 16px,
    rgba(210,242,255,.16) 18px,
    transparent 22px
  );
  mix-blend-mode:soft-light;
  filter:blur(.3px);
}
#fishGameScreen .sea-wave-1{top:46%;height:22%;opacity:.55;animation:seaWaveA 7.5s ease-in-out infinite;}
#fishGameScreen .sea-wave-2{top:58%;height:26%;opacity:.42;animation:seaWaveB 9.5s ease-in-out infinite;}
#fishGameScreen .sea-wave-3{top:70%;height:30%;opacity:.32;animation:seaWaveA 11s ease-in-out infinite reverse;}
@keyframes seaWaveA{
  0%,100%{transform:translate3d(-2%,0,0) scaleY(1);}
  50%{transform:translate3d(3%,8px,0) scaleY(1.04);}
}
@keyframes seaWaveB{
  0%,100%{transform:translate3d(2%,4px,0) scaleY(1.02);}
  50%{transform:translate3d(-3%,-6px,0) scaleY(.98);}
}


#fishGameScreen .sea-swell{
  position:absolute;left:-25%;width:150%;pointer-events:none;z-index:6;
  background-repeat:repeat-x;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 80' preserveAspectRatio='none'><path d='M0 40 Q75 8 150 40 T300 40 T450 40 T600 40 V80 H0 Z' fill='rgba(255,255,255,0.28)'/></svg>");
}
#fishGameScreen .sea-swell-a{
  top:48%;height:86px;background-size:520px 86px;opacity:.85;
  animation:seaSwellX 7s linear infinite;
}
#fishGameScreen .sea-swell-b{
  top:58%;height:96px;background-size:640px 96px;opacity:.7;
  animation:seaSwellX 10s linear infinite reverse;
  filter:brightness(.95);
}
#fishGameScreen .sea-swell-c{
  top:70%;height:110px;background-size:720px 110px;opacity:.55;
  animation:seaSwellX 13s linear infinite;
}
@keyframes seaSwellX{
  from{background-position:0 0;}
  to{background-position:520px 0;}
}


#fishGameScreen.sea-surge,
#fishGameScreen.sea-surge .fishing-scene{
  animation:fishSurgeShake 0.42s linear infinite;
}
#fishGameScreen.sea-surge .sea-swell-a,
#fishGameScreen.sea-surge .sea-swell-b,
#fishGameScreen.sea-surge .sea-swell-c{
  opacity:1 !important;
  filter:brightness(1.25) contrast(1.15);
  animation-duration:2.2s !important;
}
#fishGameScreen.sea-surge .sea-swell-a{height:120px !important;top:44% !important;}
#fishGameScreen.sea-surge .sea-swell-b{height:140px !important;top:54% !important;}
#fishGameScreen.sea-surge .sea-swell-c{height:160px !important;top:66% !important;}
#fishGameScreen.sea-surge #fishToast{
  background:#123a72 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-weight:900 !important;
}
@keyframes fishSurgeShake{
  0%,100%{transform:translate(0,0);}
  20%{transform:translate(-3px,2px);}
  40%{transform:translate(3px,-2px);}
  60%{transform:translate(-2px,-2px);}
  80%{transform:translate(2px,3px);}
}


.luck-game-screen[data-game="enhance"] .enhance-actions{flex-wrap:wrap;gap:8px;}
.luck-game-screen[data-game="enhance"] .enhance-fail-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px;}
#enhanceBoostBtn{min-width:140px;}


:root{
  --safe-t:max(10px,env(safe-area-inset-top,0px));
  --safe-b:max(10px,env(safe-area-inset-bottom,0px));
  --safe-l:max(8px,env(safe-area-inset-left,0px));
  --safe-r:max(8px,env(safe-area-inset-right,0px));
}
.app-shell{
  padding-top:var(--safe-t)!important;
  padding-bottom:var(--safe-b)!important;
  padding-left:var(--safe-l)!important;
  padding-right:var(--safe-r)!important;
  box-sizing:border-box!important;
}
.hub-topbar,.fish-game-titlebar,.luck-topbar,.online-topbar,.game-titlebar,.result-titlebar{
  padding-top:max(8px,var(--safe-t))!important;
}
.fish-control-deck,.fishing-start-btn,.ladder-bottom,.hub-footer{
  margin-bottom:var(--safe-b);
}
#appExitModal{
  position:fixed;inset:0;z-index:99999;display:grid;place-items:center;
  background:rgba(10,16,32,.55);padding:24px;
}
#appExitModal[hidden]{display:none!important;}
#appExitModal .app-exit-card{
  width:min(92vw,360px);border-radius:22px;padding:22px 20px 16px;
  background:#fff;color:#223;box-shadow:0 20px 50px rgba(0,0,0,.28);
  text-align:center;
}
#appExitModal h3{margin:0 0 8px;font-size:20px;}
#appExitModal p{margin:0 0 16px;color:#556;}
#appExitModal .app-exit-row{display:flex;gap:8px;}
#appExitModal button{flex:1;min-height:46px;border-radius:14px;border:0;font-weight:900;cursor:pointer;}
#appExitNo{background:#eef2f7;color:#334;}
#appExitYes{background:#2f6dff;color:#fff;}


.luck-game-screen[data-game="enhance"] .enhance-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.luck-game-screen[data-game="enhance"] #enhanceBtn,
.luck-game-screen[data-game="enhance"] .enhance-go{
  background:linear-gradient(180deg,#ff8a3d,#e25512)!important;color:#fff!important;border:0!important;
}
.luck-game-screen[data-game="enhance"] #enhanceBoostBtn,
.luck-game-screen[data-game="enhance"] .enhance-boost{
  background:linear-gradient(180deg,#3ec6ff,#1577d6)!important;color:#fff!important;border:0!important;
}
.luck-game-screen[data-game="enhance"] .enhance-ladder{
  display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:10px!important;align-items:flex-start!important;
}
.luck-game-screen[data-game="enhance"] .enhance-step{
  display:flex!important;flex-direction:column!important;align-items:center!important;gap:6px!important;min-width:72px;
}
.luck-game-screen[data-game="enhance"] .enhance-claim-mini{
  min-height:32px;padding:6px 8px;border:0;border-radius:10px;font-size:11px;font-weight:900;color:#fff;cursor:pointer;
}
.luck-game-screen[data-game="enhance"] .claim-x3{background:linear-gradient(180deg,#5ad0ff,#1a7fd4)!important;}
.luck-game-screen[data-game="enhance"] .claim-x5{background:linear-gradient(180deg,#46d39a,#14865a)!important;}
.luck-game-screen[data-game="enhance"] .claim-x10{background:linear-gradient(180deg,#b07bff,#6b36d6)!important;}
.luck-game-screen[data-game="enhance"] .claim-x20{background:linear-gradient(180deg,#ffd45c,#e39a00)!important;color:#4a2e00!important;}
.luck-game-screen[data-game="enhance"] .claim-x50{background:linear-gradient(180deg,#ff6d8a,#c21d4a)!important;}
.luck-game-screen[data-game="enhance"] .enhance-claim-mini:disabled{opacity:.35;cursor:default;}


.luck-game-screen[data-game="enhance"] .enhance-claim-wrap{display:flex;justify-content:center;margin-top:12px;}
.luck-game-screen[data-game="enhance"] #claimBtn.enhance-claim{min-width:220px;}
.luck-game-screen[data-game="enhance"] .claim-x3{background:linear-gradient(180deg,#5ad0ff,#1a7fd4)!important;color:#fff!important;}
.luck-game-screen[data-game="enhance"] .claim-x5{background:linear-gradient(180deg,#46d39a,#14865a)!important;color:#fff!important;}
.luck-game-screen[data-game="enhance"] .claim-x10{background:linear-gradient(180deg,#b07bff,#6b36d6)!important;color:#fff!important;}
.luck-game-screen[data-game="enhance"] .claim-x20{background:linear-gradient(180deg,#ffd45c,#e39a00)!important;color:#4a2e00!important;}
.luck-game-screen[data-game="enhance"] .claim-x50{background:linear-gradient(180deg,#ff6d8a,#c21d4a)!important;color:#fff!important;}


.luck-game-screen[data-game="enhance"] .enhance-step.star{
  min-width:64px;padding:8px 10px;border-radius:14px;font-weight:1000;color:#fff;
}
.luck-game-screen[data-game="enhance"] .enhance-step.multi-3{background:linear-gradient(180deg,#5ad0ff,#1a7fd4);box-shadow:0 4px 0 #125c9a;}
.luck-game-screen[data-game="enhance"] .enhance-step.multi-5{background:linear-gradient(180deg,#46d39a,#14865a);box-shadow:0 4px 0 #0d5c3d;}
.luck-game-screen[data-game="enhance"] .enhance-step.multi-10{background:linear-gradient(180deg,#b07bff,#6b36d6);box-shadow:0 4px 0 #4a1f99;}
.luck-game-screen[data-game="enhance"] .enhance-step.multi-20{background:linear-gradient(180deg,#ffd45c,#e39a00);color:#4a2e00;box-shadow:0 4px 0 #b87a00;}
.luck-game-screen[data-game="enhance"] .enhance-step.multi-50{background:linear-gradient(180deg,#ff6d8a,#c21d4a);box-shadow:0 4px 0 #8a1434;}
.luck-game-screen[data-game="enhance"] .enhance-step.star.active{transform:translateY(-3px);filter:brightness(1.08);}


/* 행운카드9 모바일: 세로 스택 + 글자 잘림 방지 */
body.scratch-mobile-stack .luck-game-screen[data-game="scratch"] .scratch-pick-layout{
  display:flex!important;flex-direction:column!important;gap:10px!important;
  width:100%!important;height:auto!important;overflow:visible!important;
}
body.scratch-mobile-stack .luck-game-screen[data-game="scratch"] .scratch-hud{
  width:100%!important;max-width:100%!important;min-width:0!important;
  height:auto!important;overflow:visible!important;
  padding:12px 14px!important;border-radius:18px!important;
  box-sizing:border-box!important;
}
body.scratch-mobile-stack .luck-game-screen[data-game="scratch"] .scratch-hud .scratch-nine-title{
  font-size:clamp(20px,5.5vw,28px)!important;line-height:1.25!important;
  white-space:normal!important;overflow:visible!important;
  writing-mode:horizontal-tb!important;text-orientation:mixed!important;
}
body.scratch-mobile-stack .luck-game-screen[data-game="scratch"] .scratch-hud .scratch-nine-title br{display:none!important;}
body.scratch-mobile-stack .luck-game-screen[data-game="scratch"] .scratch-prize-rail{
  display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:6px!important;margin:8px 0 10px!important;
}
body.scratch-mobile-stack .luck-game-screen[data-game="scratch"] .scratch-prize-rail li{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  justify-content:center!important;gap:2px!important;
  padding:8px 4px!important;min-width:0!important;
  text-align:center!important;
}
body.scratch-mobile-stack .luck-game-screen[data-game="scratch"] .scratch-prize-rail li b{
  width:24px!important;height:24px!important;font-size:12px!important;
}
body.scratch-mobile-stack .luck-game-screen[data-game="scratch"] .scratch-prize-rail li span,
body.scratch-mobile-stack .luck-game-screen[data-game="scratch"] .scratch-prize-rail li em{
  display:block!important;width:100%!important;
  font-size:11px!important;line-height:1.2!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  writing-mode:horizontal-tb!important;
}
body.scratch-mobile-stack .luck-game-screen[data-game="scratch"] .scratch-prize-rail li em{font-size:10px!important;opacity:.8!important;}
body.scratch-mobile-stack .luck-game-screen[data-game="scratch"] .scratch-live,
body.scratch-mobile-stack .luck-game-screen[data-game="scratch"] .scratch-match-meter{
  display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:6px!important;
  width:100%!important;
}
body.scratch-mobile-stack .luck-game-screen[data-game="scratch"] .scratch-live span,
body.scratch-mobile-stack .luck-game-screen[data-game="scratch"] .scratch-match-meter span{
  flex:1 1 auto!important;min-width:88px!important;justify-content:center!important;
  white-space:nowrap!important;
}
body.scratch-mobile-stack .luck-game-screen[data-game="scratch"] .scratch-live-now,
body.scratch-mobile-stack .luck-game-screen[data-game="scratch"] .scratch-ticket-status{
  width:100%!important;min-height:40px!important;
  white-space:normal!important;overflow:visible!important;
  writing-mode:horizontal-tb!important;
  font-size:14px!important;line-height:1.35!important;
  text-align:center!important;
}
body.scratch-mobile-stack .luck-game-screen[data-game="scratch"] .scratch-nine-ticket{
  width:100%!important;max-width:100%!important;margin:0 auto!important;
}
body.scratch-mobile-stack .luck-game-screen[data-game="scratch"] .scratch-nine-grid{
  gap:6px!important;
}
body.scratch-mobile-stack .luck-game-screen[data-game="scratch"] .scratch-choice-cell{
  min-height:0!important;
}
@media(max-width:700px){
  body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-pick-layout{
    display:flex!important;flex-direction:column!important;
  }
  body[data-view="luck-game"] .luck-game-screen[data-game="scratch"] .scratch-hud{
    width:100%!important;max-width:100%!important;overflow:visible!important;
  }
}


.luck-game-screen[data-game="yabawi"] .luck-game-content{justify-content:flex-start;padding-top:1%}
.yabawi-speed{display:flex;gap:8px;justify-content:center;margin:4px 0}
.yabawi-speed-btn{min-width:72px;height:34px;border:0;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;font-weight:900;cursor:pointer}
.yabawi-speed-btn.on{background:linear-gradient(180deg,#ffe36a,#f0b21a);color:#5a3a00}
.yabawi-stage{position:relative;width:min(98%,960px);height:clamp(360px,60vh,540px);margin:4px auto 0;
  background:linear-gradient(180deg,#8fd4ff 0 54%,#e6c184 54% 100%);border-radius:24px;border:2px solid rgba(255,255,255,.4);overflow:hidden}
.yabawi-floor{position:absolute;left:6%;right:6%;bottom:8%;height:16%;border-radius:50%;background:rgba(90,60,20,.14)}
.yabawi-thief{position:absolute;top:0;width:33.33%;height:96%;left:0;border:0;background:transparent;cursor:pointer;padding:0;
  transition:left .38s cubic-bezier(.22,.8,.2,1)}
.yabawi-thief .yt-front,.yabawi-thief .yt-side{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.yabawi-thief .yt-side{opacity:0;pointer-events:none}
.yabawi-thief.running .yt-front{opacity:0}
.yabawi-thief.running .yt-side{opacity:1}
.yabawi-thief.running.run-left .yt-side{transform:scaleX(-1)}
.yt-held-gem{opacity:0;transform-origin:180px 162px;transform:scale(.2);transition:.2s}
.yabawi-thief.show-gem.has-gem .yt-held-gem,
.yabawi-thief.open.has-gem .yt-held-gem{opacity:1;transform:scale(1)}
.yabawi-thief strong{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);color:#3a2a12;background:#fff3c8;border-radius:999px;padding:2px 10px;font-size:14px;font-weight:1000}
.yabawi-thief.win{filter:drop-shadow(0 0 16px rgba(70,220,120,.45))}
.yabawi-thief.lose{filter:drop-shadow(0 0 16px rgba(230,80,90,.4))}
.yabawi-thief.running .yt-run{animation:yabawiHop .16s linear infinite}
.yabawi-thief.running .leg-front{transform-origin:128px 186px;animation:yabawiStride .16s linear infinite}
.yabawi-thief.running .leg-back{transform-origin:108px 188px;animation:yabawiStride .16s linear infinite reverse}
.yabawi-thief.running .arm-front{transform-origin:92px 130px;animation:yabawiSwing .16s linear infinite}
.yabawi-thief.running .arm-back{transform-origin:150px 128px;animation:yabawiSwing .16s linear infinite reverse}
@keyframes yabawiHop{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes yabawiStride{0%{transform:rotate(18deg)}50%{transform:rotate(-22deg)}100%{transform:rotate(18deg)}}
@keyframes yabawiSwing{0%{transform:rotate(16deg)}50%{transform:rotate(-16deg)}100%{transform:rotate(16deg)}}
.yabawi-status{min-height:28px;margin-top:6px;text-align:center;font-weight:850;color:#e9eefc;font-size:16px}
@media(max-width:700px){.yabawi-stage{height:min(58vh,380px)}}


.luck-game-screen[data-game="yabawi"] .luck-game-content{
  justify-content:flex-start!important;padding:clamp(8px,1.1vw,16px) clamp(8px,1.6vw,22px) clamp(10px,1.3vw,18px)!important;
  overflow:hidden;background:radial-gradient(circle at 50% -10%,rgba(78,170,255,.18),transparent 34%),linear-gradient(180deg,#f9fcff 0%,#f3f7ff 100%);
}
.luck-game-screen[data-game="yabawi"] .luck-kicker{margin:0 0 2px!important;padding:5px 14px;border-radius:999px;color:#fff!important;background:linear-gradient(180deg,#126fe3,#0847a8);border:1px solid rgba(255,255,255,.75);box-shadow:0 5px 13px rgba(19,83,175,.24),inset 0 1px 0 rgba(255,255,255,.55);font-size:clamp(10px,.78vw,13px)!important;letter-spacing:.13em!important}
.luck-game-screen[data-game="yabawi"] .luck-prompt{margin:2px 0 0!important;color:#102d68!important;font-size:clamp(28px,3.1vw,49px)!important;line-height:1.04!important;letter-spacing:-.055em!important;font-weight:1000!important;text-shadow:0 2px 0 #fff,0 5px 13px rgba(24,66,135,.14)}
.luck-game-screen[data-game="yabawi"] .yabawi-title-gem{color:#f1b91d;text-shadow:0 2px 0 #fff,0 4px 0 rgba(140,83,0,.16),0 7px 14px rgba(225,151,0,.2)}
.luck-game-screen[data-game="yabawi"] .luck-subprompt{margin:4px 0 2px!important;color:#274576!important;font-size:clamp(11px,1.02vw,16px)!important;font-weight:850!important}
.yabawi-speed{position:relative;z-index:30;display:flex;gap:4px;justify-content:center;margin:4px 0 5px;padding:4px;border-radius:999px;background:#0d2f6a;box-shadow:inset 0 1px 4px rgba(0,0,0,.28),0 5px 13px rgba(12,48,109,.16)}
.yabawi-speed-btn{min-width:clamp(62px,6.2vw,88px);height:31px;border:0;border-radius:999px;background:transparent;color:#dfeaff;font-size:12px;font-weight:1000;cursor:pointer;transition:.16s transform,.16s background,.16s box-shadow}
.yabawi-speed-btn:hover:not(:disabled){transform:translateY(-1px);background:rgba(255,255,255,.1)}
.yabawi-speed-btn.on{background:linear-gradient(180deg,#2d89ff,#075bd1);color:#fff;box-shadow:0 2px 7px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.72)}
.yabawi-stage{position:relative;width:min(99%,1080px);height:clamp(310px,54vh,515px);margin:2px auto 0;border-radius:clamp(18px,2.1vw,30px);overflow:hidden;isolation:isolate;border:3px solid #d9a640;background:radial-gradient(ellipse at 16% 19%,rgba(255,255,255,.95) 0 6%,rgba(255,255,255,.4) 7% 11%,transparent 12%),radial-gradient(ellipse at 78% 14%,rgba(255,255,255,.92) 0 5%,rgba(255,255,255,.38) 6% 10%,transparent 11%),radial-gradient(circle at 50% 33%,rgba(255,255,255,.65),transparent 27%),linear-gradient(180deg,#43b7f4 0%,#82d4ff 47%,#e2bc78 48%,#cf9854 100%);box-shadow:0 15px 34px rgba(91,61,23,.23),inset 0 0 0 2px rgba(255,255,255,.56),inset 0 -24px 52px rgba(91,49,9,.12)}
.yabawi-stage::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(178,119,55,.82) 0 4.5%,transparent 4.6% 95.4%,rgba(178,119,55,.82) 95.5% 100%),radial-gradient(ellipse at 7% 46%,#e5c68d 0 8%,transparent 8.2%),radial-gradient(ellipse at 93% 46%,#e5c68d 0 8%,transparent 8.2%),linear-gradient(90deg,transparent 0 12%,rgba(225,194,137,.45) 12.1% 13%,transparent 13.1% 87%,rgba(225,194,137,.45) 87.1% 88%,transparent 88.1%),linear-gradient(180deg,transparent 0 51%,rgba(255,244,218,.22) 51.2%,transparent 52%)}
.yabawi-stage::after{content:"✦        ✧        ✦";position:absolute;z-index:2;left:0;right:0;top:4%;pointer-events:none;text-align:center;color:#fff7a6;font-size:clamp(13px,1.6vw,22px);letter-spacing:clamp(35px,7vw,100px);text-shadow:0 0 10px #fff,0 0 18px #ffe75e}
.yabawi-floor{position:absolute;z-index:1;left:6%;right:6%;bottom:4%;height:27%;border-radius:50%;background:radial-gradient(ellipse at 50% 44%,#e75e45 0 52%,#b74439 53% 70%,#7e352b 71% 73%,transparent 74%),radial-gradient(ellipse at 50% 57%,rgba(87,49,20,.29),transparent 69%);border:0;box-shadow:0 13px 20px rgba(80,40,12,.19)}
.yabawi-floor::before,.yabawi-floor::after{content:"💎";position:absolute;bottom:13%;width:10%;min-width:56px;max-width:82px;aspect-ratio:1.1;display:grid;place-items:center;font-size:clamp(23px,2.8vw,42px);border-radius:8px;background:linear-gradient(135deg,#b97731,#7d491f);border:3px solid #d7a55c;box-shadow:0 8px 12px rgba(72,42,13,.25),inset 0 0 0 2px rgba(80,41,11,.28)}
.yabawi-floor::before{left:-2.2%;transform:rotate(-4deg)}.yabawi-floor::after{right:-2.2%;transform:rotate(4deg)}
.yabawi-thief{--lean:0deg;position:absolute;z-index:6;top:2%;width:33.333%;height:93%;left:0;border:0;background:transparent;cursor:pointer;padding:0;transition:left .38s cubic-bezier(.2,.78,.16,1),filter .18s,opacity .18s;outline:none;touch-action:manipulation}
.yabawi-thief:focus-visible{outline:4px solid rgba(255,225,75,.95);outline-offset:-10px;border-radius:28px}
.yabawi-thief .yt-side{display:none!important}
.yabawi-thief .yt-character{position:absolute!important;z-index:7;left:50%!important;right:auto!important;top:auto!important;bottom:7%!important;width:auto!important;height:88%!important;max-width:96%;object-fit:contain;transform:translateX(-50%)!important;transform-origin:50% 92%;user-select:none;-webkit-user-drag:none;pointer-events:none;opacity:1!important;filter:drop-shadow(0 15px 8px rgba(65,38,14,.28)) drop-shadow(0 2px 0 rgba(255,255,255,.2));transition:transform .18s ease,filter .18s ease,opacity .18s ease}
.yabawi-thief.run-left{--lean:-3deg}.yabawi-thief.run-right{--lean:3deg}.yabawi-thief.running{animation:yabawiDashPremium .20s ease-in-out infinite alternate;will-change:left,transform}.yabawi-thief.running .yt-character{opacity:1!important;filter:drop-shadow(0 18px 9px rgba(65,38,14,.25)) brightness(1.02)}
@keyframes yabawiDashPremium{from{transform:translateY(0) rotate(0)}to{transform:translateY(-10px) rotate(var(--lean)) scale(1.018)}}
@media (hover:hover) and (pointer:fine){.yabawi-thief:not(.running):not(:disabled):hover .yt-character{transform:translateX(-50%) translateY(-7px) scale(1.035)!important;filter:drop-shadow(0 19px 10px rgba(63,36,10,.3)) brightness(1.04)}}
.yabawi-thief .yt-held-gem{position:absolute!important;z-index:11;left:70%!important;top:49%!important;width:auto!important;height:auto!important;opacity:0;display:block;font-size:clamp(27px,3vw,46px);line-height:1;transform:translate(-50%,-50%) scale(.2) rotate(-14deg)!important;transform-origin:50% 50%!important;transition:.25s cubic-bezier(.2,1.35,.35,1);filter:drop-shadow(0 0 7px #2fd8ff) drop-shadow(0 0 15px #fff);pointer-events:none}
.yabawi-thief.show-gem.has-gem .yt-held-gem,.yabawi-thief.open.has-gem .yt-held-gem{opacity:1;transform:translate(-50%,-50%) scale(1.16) rotate(0)!important}
.yabawi-thief.open .yt-character{transform:translateX(-50%) translateY(-3px) scale(1.02)!important}
.yabawi-thief strong{position:absolute;z-index:12;left:50%;bottom:0;transform:translateX(-50%);width:clamp(37px,3.8vw,52px);height:clamp(37px,3.8vw,52px);display:grid;place-items:center;padding:0;border-radius:50%;color:#fff;background:linear-gradient(180deg,#276fd4,#0c3c91);border:3px solid #f2cc70;box-shadow:0 5px 8px rgba(32,52,99,.31),inset 0 2px 0 rgba(255,255,255,.62);font-size:clamp(18px,1.65vw,25px);font-weight:1000;text-shadow:0 2px 2px rgba(0,0,0,.32)}
.yabawi-thief.picked strong{background:linear-gradient(180deg,#ffd758,#e8a714);color:#513300;border-color:#fff2a5}.yabawi-thief.win{filter:drop-shadow(0 0 12px rgba(51,231,116,.72)) drop-shadow(0 0 28px rgba(51,231,116,.42))}.yabawi-thief.lose{filter:grayscale(.18) brightness(.82) drop-shadow(0 0 12px rgba(235,75,88,.46))}.yabawi-thief.win .yt-character{animation:yabawiWinnerImgPremium .55s cubic-bezier(.2,.9,.35,1.3) both}
@keyframes yabawiWinnerImgPremium{0%{transform:translateX(-50%) scale(1)}45%{transform:translateX(-50%) translateY(-15px) scale(1.08)}100%{transform:translateX(-50%) scale(1.035)}}
.yabawi-status{position:relative;z-index:30;min-height:24px;margin:5px 0 0;padding:5px 14px;text-align:center;font-weight:900;color:#17396e;font-size:clamp(12px,1vw,15px);border-radius:999px;background:rgba(255,255,255,.86);border:1px solid #d8e5fb;box-shadow:0 4px 11px rgba(32,75,136,.08)}
#yabawiStart.luck-action{position:relative;z-index:31;min-width:clamp(220px,29vw,430px)!important;min-height:clamp(48px,5.2vw,68px)!important;margin-top:6px!important;padding:10px 26px!important;border:2px solid #e8ad25!important;border-radius:18px!important;background:linear-gradient(180deg,#fff17b 0%,#ffc72c 48%,#eea712 100%)!important;color:#4a2c00!important;box-shadow:0 6px 0 #b6750a,0 12px 22px rgba(136,88,6,.24),inset 0 2px 0 rgba(255,255,255,.85)!important;font-size:clamp(17px,1.55vw,24px)!important;font-weight:1000!important;text-shadow:0 1px 0 rgba(255,255,255,.55)!important}
#yabawiStart.luck-action::before{content:"💎";margin-right:9px;filter:drop-shadow(0 2px 2px rgba(0,98,170,.24))}#yabawiStart.luck-action:hover:not(:disabled){transform:translateY(-2px)!important;box-shadow:0 8px 0 #b6750a,0 15px 27px rgba(136,88,6,.28),inset 0 2px 0 rgba(255,255,255,.9)!important}#yabawiStart.luck-action:active:not(:disabled){transform:translateY(5px)!important;box-shadow:0 2px 0 #b6750a,0 7px 13px rgba(136,88,6,.2)!important}
@media(max-width:700px){.luck-game-screen[data-game="yabawi"] .luck-game-content{padding:6px!important}.luck-game-screen[data-game="yabawi"] .luck-prompt{font-size:clamp(25px,7.8vw,34px)!important}.luck-game-screen[data-game="yabawi"] .luck-subprompt{font-size:11px!important}.yabawi-speed{margin:2px 0 3px}.yabawi-speed-btn{height:29px;min-width:58px}.yabawi-stage{height:min(52vw + 150px,390px);min-height:285px;border-width:2px;border-radius:18px}.yabawi-thief{top:5%;height:89%}.yabawi-thief .yt-character{height:86%!important}.yabawi-thief strong{border-width:2px}.yabawi-status{margin-top:3px;padding:4px 10px;font-size:11px}#yabawiStart.luck-action{min-height:48px!important;margin-top:4px!important;font-size:17px!important}}
@media(max-height:720px) and (min-width:701px){.luck-game-screen[data-game="yabawi"] .luck-prompt{font-size:34px!important}.luck-game-screen[data-game="yabawi"] .luck-subprompt{font-size:12px!important}.yabawi-stage{height:clamp(285px,52vh,365px)}#yabawiStart.luck-action{min-height:48px!important;font-size:18px!important}}
@media(prefers-reduced-motion:reduce){.yabawi-thief,.yabawi-thief .yt-character,.yabawi-thief .yt-held-gem{animation:none!important;transition-duration:.01ms!important}}


.arcade-home .yabawi-tile .tile-visual{overflow:hidden;background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.9),transparent 30%),linear-gradient(180deg,#6ec9f5 0 55%,#dfb36e 56% 100%)}
.arcade-home .yabawi-tile .tile-visual::before{content:"";position:absolute;inset:4px 25% 0;background:url("assets/yabawi-hold.png") center bottom/contain no-repeat;filter:drop-shadow(0 7px 5px rgba(58,34,14,.24))}
.arcade-home .yabawi-tile .tile-visual::after{content:"💎";position:absolute;right:14%;top:19%;font-size:30px;filter:drop-shadow(0 0 7px rgba(255,255,255,.9))}


.yabawi-thief{transition:left .44s cubic-bezier(.2,.92,.18,1)!important,filter .14s linear,transform .14s linear!important;will-change:left,transform}
.yabawi-thief .yt-character{bottom:8%!important;height:90%!important;max-width:88%!important;opacity:1!important;backface-visibility:hidden;will-change:transform,filter;filter:drop-shadow(0 15px 9px rgba(65,38,14,.28)) drop-shadow(0 2px 0 rgba(255,255,255,.14))!important}
.yabawi-thief.running:not(.moving) .yt-character{animation:yabawiIdleJogV3 .2s ease-in-out infinite alternate!important}
.yabawi-thief.moving{z-index:40!important}
.yabawi-thief.moving::after{content:"";position:absolute;left:50%;bottom:8%;width:44%;height:8%;transform:translateX(-50%);border-radius:999px;background:radial-gradient(ellipse at center,rgba(138,92,31,.42) 0%,rgba(138,92,31,.22) 48%,rgba(138,92,31,0) 72%);filter:blur(7px);animation:yabawiDustV3 .16s linear infinite;pointer-events:none}
.yabawi-thief.run-left.moving .yt-character{animation:yabawiRunLeftV3 .14s linear infinite!important}
.yabawi-thief.run-right.moving .yt-character{animation:yabawiRunRightV3 .14s linear infinite!important}
.yabawi-thief.long-hop.moving .yt-character{animation-duration:.11s!important}
.yabawi-thief.moving strong{animation:yabawiBadgeV3 .14s linear infinite!important}
.yabawi-thief.open .yt-character,.yabawi-thief.win .yt-character,.yabawi-thief.lose .yt-character{opacity:1!important}
.yabawi-thief.lose{filter:drop-shadow(0 0 12px rgba(235,75,88,.42))!important}
.yabawi-thief.lose .yt-character{filter:drop-shadow(0 15px 9px rgba(65,38,14,.28)) saturate(.98)!important}
@keyframes yabawiIdleJogV3{from{transform:translateX(-50%) translateY(0) scale(1)}to{transform:translateX(-50%) translateY(-8px) scale(1.01)}}
@keyframes yabawiRunLeftV3{0%{transform:translateX(-50%) translateY(0) rotate(-9deg) scale(1.02,.985)}25%{transform:translateX(-50%) translateY(-13px) rotate(-3deg) scale(.99,1.02)}50%{transform:translateX(-50%) translateY(-2px) rotate(7deg) scale(1.015,.99)}75%{transform:translateX(-50%) translateY(-15px) rotate(1deg) scale(.99,1.02)}100%{transform:translateX(-50%) translateY(0) rotate(-9deg) scale(1.02,.985)}}
@keyframes yabawiRunRightV3{0%{transform:translateX(-50%) translateY(0) rotate(9deg) scale(1.02,.985)}25%{transform:translateX(-50%) translateY(-13px) rotate(3deg) scale(.99,1.02)}50%{transform:translateX(-50%) translateY(-2px) rotate(-7deg) scale(1.015,.99)}75%{transform:translateX(-50%) translateY(-15px) rotate(-1deg) scale(.99,1.02)}100%{transform:translateX(-50%) translateY(0) rotate(9deg) scale(1.02,.985)}}
@keyframes yabawiBadgeV3{0%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}100%{transform:translateX(-50%) translateY(0)}}
@keyframes yabawiDustV3{0%{opacity:.7;transform:translateX(-50%) scale(1)}50%{opacity:.42;transform:translateX(-50%) scale(1.12,.86)}100%{opacity:.7;transform:translateX(-50%) scale(1)}}


.luck-game-screen[data-game="yabawi"] .luck-game-content{justify-content:flex-start!important;padding:clamp(8px,1.1vw,16px) clamp(8px,1.6vw,22px) clamp(10px,1.3vw,18px)!important;overflow:hidden;background:radial-gradient(circle at 50% -10%,rgba(78,170,255,.18),transparent 34%),linear-gradient(180deg,#f9fcff 0%,#f3f7ff 100%)}
.luck-game-screen[data-game="yabawi"] .luck-kicker{margin:0 0 2px!important;padding:5px 14px;border-radius:999px;color:#fff!important;background:linear-gradient(180deg,#126fe3,#0847a8);border:1px solid rgba(255,255,255,.75);box-shadow:0 5px 13px rgba(19,83,175,.24),inset 0 1px 0 rgba(255,255,255,.55);font-size:clamp(10px,.78vw,13px)!important;letter-spacing:.13em!important}
.luck-game-screen[data-game="yabawi"] .luck-prompt{margin:2px 0 0!important;color:#102d68!important;font-size:clamp(28px,3.1vw,49px)!important;line-height:1.04!important;letter-spacing:-.055em!important;font-weight:1000!important;text-shadow:0 2px 0 #fff,0 5px 13px rgba(24,66,135,.14)}
.luck-game-screen[data-game="yabawi"] .yabawi-title-gem{color:#f1b91d;text-shadow:0 2px 0 #fff,0 4px 0 rgba(140,83,0,.16),0 7px 14px rgba(225,151,0,.2)}
.luck-game-screen[data-game="yabawi"] .luck-subprompt{margin:4px 0 4px!important;color:#274576!important;font-size:clamp(11px,1.02vw,16px)!important;font-weight:850!important}
.yabawi-levels{position:relative;z-index:30;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:4px 0 6px}
.yabawi-level-btn{min-width:110px;height:42px;padding:0 14px;border:0;border-radius:16px;background:linear-gradient(180deg,#153d86,#0b255e);color:#dfeaff;font-size:12px;font-weight:1000;cursor:pointer;transition:.16s transform,.16s background,.16s box-shadow;box-shadow:0 5px 12px rgba(12,48,109,.18),inset 0 1px 0 rgba(255,255,255,.14)}
.yabawi-level-btn b{display:block;font-size:14px;letter-spacing:-.04em}.yabawi-level-btn span{display:block;font-size:10px;opacity:.86;margin-top:1px}.yabawi-level-btn:hover:not(:disabled){transform:translateY(-1px)}
.yabawi-level-btn.on{background:linear-gradient(180deg,#2d89ff,#075bd1);color:#fff;box-shadow:0 6px 14px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.72)}
.yabawi-stage{position:relative;width:min(99%,1080px);height:clamp(320px,55vh,540px);margin:2px auto 0;border-radius:clamp(18px,2.1vw,30px);overflow:hidden;isolation:isolate;border:3px solid #d9a640;background:radial-gradient(ellipse at 16% 19%,rgba(255,255,255,.95) 0 6%,rgba(255,255,255,.4) 7% 11%,transparent 12%),radial-gradient(ellipse at 78% 14%,rgba(255,255,255,.92) 0 5%,rgba(255,255,255,.38) 6% 10%,transparent 11%),radial-gradient(circle at 50% 33%,rgba(255,255,255,.65),transparent 27%),linear-gradient(180deg,#43b7f4 0%,#82d4ff 47%,#e2bc78 48%,#cf9854 100%);box-shadow:0 15px 34px rgba(91,61,23,.23),inset 0 0 0 2px rgba(255,255,255,.56),inset 0 -24px 52px rgba(91,49,9,.12)}
.yabawi-stage::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(178,119,55,.82) 0 4.5%,transparent 4.6% 95.4%,rgba(178,119,55,.82) 95.5% 100%),radial-gradient(ellipse at 7% 46%,#e5c68d 0 8%,transparent 8.2%),radial-gradient(ellipse at 93% 46%,#e5c68d 0 8%,transparent 8.2%),linear-gradient(90deg,transparent 0 12%,rgba(225,194,137,.45) 12.1% 13%,transparent 13.1% 87%,rgba(225,194,137,.45) 87.1% 88%,transparent 88.1%),linear-gradient(180deg,transparent 0 51%,rgba(255,244,218,.22) 51.2%,transparent 52%)}
.yabawi-stage::after{content:"✦        ✧        ✦";position:absolute;z-index:2;left:0;right:0;top:4%;pointer-events:none;text-align:center;color:#fff7a6;font-size:clamp(13px,1.6vw,22px);letter-spacing:clamp(35px,7vw,100px);text-shadow:0 0 10px #fff,0 0 18px #ffe75e}
.yabawi-floor{position:absolute;z-index:1;left:6%;right:6%;bottom:4%;height:27%;border-radius:50%;background:radial-gradient(ellipse at 50% 44%,#e75e45 0 52%,#b74439 53% 70%,#7e352b 71% 73%,transparent 74%),radial-gradient(ellipse at 50% 57%,rgba(87,49,20,.29),transparent 69%);box-shadow:0 13px 20px rgba(80,40,12,.19)}
.yabawi-floor::before,.yabawi-floor::after{content:"💎";position:absolute;bottom:13%;width:10%;min-width:56px;max-width:82px;aspect-ratio:1.1;display:grid;place-items:center;font-size:clamp(23px,2.8vw,42px);border-radius:8px;background:linear-gradient(135deg,#b97731,#7d491f);border:3px solid #d7a55c;box-shadow:0 8px 12px rgba(72,42,13,.25),inset 0 0 0 2px rgba(80,41,11,.28)}
.yabawi-floor::before{left:-2.2%;transform:rotate(-4deg)}.yabawi-floor::after{right:-2.2%;transform:rotate(4deg)}
.yabawi-thief{position:absolute;z-index:6;top:6%;width:33.333%;height:88%;left:0;border:0;background:transparent;cursor:pointer;padding:0;transition:left .38s cubic-bezier(.2,.92,.18,1),top .38s cubic-bezier(.22,.8,.2,1),filter .18s,transform .18s;outline:none;touch-action:manipulation;will-change:left,top,transform}
.yabawi-thief:focus-visible{outline:4px solid rgba(255,225,75,.95);outline-offset:-10px;border-radius:28px}
.yabawi-thief .yt-side,.yabawi-thief .yt-front{display:none!important}
.yabawi-thief .yt-character{position:absolute!important;z-index:7;left:50%!important;bottom:7%!important;width:auto!important;height:88%!important;max-width:88%!important;object-fit:contain;transform:translateX(-50%)!important;transform-origin:50% 90%;user-select:none;-webkit-user-drag:none;pointer-events:none;opacity:1!important;backface-visibility:hidden;filter:drop-shadow(0 15px 8px rgba(65,38,14,.28));transition:transform .15s ease,filter .15s ease}
.yabawi-thief .yt-held-gem{display:none!important}
.yabawi-thief strong{position:absolute;z-index:12;left:50%;bottom:0;transform:translateX(-50%);width:clamp(37px,3.8vw,52px);height:clamp(37px,3.8vw,52px);display:grid;place-items:center;padding:0;border-radius:50%;color:#fff;background:linear-gradient(180deg,#276fd4,#0c3c91);border:3px solid #f2cc70;box-shadow:0 5px 8px rgba(32,52,99,.31),inset 0 2px 0 rgba(255,255,255,.62);font-size:clamp(18px,1.65vw,25px);font-weight:1000;text-shadow:0 2px 2px rgba(0,0,0,.32)}
.yabawi-thief.picked strong{background:linear-gradient(180deg,#ffd758,#e8a714);color:#513300;border-color:#fff2a5}
.yabawi-thief.win{filter:drop-shadow(0 0 12px rgba(51,231,116,.72)) drop-shadow(0 0 28px rgba(51,231,116,.42))}.yabawi-thief.lose{filter:drop-shadow(0 0 12px rgba(235,75,88,.46))}
.yabawi-thief.taunt strong{background:linear-gradient(180deg,#ff9946,#d14f08)}
.yabawi-thief.running .yt-character{filter:drop-shadow(0 19px 10px rgba(63,36,10,.3))}
.yabawi-thief.moving strong{animation:yabawiBadgeV6 .16s linear infinite}
.yabawi-thief.move-dash .yt-character{animation:yabawiRunDashV6 .16s linear infinite}
.yabawi-thief.move-jump .yt-character{animation:yabawiRunJumpV6 .18s ease-in-out infinite}
.yabawi-thief.move-roll .yt-character{transform-origin:50% 95%!important;animation:yabawiRunRollV6 .34s linear infinite}
.yabawi-thief.path-up .yt-character{animation-timing-function:ease-in-out}.yabawi-thief.path-down .yt-character{animation-timing-function:ease-in-out}
.yabawi-thief.long-hop .yt-character{animation-duration:.11s!important}
.yabawi-thief.moving::after{content:"";position:absolute;left:50%;bottom:8%;width:44%;height:8%;transform:translateX(-50%);border-radius:999px;background:radial-gradient(ellipse at center,rgba(138,92,31,.42) 0%,rgba(138,92,31,.22) 48%,rgba(138,92,31,0) 72%);filter:blur(7px);animation:yabawiDustV6 .16s linear infinite;pointer-events:none}
.yabawi-flying-gem{position:absolute;z-index:24;font-size:clamp(26px,3vw,46px);line-height:1;pointer-events:none;filter:drop-shadow(0 0 6px rgba(63,210,255,.9)) drop-shadow(0 0 14px rgba(255,255,255,.85))}
@keyframes yabawiRunDashV6{0%{transform:translateX(-50%) translateY(0) rotate(-6deg) scale(1.02,.985)}25%{transform:translateX(-50%) translateY(-11px) rotate(-2deg) scale(.99,1.02)}50%{transform:translateX(-50%) translateY(-2px) rotate(6deg) scale(1.015,.99)}75%{transform:translateX(-50%) translateY(-13px) rotate(1deg) scale(.99,1.02)}100%{transform:translateX(-50%) translateY(0) rotate(-6deg) scale(1.02,.985)}}
@keyframes yabawiRunJumpV6{0%,100%{transform:translateX(-50%) translateY(0) rotate(-4deg) scale(1)}50%{transform:translateX(-50%) translateY(-24px) rotate(5deg) scale(1.04,.98)}}
@keyframes yabawiRunRollV6{0%{transform:translateX(-50%) translateY(0) rotate(0deg) scale(.98)}25%{transform:translateX(-50%) translateY(5px) rotate(88deg) scale(.92,1.06)}50%{transform:translateX(-50%) translateY(11px) rotate(180deg) scale(.88,1.12)}75%{transform:translateX(-50%) translateY(5px) rotate(268deg) scale(.92,1.06)}100%{transform:translateX(-50%) translateY(0) rotate(360deg) scale(.98)}}
@keyframes yabawiBadgeV6{0%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}100%{transform:translateX(-50%) translateY(0)}}
@keyframes yabawiDustV6{0%{opacity:.7;transform:translateX(-50%) scale(1)}50%{opacity:.42;transform:translateX(-50%) scale(1.12,.86)}100%{opacity:.7;transform:translateX(-50%) scale(1)}}
.yabawi-status{position:relative;z-index:30;min-height:24px;margin:6px 0 0;padding:6px 14px;text-align:center;font-weight:900;color:#17396e;font-size:clamp(12px,1vw,15px);border-radius:999px;background:rgba(255,255,255,.86);border:1px solid #d8e5fb;box-shadow:0 4px 11px rgba(32,75,136,.08)}
#yabawiStart.luck-action{position:relative;z-index:31;min-width:clamp(220px,29vw,430px)!important;min-height:clamp(48px,5.2vw,68px)!important;margin-top:6px!important;padding:10px 26px!important;border:2px solid #e8ad25!important;border-radius:18px!important;background:linear-gradient(180deg,#fff17b 0%,#ffc72c 48%,#eea712 100%)!important;color:#4a2c00!important;box-shadow:0 6px 0 #b6750a,0 12px 22px rgba(136,88,6,.24),inset 0 2px 0 rgba(255,255,255,.85)!important;font-size:clamp(17px,1.55vw,24px)!important;font-weight:1000!important;text-shadow:0 1px 0 rgba(255,255,255,.55)!important}
#yabawiStart.luck-action::before{content:"💎";margin-right:9px;filter:drop-shadow(0 2px 2px rgba(0,98,170,.24))}#yabawiStart.luck-action:hover:not(:disabled){transform:translateY(-2px)!important;box-shadow:0 8px 0 #b6750a,0 15px 27px rgba(136,88,6,.28),inset 0 2px 0 rgba(255,255,255,.9)!important}#yabawiStart.luck-action:active:not(:disabled){transform:translateY(5px)!important;box-shadow:0 2px 0 #b6750a,0 7px 13px rgba(136,88,6,.2)!important}
@media(max-width:700px){.luck-game-screen[data-game="yabawi"] .luck-game-content{padding:6px!important}.luck-game-screen[data-game="yabawi"] .luck-prompt{font-size:clamp(25px,7.8vw,34px)!important}.luck-game-screen[data-game="yabawi"] .luck-subprompt{font-size:11px!important}.yabawi-level-btn{min-width:98px;height:40px}.yabawi-stage{height:min(55vw + 150px,420px);min-height:300px;border-width:2px;border-radius:18px}.yabawi-thief{top:8%;height:84%}.yabawi-thief .yt-character{height:82%!important;max-width:92%!important}.yabawi-status{margin-top:3px;padding:4px 10px;font-size:11px}#yabawiStart.luck-action{min-height:48px!important;margin-top:4px!important;font-size:17px!important}}
@media(prefers-reduced-motion:reduce){.yabawi-thief,.yabawi-thief .yt-character,.yabawi-flying-gem{animation:none!important;transition-duration:.01ms!important}}


/* Slot numbers stay fixed; only thieves move. */
.yabawi-thief:disabled{opacity:1!important;filter:none;cursor:default}
.yabawi-thief:disabled.win{filter:drop-shadow(0 0 12px rgba(51,231,116,.72)) drop-shadow(0 0 28px rgba(51,231,116,.42))!important}
.yabawi-thief:disabled.lose{filter:drop-shadow(0 0 12px rgba(235,75,88,.46))!important}
.yabawi-thief,.yabawi-thief .yt-character{opacity:1!important}
.yabawi-thief strong{display:none!important}
.yabawi-slot-labels{position:absolute;z-index:70;left:0;right:0;bottom:1.1%;display:grid;grid-template-columns:repeat(3,1fr);pointer-events:none}
.yabawi-slot-labels span{justify-self:center;width:clamp(37px,3.8vw,52px);height:clamp(37px,3.8vw,52px);display:grid;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(180deg,#276fd4,#0c3c91);border:3px solid #f2cc70;box-shadow:0 5px 8px rgba(32,52,99,.31),inset 0 2px 0 rgba(255,255,255,.62);font-size:clamp(18px,1.65vw,25px);font-weight:1000;text-shadow:0 2px 2px rgba(0,0,0,.32)}
@media(max-width:700px){.yabawi-slot-labels{bottom:.6%}.yabawi-slot-labels span{border-width:2px}}


.yabawi-levels,.yabawi-level-btn{display:none!important}
.yabawi-stage-progress{position:relative;z-index:32;display:flex;align-items:center;justify-content:center;gap:9px;margin:4px 0 7px}
.yabawi-stage-progress b{display:inline-flex;align-items:center;justify-content:center;min-width:94px;height:38px;padding:0 14px;border-radius:999px;background:linear-gradient(180deg,#2d89ff,#075bd1);border:2px solid rgba(255,255,255,.78);color:#fff;font-size:15px;font-weight:1000;box-shadow:0 5px 12px rgba(12,48,109,.22),inset 0 1px 0 rgba(255,255,255,.6)}
.yabawi-stage-progress span{font-size:12px;font-weight:900;color:#355587;background:#fff;border:1px solid #d8e5fb;border-radius:999px;padding:7px 11px;box-shadow:0 3px 8px rgba(32,75,136,.07)}
.yabawi-stage-progress[data-stage="1"] b{background:linear-gradient(180deg,#45a96c,#268349)}
.yabawi-stage-progress[data-stage="2"] b{background:linear-gradient(180deg,#2d89ff,#075bd1)}
.yabawi-stage-progress[data-stage="3"] b{background:linear-gradient(180deg,#ef6b5d,#b93232)}
@media(max-width:700px){.yabawi-stage-progress{gap:6px;margin:3px 0 5px}.yabawi-stage-progress b{height:34px;min-width:82px;font-size:13px}.yabawi-stage-progress span{font-size:10px;padding:6px 8px}}


.yabawi-thief,.yabawi-thief:disabled,.yabawi-thief[disabled]{opacity:1!important}
.yabawi-thief.picked-mark::before{content:"선택";position:absolute;left:50%;top:2%;transform:translateX(-50%);z-index:90;padding:5px 10px;border-radius:999px;background:linear-gradient(180deg,#ffe36a,#f0b21a);color:#5a3a00;border:2px solid #fff2a5;font-size:12px;font-weight:1000;box-shadow:0 4px 8px rgba(0,0,0,.18)}
.yabawi-thief.picked-mark::after{content:"";position:absolute;inset:2% 16% 7% 16%;border-radius:20px;border:4px solid rgba(255,215,88,.95);box-shadow:0 0 0 4px rgba(255,255,255,.55),0 0 18px rgba(255,215,88,.5);pointer-events:none}
.yabawi-thief .yt-held-gem{display:none!important}
.yabawi-thief.show-answer.has-gem .yt-held-gem,.yabawi-thief.open.has-gem .yt-held-gem{display:block!important;position:absolute!important;left:50%!important;top:3%!important;z-index:95;font-size:42px;line-height:1;transform:translateX(-50%)!important;filter:drop-shadow(0 0 8px rgba(63,210,255,.95)) drop-shadow(0 0 16px rgba(255,255,255,.95));animation:yabawiAnswerGem 0.55s ease-in-out infinite alternate}
.yabawi-thief.picked-wrong .yt-character{filter:drop-shadow(0 15px 8px rgba(65,38,14,.28)) saturate(1.06)!important}
@keyframes yabawiAnswerGem{from{transform:translateX(-50%) translateY(0) scale(1)}to{transform:translateX(-50%) translateY(-5px) scale(1.08)}}


.yabawi-curtain{position:absolute;z-index:130;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit}
.yabawi-curtain-panel{position:absolute;top:0;bottom:0;width:51.5%;background:
  radial-gradient(ellipse at 72% 45%,rgba(255,255,255,.13),transparent 26%),
  repeating-linear-gradient(90deg,#761416 0 10%,#a82025 10% 21%,#681013 21% 31%,#b52b2e 31% 42%,#721316 42% 52%);
  box-shadow:inset 0 0 26px rgba(40,0,0,.48),0 0 18px rgba(36,0,0,.35);
  transition:transform .46s cubic-bezier(.55,.02,.2,1);will-change:transform}
.yabawi-curtain-left{left:0;border-right:4px solid #e5b04a}
.yabawi-curtain-right{right:0;border-left:4px solid #e5b04a;background-position:18px 0}
.yabawi-curtain.open .yabawi-curtain-left{transform:translateX(-101%)}
.yabawi-curtain.open .yabawi-curtain-right{transform:translateX(101%)}
.yabawi-curtain-valance{position:absolute;z-index:3;left:0;right:0;top:0;height:20%;background:
  radial-gradient(ellipse at 8% 0,#bf3437 0 28%,transparent 29%),
  radial-gradient(ellipse at 25% 0,#8e171b 0 29%,transparent 30%),
  radial-gradient(ellipse at 42% 0,#b82d31 0 28%,transparent 29%),
  radial-gradient(ellipse at 59% 0,#8b161a 0 29%,transparent 30%),
  radial-gradient(ellipse at 76% 0,#bd3337 0 28%,transparent 29%),
  radial-gradient(ellipse at 93% 0,#8d171b 0 29%,transparent 30%),
  linear-gradient(180deg,#b7292d,#6e1115);border-bottom:5px solid #e4ad43;box-shadow:0 6px 12px rgba(54,0,0,.3);transition:transform .34s ease .08s}
.yabawi-curtain.open .yabawi-curtain-valance{transform:translateY(-105%)}
.yabawi-curtain-rope{position:absolute;z-index:4;top:43%;width:11px;height:28%;border-radius:999px;background:linear-gradient(90deg,#9c6914,#f4d36a,#8f5d0d);box-shadow:0 0 0 2px rgba(92,47,0,.22);transition:opacity .16s}
.yabawi-curtain-rope.left{left:48.2%}.yabawi-curtain-rope.right{right:48.2%}
.yabawi-curtain.open .yabawi-curtain-rope{opacity:0}
.yabawi-curtain-sign{position:absolute;z-index:5;left:50%;top:46%;transform:translate(-50%,-50%);min-width:170px;padding:11px 22px;border-radius:14px;background:linear-gradient(180deg,#f2c65f,#bd7920);border:3px solid #fff0a8;color:#4b2500;text-align:center;font-size:clamp(18px,2vw,27px);font-weight:1000;letter-spacing:-.04em;text-shadow:0 1px 0 rgba(255,255,255,.55);box-shadow:0 7px 16px rgba(58,12,0,.32),inset 0 2px 0 rgba(255,255,255,.5);transition:opacity .16s,transform .24s}
.yabawi-curtain.open .yabawi-curtain-sign{opacity:0;transform:translate(-50%,-70%) scale(.85)}
@media(max-width:700px){.yabawi-curtain-sign{min-width:135px;padding:9px 15px;font-size:18px}.yabawi-curtain-valance{height:18%}}
@media(prefers-reduced-motion:reduce){.yabawi-curtain-panel,.yabawi-curtain-valance,.yabawi-curtain-sign{transition-duration:.01ms!important}}


.yabawi-curtain{pointer-events:auto!important}
.yabawi-curtain.open{pointer-events:none!important}
.yabawi-curtain-center{position:absolute;z-index:8;left:50%;top:48%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px;transition:opacity .16s,transform .24s}
.yabawi-curtain.open .yabawi-curtain-center{opacity:0;transform:translate(-50%,-66%) scale(.9);pointer-events:none}
.yabawi-curtain-center .yabawi-curtain-sign{position:relative!important;left:auto!important;top:auto!important;transform:none!important;min-width:190px}
#yabawiStart.yabawi-curtain-start{position:relative!important;z-index:9!important;min-width:clamp(210px,28vw,360px)!important;min-height:58px!important;margin:0!important;padding:10px 24px!important;border:3px solid #fff0a8!important;border-radius:18px!important;background:linear-gradient(180deg,#fff17b 0%,#ffc72c 48%,#eea712 100%)!important;color:#4a2c00!important;box-shadow:0 7px 0 #9e5f08,0 14px 24px rgba(47,6,0,.38),inset 0 2px 0 rgba(255,255,255,.9)!important;font-size:clamp(18px,1.7vw,25px)!important;font-weight:1000!important;cursor:pointer;pointer-events:auto!important}
#yabawiStart.yabawi-curtain-start::before{content:"▶";margin-right:10px}
#yabawiStart.yabawi-curtain-start:hover:not(:disabled){transform:translateY(-2px)!important}
#yabawiStart.yabawi-curtain-start:active:not(:disabled){transform:translateY(4px)!important;box-shadow:0 3px 0 #9e5f08,0 8px 14px rgba(47,6,0,.3)!important}
#yabawiStart.yabawi-curtain-start:disabled{opacity:.75!important;cursor:default}
@media(max-width:700px){.yabawi-curtain-center{top:49%;gap:10px}.yabawi-curtain-center .yabawi-curtain-sign{min-width:145px!important}.yabawi-curtain-start{min-width:190px!important;min-height:52px!important;font-size:17px!important}}


.arcade-home .yabawi-tile .tile-visual::before,
.arcade-home .yabawi-tile .tile-visual::after{content:none!important;display:none!important}
.arcade-home .yabawi-tile .tile-photo{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;display:block!important}


/* v30 · draw grids stay close to square; 30 cards are exactly 6 x 5. */
.draw-board.count-30{grid-template-columns:repeat(6,minmax(48px,76px))!important;justify-content:center!important;align-content:center!important}
.draw-board.adaptive-grid{grid-template-columns:repeat(var(--draw-cols),minmax(38px,72px))!important;justify-content:center!important;align-content:center!important}
.draw-card.owner-red.revealed .draw-reveal{background:linear-gradient(145deg,#fff0f2,#ffb5bf)!important;border-color:#ef4961!important;color:#a9253d!important;box-shadow:0 0 0 3px #ef4961,0 8px 18px rgba(212,65,86,.25)!important}
.draw-card.owner-blue.revealed .draw-reveal{background:linear-gradient(145deg,#eef3ff,#a9c0ff)!important;border-color:#416fe0!important;color:#244cba!important;box-shadow:0 0 0 3px #416fe0,0 8px 18px rgba(67,92,207,.25)!important}
.draw-card.owner-red.revealed .draw-reveal small,.draw-card.owner-blue.revealed .draw-reveal small{color:inherit!important}
@media(max-width:900px){
  .draw-board.count-30{grid-template-columns:repeat(6,minmax(42px,1fr))!important;width:min(96vw,520px)!important}
  .draw-board.adaptive-grid{grid-template-columns:repeat(var(--draw-cols),minmax(30px,1fr))!important;width:min(96vw,680px)!important}
}
@media(max-width:520px){
  .draw-board.count-30{grid-template-columns:repeat(6,minmax(38px,1fr))!important}
  .draw-board.adaptive-grid{grid-template-columns:repeat(var(--draw-cols),minmax(25px,1fr))!important;gap:4px!important;padding:6px!important}
  .draw-board.adaptive-grid .draw-cover b{font-size:clamp(14px,5vw,22px)!important}
  .draw-board.adaptive-grid .draw-cover small{font-size:7px!important;letter-spacing:.04em!important}
  .draw-board.adaptive-grid .draw-reveal b{font-size:clamp(16px,5.5vw,24px)!important}
  .draw-board.adaptive-grid .draw-reveal small{font-size:8px!important}
}


/* v32 · full-board expand/collapse for luck/draw games */
.luck-top-actions{display:flex;align-items:center;gap:8px}
.luck-expand-btn{border:1px solid #d5e1f7;background:#f5f8ff;color:#35518c;border-radius:13px;padding:10px 15px;font-weight:950;transition:.18s;cursor:pointer}
.luck-expand-btn:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
body[data-view="luck-game"].luck-expanded{overflow:hidden!important}
body[data-view="luck-game"].luck-expanded .app-shell{width:100vw!important;max-width:none!important;height:100vh!important;max-height:none!important;aspect-ratio:auto!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}
body[data-view="luck-game"].luck-expanded #luckGameScreen{inset:0!important;width:100%!important;height:100%!important;border-radius:0!important}
body[data-view="luck-game"].luck-expanded .luck-topbar{position:absolute!important;z-index:150!important;top:0!important;right:0!important;left:0!important;height:0!important;min-height:0!important;padding:0!important;border:0!important;background:transparent!important;backdrop-filter:none!important;overflow:visible!important;box-shadow:none!important}
body[data-view="luck-game"].luck-expanded .luck-title,
body[data-view="luck-game"].luck-expanded #backToHubFromLuckBtn{display:none!important}
body[data-view="luck-game"].luck-expanded .luck-top-actions{position:absolute!important;z-index:220!important;top:10px!important;right:10px!important;display:block!important}
body[data-view="luck-game"].luck-expanded .luck-expand-btn{min-width:82px!important;padding:9px 13px!important;background:rgba(24,36,68,.88)!important;color:#fff!important;border:1px solid rgba(255,255,255,.32)!important;box-shadow:0 8px 22px rgba(16,30,70,.24)!important;backdrop-filter:blur(10px)!important}
body[data-view="luck-game"].luck-expanded .luck-stage{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:0!important;padding:8px!important;margin:0!important;background:transparent!important;border:0!important;box-shadow:none!important}
body[data-view="luck-game"].luck-expanded .luck-side{display:none!important}
body[data-view="luck-game"].luck-expanded .luck-main{grid-column:1/-1!important;width:100%!important;height:100%!important;min-height:0!important;border-radius:18px!important}
body[data-view="luck-game"].luck-expanded .luck-game-content{padding:7px 9px!important}
body[data-view="luck-game"].luck-expanded #site-version-fixed{display:none!important}
/* Draw mode: keep only essential controls/status while expanded. */
body[data-view="luck-game"].luck-expanded .draw-shell{height:100%!important;padding:4px!important;gap:5px!important;grid-template-rows:auto auto minmax(0,1fr) auto!important}
body[data-view="luck-game"].luck-expanded .draw-mode-nav{display:none!important}
body[data-view="luck-game"].luck-expanded .draw-head{min-height:38px!important;align-items:center!important;gap:8px!important;padding:0 92px 0 4px!important;flex-wrap:nowrap!important}
body[data-view="luck-game"].luck-expanded .draw-head-copy small,
body[data-view="luck-game"].luck-expanded .draw-head-copy p{display:none!important}
body[data-view="luck-game"].luck-expanded .draw-title{margin:0!important;font-size:clamp(18px,1.5vw,24px)!important;white-space:nowrap!important}
body[data-view="luck-game"].luck-expanded .draw-controls{margin-left:auto!important;gap:5px!important;flex-wrap:nowrap!important}
body[data-view="luck-game"].luck-expanded .draw-controls label{padding:4px 6px!important;font-size:11px!important}
body[data-view="luck-game"].luck-expanded .draw-controls select,
body[data-view="luck-game"].luck-expanded .draw-controls input{height:30px!important}
body[data-view="luck-game"].luck-expanded .draw-btn{padding:7px 11px!important;font-size:12px!important;box-shadow:0 3px 0 #3e4caa!important}
body[data-view="luck-game"].luck-expanded .draw-status{min-height:36px!important;padding:5px 10px!important;border-radius:10px!important}
body[data-view="luck-game"].luck-expanded .draw-status strong{font-size:clamp(13px,1.1vw,17px)!important}
body[data-view="luck-game"].luck-expanded .draw-status span{font-size:11px!important}
body[data-view="luck-game"].luck-expanded .draw-board.count-30,
body[data-view="luck-game"].luck-expanded .draw-board.adaptive-grid{width:100%!important;height:100%!important;max-width:none!important;overflow:hidden!important;grid-template-columns:repeat(var(--draw-cols),var(--draw-expanded-card,72px))!important;grid-auto-rows:var(--draw-expanded-card,72px)!important;justify-content:center!important;align-content:center!important;gap:var(--draw-expanded-gap,8px)!important;padding:5px!important}
body[data-view="luck-game"].luck-expanded .draw-card{width:var(--draw-expanded-card,72px)!important;height:var(--draw-expanded-card,72px)!important;aspect-ratio:1!important}
body[data-view="luck-game"].luck-expanded .draw-result:empty{display:none!important;min-height:0!important}
@media(max-width:700px){
 body[data-view="luck-game"].luck-expanded .luck-stage{padding:4px!important}
 body[data-view="luck-game"].luck-expanded .luck-main{border-radius:12px!important}
 body[data-view="luck-game"].luck-expanded .luck-game-content{padding:4px!important}
 body[data-view="luck-game"].luck-expanded .luck-top-actions{top:5px!important;right:5px!important}
 body[data-view="luck-game"].luck-expanded .luck-expand-btn{min-width:68px!important;padding:7px 9px!important;font-size:11px!important}
 body[data-view="luck-game"].luck-expanded .draw-head{padding-right:74px!important;min-height:32px!important}
 body[data-view="luck-game"].luck-expanded .draw-title{font-size:16px!important}
 body[data-view="luck-game"].luck-expanded .draw-controls label{font-size:9px!important;padding:3px 4px!important}
 body[data-view="luck-game"].luck-expanded .draw-controls input{width:48px!important;height:27px!important;padding:0 4px!important}
 body[data-view="luck-game"].luck-expanded .draw-btn{font-size:10px!important;padding:6px 8px!important}
 body[data-view="luck-game"].luck-expanded .draw-status{min-height:30px!important;padding:4px 7px!important}
 body[data-view="luck-game"].luck-expanded .draw-status span{font-size:9px!important}
}


/* v33 · large card numbers, battle settings/restart pair, turn-change FX */
.draw-cover b.draw-cover-number{font-size:clamp(24px,3.5vw,52px)!important;line-height:1!important;font-weight:1000!important;letter-spacing:-.055em!important;text-shadow:0 2px 0 rgba(0,0,0,.14),0 4px 12px rgba(17,30,87,.22)!important}
.draw-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.draw-btn.settings{background:linear-gradient(135deg,#5b83d9,#4666b8)!important;box-shadow:0 5px 0 #324988!important}
body[data-view="luck-game"].luck-expanded .draw-head-actions{margin-left:auto;flex-wrap:nowrap;gap:5px}
body[data-view="luck-game"].luck-expanded .draw-cover b.draw-cover-number{font-size:clamp(16px,calc(var(--draw-expanded-card,72px)*.43),54px)!important}
.battle-turn-fx-v33{position:fixed;z-index:99990;inset:0;display:grid;place-items:center;pointer-events:none;animation:battleTurnBackdropV33 .58s ease both}
.battle-turn-fx-v33.red{background:radial-gradient(circle at 50% 50%,rgba(255,68,88,.30),rgba(255,68,88,.05) 45%,transparent 70%)}
.battle-turn-fx-v33.blue{background:radial-gradient(circle at 50% 50%,rgba(65,111,224,.32),rgba(65,111,224,.05) 45%,transparent 70%)}
.battle-turn-fx-card{min-width:min(76vw,360px);padding:22px 30px;border-radius:24px;text-align:center;background:rgba(255,255,255,.94);border:3px solid currentColor;box-shadow:0 18px 60px rgba(28,43,92,.28);transform:scale(.72);animation:battleTurnCardV33 .58s cubic-bezier(.18,.82,.24,1.08) both}
.battle-turn-fx-v33.red .battle-turn-fx-card{color:#d92f4a}.battle-turn-fx-v33.blue .battle-turn-fx-card{color:#315fd1}
.battle-turn-fx-card small{display:block;font-size:11px;font-weight:1000;letter-spacing:.22em;opacity:.7}.battle-turn-fx-card strong{display:block;margin:4px 0 2px;font-size:clamp(34px,6vw,64px);font-weight:1000;line-height:1}.battle-turn-fx-card span{font-size:14px;font-weight:950;opacity:.82}
.battle-turn-fx-v33.out{opacity:0;transition:opacity .22s ease}
.battle-turn-pulse-red{animation:battleShellRedV33 .55s ease}.battle-turn-pulse-blue{animation:battleShellBlueV33 .55s ease}
@keyframes battleTurnBackdropV33{0%{opacity:0}22%{opacity:1}100%{opacity:.92}}
@keyframes battleTurnCardV33{0%{opacity:0;transform:scale(.65) translateY(18px)}45%{opacity:1;transform:scale(1.07) translateY(0)}100%{opacity:1;transform:scale(1)}}
@keyframes battleShellRedV33{0%,100%{box-shadow:none}45%{box-shadow:inset 0 0 0 6px rgba(239,73,97,.58),inset 0 0 55px rgba(239,73,97,.22)}}
@keyframes battleShellBlueV33{0%,100%{box-shadow:none}45%{box-shadow:inset 0 0 0 6px rgba(65,111,224,.58),inset 0 0 55px rgba(65,111,224,.22)}}
@media(max-width:520px){.draw-cover b.draw-cover-number{font-size:clamp(13px,5.1vw,25px)!important}.draw-head-actions{gap:5px}.draw-head-actions .draw-btn{padding:7px 9px;font-size:11px}.battle-turn-fx-card{min-width:min(82vw,320px);padding:18px 20px}.battle-turn-fx-card strong{font-size:36px}}


#fishResultKg.fish-result-kg{display:block;margin:4px 0 3px;padding:5px 9px;border-radius:999px;background:linear-gradient(90deg,#fff0a6,#ffd256);color:#775000!important;font-size:13px;font-weight:1000;letter-spacing:.02em;width:max-content;max-width:100%}
#fishResultKg[hidden]{display:none!important}
.fish-ranking-panel{position:absolute;z-index:52;right:1.8%;top:2%;width:min(370px,38%);max-height:94%;padding:16px;border-radius:22px;background:linear-gradient(180deg,#fffdf4,#fff4c7);border:1px solid rgba(188,139,28,.25);box-shadow:0 20px 60px rgba(66,43,0,.26);backdrop-filter:blur(14px);transform:translateX(115%);opacity:0;transition:.28s ease;overflow:auto;color:#553c0e}
.fish-ranking-panel.open{transform:translateX(0);opacity:1}
.fish-ranking-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.fish-ranking-head small{display:block;color:#9b761c;font-size:10px;font-weight:1000;letter-spacing:.12em}.fish-ranking-head strong{display:block;margin-top:2px;font-size:21px}
.fish-ranking-head button{width:32px;height:32px;border:0;border-radius:10px;background:#f5e8b4;color:#745710;font-size:25px;line-height:1}
.fish-my-ranking{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;margin-bottom:9px;border-radius:13px;background:linear-gradient(90deg,#fff1a2,#ffd45b);border:1px solid rgba(174,118,12,.18)}
.fish-my-ranking span{font-size:11px;font-weight:900;color:#8c6818}.fish-my-ranking strong{font-size:15px;color:#624300;text-align:right}
.fish-ranking-list{display:grid;gap:5px}.fish-ranking-row{display:grid;grid-template-columns:38px minmax(0,1fr) 82px;align-items:center;gap:7px;min-height:42px;padding:7px 9px;border-radius:11px;background:rgba(255,255,255,.72);border:1px solid rgba(132,95,14,.08)}
.fish-ranking-row.me{outline:2px solid rgba(36,119,255,.42);background:#eef5ff}.fish-ranking-row.top-1{background:linear-gradient(90deg,#fff3ad,#fff9de)}.fish-ranking-row.top-2{background:linear-gradient(90deg,#eef1f5,#fff)}.fish-ranking-row.top-3{background:linear-gradient(90deg,#f3d5bb,#fff5ea)}
.fish-ranking-pos{font-size:16px;font-weight:1000;text-align:center}.fish-ranking-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.fish-ranking-row em{text-align:right;font-style:normal;font-size:13px;font-weight:1000;color:#b17800}
.fish-ranking-empty{padding:18px 10px;text-align:center;color:#947a45;font-size:12px;font-weight:800}.fish-ranking-note{margin:10px 2px 0;color:#9a844f;font-size:11px;line-height:1.45}
@media(max-width:800px){.fish-ranking-panel{width:min(72%,350px);right:1%;top:1%;max-height:97%;padding:12px}.fish-ranking-head strong{font-size:17px}.fish-ranking-row{grid-template-columns:34px minmax(0,1fr) 72px;padding:6px}.fish-ranking-row em{font-size:12px}#fishResultKg.fish-result-kg{font-size:11px;padding:4px 7px}}


#resetFishGameBtn{margin-left:10px!important;border-color:rgba(210,55,70,.3)!important;color:#b52838!important;background:#fff6f7!important}
.fish-reset-confirm{position:fixed;z-index:1000002;inset:0;display:grid;place-items:center;padding:20px;background:rgba(5,12,25,.7);backdrop-filter:blur(8px)}.fish-reset-confirm[hidden]{display:none!important}.fish-reset-confirm-card{width:min(390px,100%);padding:24px;border-radius:22px;background:#fff;color:#202535;text-align:center;box-shadow:0 24px 80px rgba(0,0,0,.3)}.fish-reset-confirm-card .ico{font-size:38px}.fish-reset-confirm-card h3{margin:8px 0 5px;font-size:22px}.fish-reset-confirm-card p{margin:0;color:#747f91;font-size:12px;line-height:1.55;font-weight:700}.fish-reset-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}.fish-reset-confirm-actions button{height:46px;border-radius:13px;font-weight:950;cursor:pointer}.fish-reset-no{border:1px solid #dfe4ed;background:#f7f8fa;color:#465166}.fish-reset-yes{border:0;background:#d9374b;color:#fff}
@media(max-width:520px){#resetFishGameBtn{margin-left:4px!important;padding-inline:7px!important}}


.online-ranking-btn,.enhance-ranking-btn{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.09);color:inherit;border-radius:12px;padding:10px 14px;font-weight:900;cursor:pointer}.enhance-ranking-btn{margin:0 0 10px;padding:8px 12px;color:#ffd49c;background:rgba(255,167,89,.12);border-color:rgba(255,167,89,.28)}
.global-ranking-overlay{position:fixed;inset:0;z-index:999999;background:rgba(4,8,18,.76);display:grid;place-items:center;padding:18px}.global-ranking-card{width:min(760px,96vw);max-height:88vh;overflow:auto;background:#11182a;color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:22px;box-shadow:0 24px 80px rgba(0,0,0,.45);position:relative}.global-ranking-close{position:absolute;right:14px;top:12px;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:26px;cursor:pointer}.global-ranking-card h2{margin:0 46px 18px 0;font-size:24px}.rank-loading,.rank-empty{padding:28px;text-align:center;color:#aebbd4}.rank-tabs{display:flex;gap:8px;margin-bottom:12px}.rank-tabs button{flex:1;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:#c9d4e8;border-radius:12px;padding:11px;font-weight:900;cursor:pointer}.rank-tabs button.active{background:#fff;color:#121827}.online-rank-summary{background:rgba(87,166,255,.1);border:1px solid rgba(87,166,255,.2);border-radius:14px;padding:12px 14px;margin-bottom:12px;font-weight:900}.rank-table{display:grid;gap:6px}.rank-row{display:grid;grid-template-columns:54px minmax(100px,1.4fr) 1fr .7fr .8fr;gap:8px;align-items:center;padding:11px 10px;border-radius:11px;background:rgba(255,255,255,.055)}.rank-row.head{font-size:12px;color:#8998b5;background:transparent;padding-top:4px;padding-bottom:4px}.rank-row.me{outline:2px solid rgba(255,210,96,.5);background:rgba(255,210,96,.09)}.rank-row b{font-size:18px}.rank-row span{font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-row em,.rank-row i,.rank-row small{font-style:normal;text-align:center}.rank-note{font-size:12px;color:#8795af;margin:12px 2px 0}.enhance-rank-table .rank-row{grid-template-columns:54px minmax(120px,1.5fr) 1fr .7fr}.enhance-rank-table .rank-row small{display:none}
@media(max-width:620px){.online-ranking-btn{padding:8px 10px;font-size:12px}.global-ranking-card{padding:18px 12px}.rank-row{grid-template-columns:42px minmax(86px,1.25fr) .9fr .65fr .72fr;font-size:12px;gap:4px;padding:10px 6px}.rank-row b{font-size:15px}.enhance-rank-table .rank-row{grid-template-columns:42px minmax(100px,1.4fr) .9fr .6fr}}


.rank-period-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:8px 0 12px}.rank-period-tabs button,.fish-rank-kind-tabs button{border:1px solid rgba(80,80,100,.14);border-radius:10px;background:rgba(255,255,255,.72);color:inherit;padding:9px 7px;font-weight:900;cursor:pointer}.rank-period-tabs button.active,.fish-rank-kind-tabs button.active{background:#182338;color:#fff;border-color:#182338}.fish-rank-kind-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:6px 0}.fish-ranking-panel.cleaner-mode{background:linear-gradient(180deg,#effcff,#d9f7f0);color:#153b47}.fish-ranking-panel.cleaner-mode .fish-my-ranking{background:#fff}.fish-ranking-panel.cleaner-mode .fish-ranking-row em{color:#087b70}.fish-ranking-panel.cleaner-mode .fish-ranking-head small{color:#167e87}
@media(max-width:620px){.rank-period-tabs button,.fish-rank-kind-tabs button{min-height:42px;padding:8px 4px;font-size:12px}.fish-ranking-panel{width:min(94vw,390px)!important;right:3vw!important;top:2%!important}.fish-rank-kind-tabs{position:sticky;top:0;z-index:2}}


/* v2319 · Every active game uses the real viewport; no browser-window resizing required. */
body[data-view="game"],
body[data-view="fish-game"],
body[data-view="luck-game"],
body[data-view="online-game"],
body[data-view="dig-game"]{overflow:hidden!important;overscroll-behavior:none}
body[data-view="game"] .app-shell,
body[data-view="fish-game"] .app-shell,
body[data-view="luck-game"] .app-shell,
body[data-view="online-game"] .app-shell,
body[data-view="dig-game"] .app-shell{
  width:100dvw!important;max-width:none!important;
  height:100dvh!important;max-height:100dvh!important;min-height:0!important;
  aspect-ratio:auto!important;margin:0!important;border-radius:0!important;
  overflow:hidden!important;box-sizing:border-box!important;
}
body[data-view="game"] #step4,
body[data-view="fish-game"] #fishGameScreen,
body[data-view="luck-game"] #luckGameScreen,
body[data-view="online-game"] #onlineGameScreen,
body[data-view="dig-game"] #digGameScreen{max-height:100%!important;min-height:0!important;overflow:hidden!important}

/* Online screen gets a deterministic header/content split at every desktop height. */
body[data-view="online-game"] .online-game-screen{display:grid!important;grid-template-rows:auto minmax(0,1fr)!important}
body[data-view="online-game"] .online-topbar{height:clamp(50px,7.4dvh,72px)!important;min-height:50px!important;max-height:72px!important}
body[data-view="online-game"] .online-layout{height:auto!important;min-height:0!important;padding:clamp(4px,1.1dvh,12px)!important;overflow:hidden!important}
body[data-view="online-game"] .online-lobby,
body[data-view="online-game"] .online-match-lobby,
body[data-view="online-game"] .online-arena,
body[data-view="online-game"] .online-game-content{min-height:0!important;overflow:hidden!important}

.online-expand-btn{
  height:38px;padding:0 13px;border-radius:11px;border:1px solid #d7e3ff;
  background:#fff;color:#40558e;font:inherit;font-weight:950;cursor:pointer;
  box-shadow:0 6px 16px rgba(48,73,145,.10);transition:.16s
}
.online-expand-btn:hover{transform:translateY(-1px);background:#f2f6ff}

/* Online expand mode mirrors the existing offline expand control, but fits every arena rather than scaling the page. */
body[data-view="online-game"].online-expanded{overflow:hidden!important}
body[data-view="online-game"].online-expanded .app-shell{
  width:100dvw!important;max-width:none!important;height:100dvh!important;max-height:none!important;
  min-height:0!important;aspect-ratio:auto!important;margin:0!important;padding:0!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden!important
}
body[data-view="online-game"].online-expanded #onlineGameScreen{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  display:block!important;border-radius:0!important;overflow:hidden!important
}
body[data-view="online-game"].online-expanded .online-topbar{
  position:absolute!important;z-index:250!important;inset:0 0 auto 0!important;
  height:0!important;min-height:0!important;max-height:0!important;padding:0!important;
  border:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;overflow:visible!important
}
body[data-view="online-game"].online-expanded .online-title-wrap,
body[data-view="online-game"].online-expanded #onlineRankingBtn,
body[data-view="online-game"].online-expanded .online-net-pill,
body[data-view="online-game"].online-expanded #leaveOnlineBtn{display:none!important}
body[data-view="online-game"].online-expanded .online-top-actions{
  position:fixed!important;z-index:400!important;top:max(6px,env(safe-area-inset-top,0px))!important;
  right:max(6px,env(safe-area-inset-right,0px))!important;display:block!important
}
body[data-view="online-game"].online-expanded .online-expand-btn{
  min-width:74px!important;height:34px!important;padding:0 10px!important;border-radius:10px!important;
  background:rgba(31,45,91,.90)!important;color:#fff!important;border:1px solid rgba(255,255,255,.35)!important;
  box-shadow:0 8px 22px rgba(26,37,91,.25)!important;backdrop-filter:blur(9px)!important;font-size:12px!important
}
body[data-view="online-game"].online-expanded .online-layout{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  padding:max(4px,env(safe-area-inset-top,0px)) max(4px,env(safe-area-inset-right,0px)) max(4px,env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px))!important;
  display:grid!important;overflow:hidden!important
}
body[data-view="online-game"].online-expanded .online-lobby,
body[data-view="online-game"].online-expanded .online-match-lobby,
body[data-view="online-game"].online-expanded .online-arena{height:100%!important;min-height:0!important;overflow:hidden!important}
body[data-view="online-game"].online-expanded .online-arena{gap:4px!important}
body[data-view="online-game"].online-expanded .online-player-strip{
  height:40px!important;flex:0 0 40px!important;border-radius:11px!important;padding-right:76px!important
}
body[data-view="online-game"].online-expanded .strip-player{padding-inline:7px!important;grid-template-columns:28px 1fr!important;column-gap:5px!important}
body[data-view="online-game"].online-expanded .strip-player.guest{grid-template-columns:1fr 28px!important}
body[data-view="online-game"].online-expanded .strip-player>span{width:25px!important;height:25px!important;border-radius:8px!important;font-size:9px!important}
body[data-view="online-game"].online-expanded .strip-player strong{font-size:12px!important}
body[data-view="online-game"].online-expanded .strip-player small{font-size:8px!important}
body[data-view="online-game"].online-expanded .strip-room{padding:0 5px!important}
body[data-view="online-game"].online-expanded .strip-room b{font-size:11px!important}
body[data-view="online-game"].online-expanded .online-game-content{border-radius:14px!important;overflow:hidden!important}
body[data-view="online-game"].online-expanded #site-version-fixed{display:none!important}

/* RPS: scores, both hands and all three choices remain visible. */
body[data-view="online-game"].online-expanded .rps-arena{
  height:100%!important;grid-template-rows:42px minmax(0,1fr) 68px!important;
  gap:4px!important;padding:5px 7px!important;overflow:hidden!important
}
body[data-view="online-game"].online-expanded .rps-scoreboard{gap:8px!important}
body[data-view="online-game"].online-expanded .rps-score{width:70px!important}
body[data-view="online-game"].online-expanded .rps-score strong{font-size:27px!important}
body[data-view="online-game"].online-expanded .rps-round{padding:4px 9px!important;font-size:9px!important}
body[data-view="online-game"].online-expanded .rps-stage{grid-template-columns:1fr minmax(44px,8vw) 1fr!important;min-height:0!important}
body[data-view="online-game"].online-expanded .rps-hand{width:min(25dvh,18dvw,180px)!important;margin-top:3px!important;font-size:min(14dvh,9dvw,118px)!important}
body[data-view="online-game"].online-expanded .rps-hand-label{font-size:9px!important}
body[data-view="online-game"].online-expanded .rps-center b{font-size:clamp(20px,3dvh,32px)!important}
body[data-view="online-game"].online-expanded .rps-center span{font-size:9px!important}
body[data-view="online-game"].online-expanded .rps-choices{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important;width:min(720px,100%)!important;margin:auto!important}
body[data-view="online-game"].online-expanded .rps-choice{width:100%!important;min-width:0!important;height:62px!important;padding:4px!important;border-radius:12px!important}
body[data-view="online-game"].online-expanded .rps-choice span{font-size:26px!important}
body[data-view="online-game"].online-expanded .rps-choice strong{margin-top:1px!important;font-size:10px!important}

/* Yut: board and all controls share the viewport without vertical scrolling. */
body[data-view="online-game"].online-expanded .yut-arena{
  height:100%!important;grid-template-columns:minmax(300px,1.18fr) minmax(250px,.82fr)!important;
  grid-template-rows:minmax(0,1fr)!important;gap:6px!important;padding:5px!important;overflow:hidden!important
}
body[data-view="online-game"].online-expanded .yut-board-wrap{min-height:0!important;overflow:hidden!important}
body[data-view="online-game"].online-expanded .yut-board{
  width:min(calc(100dvh - 58px),55dvw,650px)!important;max-width:100%!important;max-height:100%!important;
  border-radius:24px!important
}
body[data-view="online-game"].online-expanded .yut-side-panel{min-height:0!important;padding:6px!important;gap:4px!important;overflow:hidden!important}
body[data-view="online-game"].online-expanded .turn-banner{min-height:30px!important;margin:0!important;padding:4px 6px!important;font-size:10px!important}
body[data-view="online-game"].online-expanded .yut-sticks{height:min(12dvh,78px)!important;margin:2px 0!important}
body[data-view="online-game"].online-expanded .yut-stick{height:min(10dvh,64px)!important;width:14px!important}
body[data-view="online-game"].online-expanded .yut-result-name{min-height:0!important}
body[data-view="online-game"].online-expanded .yut-result-name strong{font-size:22px!important}
body[data-view="online-game"].online-expanded .yut-result-name small{font-size:9px!important}
body[data-view="online-game"].online-expanded .yut-power-gauge{height:18px!important;margin:3px auto!important}
body[data-view="online-game"].online-expanded .yut-throw-btn{min-height:37px!important;margin:2px auto!important;padding:4px 10px!important;font-size:12px!important}
body[data-view="online-game"].online-expanded .yut-throw-btn small{font-size:8px!important}
body[data-view="online-game"].online-expanded .yut-move-queue{min-height:28px!important;max-height:34px!important;margin:2px auto!important;gap:3px!important;overflow:hidden!important}
body[data-view="online-game"].online-expanded .yut-move-chip{min-width:38px!important;padding:3px 5px!important;font-size:9px!important}
body[data-view="online-game"].online-expanded .yut-benches{min-height:0!important;margin-top:2px!important;gap:3px!important}
body[data-view="online-game"].online-expanded .yut-bench{min-height:0!important;padding:3px 5px!important;overflow:hidden!important}
body[data-view="online-game"].online-expanded .yut-help{display:none!important}

/* Gomoku: derive board size from the available viewport, not browser width alone. */
body[data-view="online-game"].online-expanded .gomoku-stage{height:100%!important;padding:4px!important;gap:4px!important;overflow:hidden!important}
body[data-view="online-game"].online-expanded .gomoku-info{padding:4px 7px!important;border-radius:11px!important;gap:7px!important}
body[data-view="online-game"].online-expanded .gomoku-info strong{font-size:12px!important}
body[data-view="online-game"].online-expanded .gomoku-info small,.online-expanded .gomoku-turn span{font-size:8px!important}
body[data-view="online-game"].online-expanded .gomoku-chip{width:25px!important;height:25px!important}
body[data-view="online-game"].online-expanded .gomoku-turn strong{font-size:14px!important}
body[data-view="online-game"].online-expanded .gomoku-board{
  --board-pad:12px!important;
  width:min(calc(100dvh - 112px),calc(100dvw - 18px),650px)!important;
  height:min(calc(100dvh - 112px),calc(100dvw - 18px),650px)!important;
  max-width:100%!important;max-height:100%!important;border-width:4px!important;border-radius:13px!important
}
body[data-view="online-game"].online-expanded .gomoku-help{display:none!important}

/* Word chain / Kungkungtta: prompt, history and input controls stay on one screen. */
body[data-view="online-game"].online-expanded .word-arena{
  height:100%!important;grid-template-rows:40px minmax(0,1fr) 44px!important;
  gap:5px!important;padding:5px!important;overflow:hidden!important
}
body[data-view="online-game"].online-expanded .word-rule-banner,
body[data-view="online-game"].online-expanded .word-match-banner{min-height:40px!important;height:40px!important;padding:4px 8px!important;border-radius:10px!important}
body[data-view="online-game"].online-expanded .word-match-title small,
body[data-view="online-game"].online-expanded .word-rule-copy{font-size:9px!important}
body[data-view="online-game"].online-expanded .word-match-title b{font-size:17px!important}
body[data-view="online-game"].online-expanded .word-round-step{min-width:38px!important;height:30px!important;padding:2px 4px!important}
body[data-view="online-game"].online-expanded .word-playfield{
  min-height:0!important;grid-template-columns:minmax(150px,.55fr) minmax(260px,1.45fr)!important;
  grid-template-rows:minmax(0,1fr)!important;gap:5px!important
}
body[data-view="online-game"].online-expanded .word-required-card{min-height:0!important;padding:6px!important;border-radius:13px!important;overflow:hidden!important}
body[data-view="online-game"].online-expanded .word-required-letter{width:min(17dvh,105px)!important;margin:4px auto!important;border-radius:20px!important;font-size:min(10dvh,64px)!important;box-shadow:0 4px 0 #17566a!important}
body[data-view="online-game"].online-expanded .word-required-card p{margin:4px 0 0!important;font-size:11px!important;line-height:1.18!important}
body[data-view="online-game"].online-expanded .word-meaning-line{max-height:30px!important;overflow:hidden!important}
body[data-view="online-game"].online-expanded .word-history-panel{min-height:0!important;padding:5px!important;border-radius:12px!important;overflow:hidden!important}
body[data-view="online-game"].online-expanded .word-history-head{padding-bottom:4px!important}
body[data-view="online-game"].online-expanded .word-history-head strong{font-size:12px!important}
body[data-view="online-game"].online-expanded .word-history-head span{font-size:9px!important}
body[data-view="online-game"].online-expanded .word-history-list{padding:4px 1px!important;gap:3px!important;overflow:auto!important}
body[data-view="online-game"].online-expanded .word-chip{min-height:27px!important;padding:3px 6px!important;border-radius:8px!important;font-size:11px!important}
body[data-view="online-game"].online-expanded .word-last-event{min-height:28px!important;padding:3px 5px!important;border-radius:8px!important;font-size:9px!important}
body[data-view="online-game"].online-expanded .word-controls{grid-template-columns:minmax(0,1fr) 72px 72px!important;gap:4px!important;width:100%!important;margin:0!important}
body[data-view="online-game"].online-expanded .word-input{height:40px!important;padding-inline:7px!important;border-radius:10px!important;font-size:15px!important}
body[data-view="online-game"].online-expanded .word-submit-btn,
body[data-view="online-game"].online-expanded .word-giveup-btn{min-width:0!important;min-height:40px!important;padding:0 5px!important;border-radius:10px!important;font-size:10px!important}
body[data-view="online-game"].online-expanded .word-turn-wait{display:none!important}

/* Portrait/narrow screens: use vertical arena layouts but still no page scrolling. */
@media(max-width:760px){
  .online-expand-btn{height:31px;padding:0 8px;font-size:10px}
  body[data-view="online-game"].online-expanded .online-player-strip{padding-right:68px!important}
  body[data-view="online-game"].online-expanded .yut-arena{
    grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(230px,56%) minmax(0,44%)!important;gap:3px!important;padding:3px!important
  }
  body[data-view="online-game"].online-expanded .yut-board{width:min(52dvh,94dvw,360px)!important}
  body[data-view="online-game"].online-expanded .yut-side-panel{
    display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-rows:auto auto auto auto auto!important;align-content:center!important
  }
  body[data-view="online-game"].online-expanded .yut-side-panel>.turn-banner{grid-column:1/3!important}
  body[data-view="online-game"].online-expanded .yut-power-gauge,
  body[data-view="online-game"].online-expanded .yut-throw-btn,
  body[data-view="online-game"].online-expanded .yut-move-queue,
  body[data-view="online-game"].online-expanded .yut-benches{grid-column:1/3!important}
  body[data-view="online-game"].online-expanded .yut-sticks{height:48px!important}
  body[data-view="online-game"].online-expanded .yut-stick{height:42px!important;width:11px!important}
  body[data-view="online-game"].online-expanded .yut-benches{max-height:44px!important;overflow:hidden!important}
  body[data-view="online-game"].online-expanded .word-playfield{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:82px minmax(0,1fr)!important}
  body[data-view="online-game"].online-expanded .word-required-card{display:grid!important;grid-template-columns:62px 1fr!important;grid-template-rows:1fr 1fr!important;text-align:left!important}
  body[data-view="online-game"].online-expanded .word-required-head{grid-column:2!important;grid-row:1!important}
  body[data-view="online-game"].online-expanded .word-required-letter{grid-column:1!important;grid-row:1/3!important;width:54px!important;margin:0 6px 0 0!important;font-size:34px!important}
  body[data-view="online-game"].online-expanded .word-required-card p{grid-column:2!important;margin:1px 0 0!important;font-size:10px!important}
  body[data-view="online-game"].online-expanded .word-controls{grid-template-columns:minmax(0,1fr) 58px 58px!important}
  body[data-view="online-game"].online-expanded .gomoku-board{width:min(calc(100dvh - 112px),calc(100dvw - 10px),500px)!important;height:min(calc(100dvh - 112px),calc(100dvw - 10px),500px)!important}
}

/* Wide but short browser windows: compact the game chrome automatically instead of asking the user to resize. */
@media(min-width:1025px) and (max-height:860px){
  body[data-view="online-game"] .online-topbar{height:52px!important;min-height:52px!important;padding-block:2px!important}
  body[data-view="online-game"] .online-title-icon{width:34px!important;height:34px!important;border-radius:10px!important;font-size:12px!important}
  body[data-view="online-game"] .online-title-wrap h2{font-size:18px!important}
  body[data-view="online-game"] .online-title-wrap small{font-size:9px!important}
  body[data-view="online-game"] .online-net-pill,
  body[data-view="online-game"] .online-leave-btn,
  body[data-view="online-game"] .online-ranking-btn,
  body[data-view="online-game"] .online-expand-btn{height:32px!important;font-size:10px!important;padding-inline:8px!important}
  body[data-view="online-game"] .online-arena{gap:5px!important}
  body[data-view="online-game"] .online-player-strip{height:42px!important;flex-basis:42px!important}
  body[data-view="online-game"] .rps-arena{padding:8px 3%!important}
  body[data-view="online-game"] .rps-hand{width:min(22dvh,145px)!important;font-size:min(12dvh,90px)!important}
  body[data-view="online-game"] .yut-arena{padding:7px!important;gap:8px!important}
  body[data-view="online-game"] .yut-board{width:min(68dvh,48dvw,520px)!important}
  body[data-view="online-game"] .word-arena{padding:8px!important;gap:6px!important}
  body[data-view="online-game"] .word-required-letter{width:min(17dvh,125px)!important;font-size:min(10dvh,76px)!important;margin:5px auto!important}
  body[data-view="online-game"] .word-input{height:45px!important}
  body[data-view="online-game"] .gomoku-board{width:min(calc(100dvh - 205px),calc(100dvw - 40px),520px)!important;height:min(calc(100dvh - 205px),calc(100dvw - 40px),520px)!important}

  body[data-view="luck-game"] .luck-topbar{height:54px!important;min-height:54px!important}
  body[data-view="luck-game"] .luck-stage{height:calc(100dvh - 54px)!important;min-height:0!important;padding:7px!important;gap:7px!important}
  body[data-view="luck-game"] .luck-game-content{padding:6px 8px!important;overflow:hidden!important}
  body[data-view="game"] .game-titlebar{min-height:52px!important;padding-block:4px!important}
  body[data-view="game"] .playfield{height:calc(100dvh - 52px)!important;min-height:0!important}
}

body[data-view="setup"] .hero.setup-only:not(.hidden){display:flex!important}
body[data-view="setup"] .stepper.setup-only:not(.hidden){
  display:grid!important;
  width:100%!important;
  max-width:100%!important;
}
body[data-boot-kind="ladder"][data-view="setup"] .app-shell{
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
body[data-view="setup"] #step1:not(.hidden),
body[data-view="setup"] #step2:not(.hidden),
body[data-view="setup"] #step3:not(.hidden){display:block!important}
body[data-page-kind="game"] #backToHubFromSetupBtn,
body[data-page-kind="game"] .luck-back-btn,
body[data-page-kind="game"] #leaveOnlineBtn{transition:opacity .2s}



/* draw page layout + in-card icon size */
body[data-boot-game="draw"] .luck-side{display:none!important}
body[data-boot-game="draw"] .luck-stage{
  display:grid!important;grid-template-columns:1fr!important;
  height:calc(100dvh - 54px)!important;padding:10px!important
}
body[data-boot-game="draw"] .luck-main,
body[data-boot-game="draw"] #luckGameContent,
body[data-boot-game="draw"] .draw-shell{height:100%!important;min-height:0!important}
body[data-boot-game="draw"] .draw-cover b,
body[data-boot-game="draw"] .draw-cover b.draw-cover-number{
  font-size:clamp(20px,3.2vw,42px)!important;line-height:1!important
}
body[data-boot-game="draw"] .draw-reveal b{
  font-size:clamp(22px,4.2vw,46px)!important;line-height:1!important
}
body[data-boot-game="draw"] .draw-reveal small{font-size:11px!important}
body[data-boot-game="draw"] .draw-board.count-2 .draw-cover b,
body[data-boot-game="draw"] .draw-board.count-2 .draw-cover b.draw-cover-number{
  font-size:clamp(56px,9vw,96px)!important
}
body[data-boot-game="draw"] .draw-board.count-2 .draw-reveal b{
  font-size:clamp(64px,11vw,110px)!important
}

/* online-onescreen-v1720 */
html:has(body[data-view="online-game"]),
body[data-view="online-game"]{
  width:100%!important;height:100%!important;max-height:100dvh!important;
  overflow:hidden!important;margin:0!important;
}
body[data-view="online-game"] .app-shell{
  width:100vw!important;max-width:none!important;
  height:100dvh!important;max-height:100dvh!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
  overflow:hidden!important;
}
body[data-view="online-game"] #onlineGameScreen{
  position:absolute!important;inset:0!important;
  width:100%!important;height:100%!important;overflow:hidden!important;
}
body[data-view="online-game"] .online-topbar{
  height:52px!important;min-height:52px!important;max-height:52px!important;
  padding:0 12px!important;
}
body[data-view="online-game"] .online-layout{
  height:calc(100dvh - 52px)!important;min-height:0!important;
  padding:8px!important;overflow:hidden!important;
}
body[data-view="online-game"] .online-lobby,
body[data-view="online-game"] .online-match-lobby,
body[data-view="online-game"] .online-arena{
  height:100%!important;min-height:0!important;overflow:hidden!important;
}
body[data-view="online-game"] .online-lobby{
  grid-template-columns:1fr 1fr!important;gap:12px!important;padding:8px 12px!important;
  align-items:stretch!important;
}
body[data-view="online-game"] .online-lobby-copy h3{font-size:clamp(22px,4vw,34px)!important;line-height:1.15!important}
body[data-view="online-game"] .online-lobby-copy p{display:-webkit-box!important;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden!important;max-height:3em!important}
body[data-view="online-game"] .online-room-card{min-height:0!important;padding:12px!important}
body[data-view="online-game"] .versus-ready-grid{transform:none!important;width:100%!important}
body[data-view="online-game"] .yut-arena{
  grid-template-columns:minmax(0,1.15fr) minmax(240px,.7fr)!important;
  gap:10px!important;padding:8px!important;height:100%!important;
}
body[data-view="online-game"] .yut-board{
  width:min(100%,calc(100dvh - 140px),560px)!important;
  height:auto!important;
}
body[data-view="online-game"] .rps-stage{
  height:100%!important;grid-template-columns:1fr auto 1fr!important;
  align-items:center!important;gap:8px!important;padding:8px!important;
}
body[data-view="online-game"] .rps-choice{min-width:0!important;width:min(31%,120px)!important}
body[data-view="online-game"] .gomoku-board{
  width:min(calc(100dvh - 160px),calc(100vw - 48px),520px)!important;
  height:min(calc(100dvh - 160px),calc(100vw - 48px),520px)!important;
}
body[data-view="online-game"] .word-arena,
body[data-view="online-game"] .kung-arena,
body[data-view="online-game"] .online-word-wrap{
  height:100%!important;overflow:hidden!important;
}
@media(max-width:900px){
  body[data-view="online-game"] .online-lobby{grid-template-columns:1fr!important;overflow:auto!important}
  body[data-view="online-game"] .online-lobby-copy h3{font-size:28px!important}
  body[data-view="online-game"] .yut-arena{
    grid-template-columns:1fr!important;
    grid-template-rows:minmax(0,1fr) auto!important;
  }
  body[data-view="online-game"] .yut-board{width:min(58dvh,92vw)!important}
  body[data-view="online-game"] .yut-side-panel{
    display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important;
  }
  body[data-view="online-game"] .rps-stage{grid-template-columns:1fr 48px 1fr!important}
}


/* word-giveup-fix-v1732 */
html body.mobile-game-fit[data-view="online-game"] .word-controls,
html body[data-view="online-game"] .word-controls,
html body[data-boot-game="wordchain"] .word-controls,
html body[data-boot-game="kung"] .word-controls{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 86px 108px !important;
  grid-template-rows:auto !important;
  gap:8px !important;
}
html body.mobile-game-fit[data-view="online-game"] .word-giveup-btn,
html body[data-view="online-game"] .word-giveup-btn,
html body[data-boot-game="wordchain"] .word-giveup-btn,
html body[data-boot-game="kung"] .word-giveup-btn{
  grid-column:3 !important;
  grid-row:1 !important;
  width:108px !important;
  max-width:108px !important;
  height:52px !important;
  min-height:52px !important;
  max-height:52px !important;
  background:#ef4d63 !important;
  color:#fff !important;
  border:0 !important;
  border-radius:14px !important;
}
html body[data-view="online-game"] .word-submit-btn{
  grid-column:2 !important;
  grid-row:1 !important;
  height:52px !important;
  min-height:52px !important;
  max-height:52px !important;
}
html body[data-view="online-game"] .word-input{
  grid-column:1 !important;
  grid-row:1 !important;
}

/* arena-guest-right-v1736 */
body[data-view="online-game"] .online-player-strip{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  align-items:center!important;
  column-gap:8px!important;
}
body[data-view="online-game"] .strip-player.host{grid-column:1!important;justify-self:stretch!important}
body[data-view="online-game"] .strip-room{grid-column:2!important;justify-self:center!important}
body[data-view="online-game"] .online-idle-clock{
  position:absolute!important;left:50%!important;transform:translate(-50%,-50%)!important;
  top:100%!important;grid-column:auto!important;
}
body[data-view="online-game"] .online-idle-clock.hidden{display:none!important}
body[data-view="online-game"] .strip-player.guest{
  grid-column:3!important;
  justify-self:stretch!important;
  text-align:right!important;
}

/* titlebar-readability-v1752 */
body[data-view="game"] .game-titlebar,
body[data-view="setup"] .game-titlebar{
  min-height:58px!important;
}
body[data-view="game"] .game-title-group h2,
body[data-view="setup"] .game-title-group h2{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-size:clamp(22px,2.4vw,34px)!important;
  font-weight:1000!important;
  letter-spacing:-.02em!important;
  line-height:1.2!important;
  text-shadow:0 1px 2px rgba(20,40,90,.35)!important;
  white-space:nowrap!important;
}
body[data-view="game"] .game-status,
body[data-view="setup"] .game-status{
  color:#fff!important;
  background:rgba(255,255,255,.22)!important;
  border:1px solid rgba(255,255,255,.35)!important;
  font-weight:1000!important;
  letter-spacing:.04em!important;
}
body[data-view="game"] .title-btn,
body[data-view="setup"] .title-btn{
  color:#2b3f86!important;
  background:#fff!important;
  border:1px solid rgba(255,255,255,.7)!important;
  font-weight:1000!important;
  font-size:14px!important;
}
body[data-view="luck-game"] .luck-topbar{
  min-height:58px!important;
  height:58px!important;
  background:#10182b!important;
}
body[data-view="luck-game"] .luck-title small{
  color:#c9d7ff!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.12em!important;
}
body[data-view="luck-game"] .luck-title h2{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-size:clamp(22px,2.3vw,32px)!important;
  font-weight:1000!important;
  letter-spacing:-.02em!important;
  text-shadow:0 1px 2px rgba(0,0,0,.4)!important;
}
body[data-view="luck-game"] .luck-back-btn,
body[data-view="luck-game"] .luck-expand-btn{
  color:#1d2d5c!important;
  background:#fff!important;
  border:1px solid #fff!important;
  font-weight:1000!important;
}

body:not([data-view="hub"]) #site-version-fixed{display:none!important}

/* ladder-title-btn-ink-v1938 */
body[data-view="game"] .game-titlebar .title-btn,
body[data-view="game"] .title-actions .title-btn,
body[data-view="game"] #backToHubFromGameBtn,
body[data-view="game"] #soundToggleBtn,
body[data-view="game"] #loadSettingsInGameBtn,
body[data-view="game"] #newGameInGameBtn{
  background:#fff !important;
  color:#1a2c68 !important;
  -webkit-text-fill-color:#1a2c68 !important;
  border:0 !important;
  text-shadow:none !important;
  opacity:1 !important;
}
body[data-view="game"] .game-titlebar .title-btn *,
body[data-view="game"] .title-actions .title-btn *{
  color:#1a2c68 !important;
  -webkit-text-fill-color:#1a2c68 !important;
}

/* luck-expand-ink-v1940 */
body[data-view="luck-game"] .luck-topbar .luck-expand-btn,
body[data-view="luck-game"] .luck-topbar .luck-back-btn,
body[data-view="luck-game"] #luckExpandBtn,
body[data-view="luck-game"] #backToHubFromLuckBtn{
  background:#fff !important;
  color:#1a2c68 !important;
  -webkit-text-fill-color:#1a2c68 !important;
  border:1px solid #fff !important;
  text-shadow:none !important;
  opacity:1 !important;
}
body[data-view="luck-game"].luck-expanded #luckExpandBtn,
body[data-view="luck-game"].luck-expanded .luck-expand-btn{
  background:#1b2b55 !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  border:1px solid #1b2b55 !important;
  box-shadow:0 8px 18px rgba(16,30,70,.22) !important;
}

/* game-title-art-v1950 */

.luck-title-icon,.online-title-icon,.title-mascot,.dig-title-icon,.fish-page-title>span{
  overflow:hidden!important;padding:0!important;
}
.luck-title-icon img,.online-title-icon img,.title-mascot img,.dig-title-icon img,.fish-page-title>span img{
  width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;border-radius:inherit!important;
}


/* Hub tile stability patch · v20260830_1945 */
body[data-view="hub"] #offlineLibrary.home-game-grid .game-tile,
body[data-view="hub"] #onlineLibrary.home-game-grid .game-tile,
#hubScreen.arcade-home #offlineLibrary.home-game-grid .game-tile,
#hubScreen.arcade-home #onlineLibrary.home-game-grid .game-tile{
  align-content:start!important;
}
body[data-view="hub"] #offlineLibrary.home-game-grid .tile-copy,
body[data-view="hub"] #onlineLibrary.home-game-grid .tile-copy,
#hubScreen.arcade-home #offlineLibrary.home-game-grid .tile-copy,
#hubScreen.arcade-home #onlineLibrary.home-game-grid .tile-copy{
  display:grid!important;
  visibility:visible!important;
  opacity:1!important;
  min-height:54px!important;
}
body[data-view="hub"] #offlineLibrary.home-game-grid .tile-copy strong,
body[data-view="hub"] #onlineLibrary.home-game-grid .tile-copy strong,
#hubScreen.arcade-home #offlineLibrary.home-game-grid .tile-copy strong,
#hubScreen.arcade-home #onlineLibrary.home-game-grid .tile-copy strong{
  overflow:visible!important;
}
@media (max-width:860px){
  body[data-view="hub"] #offlineLibrary.home-game-grid,
  body[data-view="hub"] #onlineLibrary.home-game-grid,
  #hubScreen.arcade-home #offlineLibrary.home-game-grid,
  #hubScreen.arcade-home #onlineLibrary.home-game-grid{gap:12px!important}
  body[data-view="hub"] #offlineLibrary.home-game-grid .game-tile,
  body[data-view="hub"] #onlineLibrary.home-game-grid .game-tile,
  #hubScreen.arcade-home #offlineLibrary.home-game-grid .game-tile,
  #hubScreen.arcade-home #onlineLibrary.home-game-grid .game-tile{
    min-height:226px!important;
    grid-template-rows:auto minmax(92px,auto) auto!important;
    padding:10px!important;
  }
  body[data-view="hub"] #offlineLibrary.home-game-grid .tile-visual,
  body[data-view="hub"] #onlineLibrary.home-game-grid .tile-visual,
  #hubScreen.arcade-home #offlineLibrary.home-game-grid .tile-visual,
  #hubScreen.arcade-home #onlineLibrary.home-game-grid .tile-visual{min-height:92px!important}
}
@media (max-width:430px){
  body[data-view="hub"] #offlineLibrary.home-game-grid .game-tile,
  body[data-view="hub"] #onlineLibrary.home-game-grid .game-tile,
  #hubScreen.arcade-home #offlineLibrary.home-game-grid .game-tile,
  #hubScreen.arcade-home #onlineLibrary.home-game-grid .game-tile{
    min-height:234px!important;
    grid-template-rows:auto minmax(100px,auto) auto!important;
  }
  body[data-view="hub"] #offlineLibrary.home-game-grid .tile-copy,
  body[data-view="hub"] #onlineLibrary.home-game-grid .tile-copy,
  #hubScreen.arcade-home #offlineLibrary.home-game-grid .tile-copy,
  #hubScreen.arcade-home #onlineLibrary.home-game-grid .tile-copy{min-height:62px!important}
}