:root {
  --bg: #0a0d18;
  --panel: rgba(20, 24, 40, 0.92);
  --panel-2: rgba(30, 36, 58, 0.96);
  --line: rgba(255,255,255,0.10);
  --text: #f4f2ff;
  --muted: #b8b2cf;
  --gold: #f5c86b;
  --rose: #ff7a9e;
  --accent: #9fb3ff;
  --shadow: 0 18px 44px rgba(0,0,0,0.35);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: radial-gradient(circle at top, #1b1630, var(--bg) 55%); color: var(--text); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
/* selection / drag suppression inside game UI */
.game-shell, .game-shell *, .game-embed, .game-embed *, .reward-viewer, .reward-viewer * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.game-shell img, .game-embed img, .reward-viewer img {
  -webkit-user-drag: none;
  user-drag: none;
}

.page-shell { min-height: 100vh; padding: 22px; }
.page-wrap { width: min(980px, 100%); margin: 0 auto; display: grid; gap: 18px; }
.panel { background: linear-gradient(180deg, rgba(28,33,55,.96), rgba(16,18,33,.95)); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); padding: 24px; }
.panel.compact { padding: 14px 16px; }
.eyebrow { margin: 0 0 8px; color: var(--gold); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 700; }
h1,h2,h3,p,ul { margin-top: 0; }
.hero { display: grid; gap: 14px; }
.hero h1 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 0; }
.lead { color: var(--muted); line-height: 1.8; font-size: 16px; max-width: 860px; }
.notice { color: #eadfff; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 14px 16px; line-height: 1.7; }
.hero-actions, .header-buttons, .modal-actions, .reward-head { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.button { border: 0; cursor: pointer; border-radius: 999px; padding: 12px 18px; font-weight: 700; transition: .2s ease; display:inline-flex; align-items:center; justify-content:center; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: linear-gradient(180deg, #ffd27d, #e7a93c); color: #2f1a00; }
.button.ghost { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid rgba(255,255,255,.1); }
.button.small { padding: 9px 13px; font-size: 13px; }
.rules { display:grid; grid-template-columns: 1.3fr .7fr; gap: 20px; align-items:center; }
.rules ul { color: var(--muted); line-height: 1.9; padding-left: 1.2em; }
.rule-card-preview { justify-self:center; width:min(240px,100%); }
.rule-card-preview img { border-radius: 24px; border:1px solid var(--line); box-shadow: var(--shadow); }
.game-embed iframe { width:100%; min-height: 0; height: 980px; border:0; border-radius: 20px; background:#090b12; overflow:hidden; display:block; }
.embed-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom: 16px; }

.game-shell { padding: 6px; overflow: hidden; }
.game-app { width: min(1120px, 100%); margin: 0 auto; display:grid; gap: 10px; overflow-anchor: none; }
.game-header { display:flex; justify-content:space-between; align-items:center; gap: 10px; }
.game-header h1 { font-size: clamp(17px, 2vw, 20px); margin:0; }
.hud { display:grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.stat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 8px 10px; }
.stat span { display:block; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.stat strong { font-size: 15px; }
.hearts-display { display:flex; gap: 4px; flex-wrap: wrap; min-height: 22px; align-items:center; font-size: 18px; line-height: 1; }
.hearts-display .empty-heart { opacity:.26; }
.board-and-log { display:grid; grid-template-columns: minmax(0, 1fr) 185px; gap: 10px; align-items:start; overflow-anchor: none; }
.board.panel, .side.panel { padding: 12px; }
.grid-board { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.card {
  position: relative; aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.10);
  background: #111422; box-shadow: 0 10px 20px rgba(0,0,0,.28); cursor:pointer; transition: transform .18s ease, box-shadow .18s ease; padding: 0;
}
.card:hover { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(0,0,0,.32); }
.card.disabled { cursor: default; }
.card-back-image, .card-front-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.card-failed-hint { position:absolute; inset:auto 8px 8px 8px; display:flex; justify-content:flex-end; pointer-events:none; z-index:3; }
.card.facedown .card-failed-hint .badge { font-size: 12px; padding: 6px 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(8,10,18,.82); box-shadow: 0 10px 20px rgba(0,0,0,.35); text-shadow: 0 1px 10px rgba(0,0,0,.95); backdrop-filter: blur(4px); }
.card.facedown .card-failed-hint .badge.lv2 { color:#d7d0ff; }
.card.facedown .card-failed-hint .badge.lv3 { color:#ffd2f0; }
.card.facedown .card-failed-hint .badge.boss { color:#ffd0d0; }
.card-front-wrap { position:relative; width:100%; height:100%; }
.card .dim { position:absolute; inset:0; background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,.72) 100%); }
.card .meta { position:absolute; left:7px; right:7px; bottom:7px; display:grid; gap:4px; z-index:2; justify-items:start; }
.card .meta strong { font-size: 12px; color:#fff; text-shadow: 0 1px 0 rgba(0,0,0,.98), 0 0 8px rgba(0,0,0,.95), 0 0 18px rgba(0,0,0,.88), -1px 0 0 rgba(0,0,0,.88), 1px 0 0 rgba(0,0,0,.88), 0 -1px 0 rgba(0,0,0,.88), 0 1px 0 rgba(0,0,0,.88); background: rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 4px 6px; line-height:1.3; display:inline-block; }
.card.resolved .meta .badge, .card.resolved .status-chip { color:#fff; text-shadow: 0 1px 0 rgba(0,0,0,.98), 0 0 8px rgba(0,0,0,.95), -1px 0 0 rgba(0,0,0,.88), 1px 0 0 rgba(0,0,0,.88), 0 -1px 0 rgba(0,0,0,.88), 0 1px 0 rgba(0,0,0,.88); background: rgba(0,0,0,.58); border-color: rgba(255,255,255,.12); }
.badge { display:inline-flex; align-items:center; justify-content:center; width:max-content; padding:4px 8px; border-radius:999px; font-size:10px; font-weight:700; letter-spacing:.02em; }
.badge.lv1 { background: rgba(128, 209, 255, 0.16); color:#bfeaff; }
.badge.lv2 { background: rgba(155, 142, 255, 0.18); color:#d7d0ff; }
.badge.lv3 { background: rgba(255, 136, 206, 0.18); color:#ffd2f0; }
.badge.boss { background: rgba(255, 91, 91, 0.18); color:#ffd0d0; }
.badge.heart, .badge.💖 { background: rgba(255, 138, 165, 0.18); color:#ffd8e3; }
.card .status-chip { position:absolute; right:7px; top:7px; background: rgba(10,10,18,.88); color:#fff; border:1px solid rgba(255,255,255,.10); border-radius:999px; padding:4px 7px; font-size:10px; font-weight:700; z-index:2; text-shadow: 0 1px 6px rgba(0,0,0,.95); }
.side h2 { margin-bottom: 8px; font-size: 14px; }
.log-box { height: 220px; min-height: 220px; max-height: 220px; overflow:auto; display:grid; gap:7px; overflow-anchor: none; }
.log-entry { background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 9px 10px; line-height:1.5; color: var(--muted); font-size: 12px; }
.log-entry strong { color: var(--text); display:block; margin-bottom:2px; font-size:12px; }
.overlay { position: fixed; inset:0; background: rgba(6, 7, 14, 0.78); display:flex; align-items:center; justify-content:center; padding: 18px; z-index: 50; }
.overlay.hidden { display:none; }
.modal { width:min(640px, 100%); display:grid; gap: 14px; align-items:start; }
.modal.modal-image-only { width:min(500px, 100%); }
.modal.modal-text-only { width:min(560px, 100%); }
.modal-image { width:100%; border-radius:18px; border:1px solid rgba(255,255,255,.08); }
.modal-copy h2 { font-size: clamp(22px, 3vw, 30px); margin-bottom: 12px; }
.modal-copy p { color: var(--muted); line-height:1.8; }
.modal.modal-image-only .modal-copy { display:none; }
.modal.modal-text-only .modal-image { display:none; }
.modal.modal-text-only .modal-copy { display:block; }
.modal.modal-text-only .modal-actions { justify-content:flex-start; }
.modal-actions:empty { display:none; }
.modal-copy .eyebrow, .modal-copy h2, .modal-copy p { color:#fff; text-shadow: 0 1px 0 rgba(0,0,0,.98), 0 0 8px rgba(0,0,0,.95), -1px 0 0 rgba(0,0,0,.88), 1px 0 0 rgba(0,0,0,.88), 0 -1px 0 rgba(0,0,0,.88), 0 1px 0 rgba(0,0,0,.88); }
.modal-copy .eyebrow { background: rgba(0,0,0,.5); display:inline-flex; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); }
.modal-copy p { background: rgba(0,0,0,.44); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:12px 14px; }
.reward-page { display:grid; gap: 22px; width:min(1200px, 100%); margin:0 auto; }
.reward-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.reward-card { margin:0; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 20px; overflow:hidden; }
.reward-card img { width:100%; height:auto; display:block; }
.reward-card figcaption { display:grid; gap: 8px; padding: 14px; }
.reward-link { display:block; }
.reward-link:hover img { filter: brightness(1.05); }
.reward-locked { width:min(680px, 100%); margin: 6vh auto 0; text-align:center; }

.reward-viewer { position: fixed; inset: 0; background: rgba(5,7,14,0.86); display:none; align-items:center; justify-content:center; padding: 20px; z-index: 80; cursor: zoom-out; }
.reward-viewer.active { display:flex; }
.reward-viewer img { max-width: min(92vw, 1280px); max-height: 92vh; width: auto; height: auto; border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.08); cursor: zoom-out; }
.reward-viewer-hint { position:absolute; top: 18px; right: 20px; color: rgba(255,255,255,.78); font-size: 13px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.10); padding: 8px 12px; border-radius: 999px; pointer-events:none; }

@media (max-width: 1040px) {
  .board-and-log { grid-template-columns: 1fr; }
  .side { order: 2; }
  .hud { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .log-box { height: 220px; min-height: 220px; max-height: 220px; }
}
@media (max-width: 860px) {
  .rules { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .page-shell, .game-shell { padding: 12px; }
  .panel { padding: 18px; border-radius: 20px; }
  .hud { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-board { gap: 8px; }
  .card .meta strong { font-size: 12px; }
  .card .status-chip { font-size: 10px; padding: 4px 7px; }
  .game-embed iframe { height: 1980px; }
}




/* v10 tweaks */
.board-and-log { display:block; }
.board-shell { width:min(1120px, 100%); margin:0 auto; padding: 12px; }
.grid-board-wide { width:100%; margin:0 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.grid-board-wide .card { min-height: unset; width: 100%; aspect-ratio: 2 / 3; }
.compact-hud { width:min(1120px, 100%); margin:0 auto; }
.compact-hud .stat span { white-space: nowrap; }
.game-embed iframe { height: 980px; min-height: 0; }
.host-overlay { z-index: 120; }
.host-overlay .modal { width:min(640px, calc(100vw - 28px)); }
.host-overlay .modal.modal-image-only { width:min(520px, calc(100vw - 28px)); }
.host-overlay .modal.modal-text-only { width:min(620px, calc(100vw - 28px)); }
.host-overlay .modal-copy .eyebrow, .host-overlay .modal-copy h2, .host-overlay .modal-copy p { color:#fff; text-shadow: 0 1px 0 rgba(0,0,0,.98), 0 0 8px rgba(0,0,0,.95), -1px 0 0 rgba(0,0,0,.88), 1px 0 0 rgba(0,0,0,.88), 0 -1px 0 rgba(0,0,0,.88), 0 1px 0 rgba(0,0,0,.88); }
.host-overlay .modal-copy .eyebrow { background: rgba(0,0,0,.5); display:inline-flex; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); }
.host-overlay .modal-copy p { background: rgba(0,0,0,.44); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:12px 14px; }
@media (max-width: 1040px) {
  .game-app { width: 100%; }
  .grid-board-wide { gap: 10px; }
  .game-embed iframe { height: 940px; min-height: 0; }
}
@media (max-width: 640px) {
  .grid-board-wide { gap: 8px; }
  .game-embed iframe { height: 900px; min-height: 0; }
  .hearts-display { font-size: 16px; gap: 3px; }
}


/* v12 tweaks: full-page compact layout */
.play-page .game-app {
  width: min(520px, calc(100vw - 18px));
  gap: 8px;
}
.play-page .game-header {
  gap: 8px;
}
.play-page .game-header h1 {
  font-size: 18px;
}
.play-page .header-buttons {
  gap: 8px;
}
.play-page .button.small {
  padding: 8px 12px;
  font-size: 12px;
}
.play-page .compact-hud {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.play-page .compact-hud .stat {
  padding: 7px 8px;
  border-radius: 12px;
}
.play-page .compact-hud .stat span {
  font-size: 10px;
  margin-bottom: 5px;
}
.play-page .compact-hud .stat strong {
  font-size: 13px;
}
.play-page .hearts-display {
  font-size: 15px;
  gap: 2px;
  min-height: 18px;
}
.play-page .board-shell {
  width: 100%;
  padding: 8px;
  border-radius: 20px;
}
.play-page .grid-board-wide {
  gap: 8px;
}
.play-page .grid-board-wide .card {
  border-radius: 12px;
}
.play-page .card .meta {
  left: 6px;
  right: 6px;
  bottom: 6px;
}
.play-page .card .meta strong {
  font-size: 11px;
  padding: 3px 5px;
  border-radius: 8px;
}
.play-page .card .status-chip {
  right: 6px;
  top: 6px;
  font-size: 9px;
  padding: 3px 6px;
}
.play-page .badge {
  padding: 3px 7px;
  font-size: 9px;
}

@media (max-width: 640px) {
  .play-page .game-app {
    width: min(520px, calc(100vw - 12px));
    gap: 7px;
  }
  .play-page .compact-hud {
    gap: 5px;
  }
  .play-page .compact-hud .stat {
    padding: 6px 7px;
  }
  .play-page .compact-hud .stat span {
    font-size: 9px;
  }
  .play-page .compact-hud .stat strong {
    font-size: 12px;
  }
  .play-page .hearts-display {
    font-size: 14px;
  }
  .play-page .grid-board-wide {
    gap: 6px;
  }
}


/* v13 tweaks */
.game-embed { width:min(720px, 100%); margin:0 auto; }
.game-embed iframe { height: 760px; }
.play-page .game-app { width:min(494px, calc(100vw - 18px)); }
.play-page .compact-hud { gap: 5px; }
.play-page .compact-hud .stat { padding: 6px 7px; }
.play-page .compact-hud .stat span { font-size: 9px; margin-bottom: 4px; }
.play-page .compact-hud .stat strong { font-size: 12px; }
.play-page .hearts-display { font-size: 14px; gap: 2px; }
.play-page .board-shell { padding: 7px; }
.play-page .grid-board-wide { gap: 7px; }
.play-page .grid-board-wide .card { border-radius: 11px; }
@media (max-width: 640px) {
  .game-embed { width:min(560px, 100%); }
  .game-embed iframe { height: 720px; }
  .play-page .game-app { width:min(470px, calc(100vw - 12px)); }
  .play-page .grid-board-wide { gap: 6px; }
}


/* v14 tweaks */
.game-embed { width: 100%; margin: 0 auto; }
.game-embed iframe { width: 100%; height: 820px; min-height: 0; display: block; }

.game-shell { padding: 4px; }
.embedded-play .game-app { width: min(494px, calc(100vw - 18px)); }
.embedded-play .board-shell { padding: 7px; }
.embedded-play .compact-hud { width: 100%; }

.play-page .game-app { width:min(480px, calc(100vw - 18px)); }
.play-page .grid-board-wide { gap: 6px; }
.play-page .board-shell { padding: 6px; }
.play-page .compact-hud { gap: 5px; }
.play-page .compact-hud .stat { padding: 6px 7px; }
.play-page .compact-hud .stat strong { font-size: 12px; }
.play-page .card .meta strong { font-size: 10px; line-height: 1.2; }
.play-page .badge { font-size: 9px; padding: 3px 6px; }

.overlay { padding: 12px; overflow: auto; }
.modal { width:min(420px, calc(100vw - 24px)); margin:auto; }
.modal.modal-image-only { width:min(360px, calc(100vw - 24px)); }
.modal.modal-text-only { width:min(420px, calc(100vw - 24px)); }
.modal-copy h2 { font-size: clamp(18px, 2.6vw, 24px); }
.modal-copy p { font-size: 14px; line-height: 1.65; }
.modal-actions { flex-direction: column; align-items: stretch; }
.modal-actions .button { width: 100%; }

.host-overlay .modal { width:min(420px, calc(100vw - 24px)); margin:auto; }
.host-overlay .modal.modal-image-only { width:min(360px, calc(100vw - 24px)); }
.host-overlay .modal.modal-text-only { width:min(420px, calc(100vw - 24px)); }
.host-overlay .modal-actions { flex-direction: column; align-items: stretch; }
.host-overlay .modal-actions .button { width: 100%; }

@media (max-width: 640px) {
  .game-embed iframe { height: 760px; }
  .play-page .game-app { width:min(466px, calc(100vw - 12px)); }
}