:root{
  --bg:#040712;
  --bg-2:#0d1530;
  --panel:#111b37;
  --panel-2:#091125;
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);
  --text:#eef2ff;
  --muted:#aab5df;
  --accent:#f4bf54;
  --accent-2:#ef6bb3;
  --ok:#82e0ff;
  --danger:#ff7d87;
  --success:#8ee1a0;
  --shadow:0 18px 48px rgba(0,0,0,.28);
  --cell-size:54px;
  --cell-gap:6px;
  --progress-label-size:14px;
  --progress-meta-size:13px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Hiragino Sans","Yu Gothic",system-ui,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top, rgba(56,82,150,.28), transparent 40%),
    linear-gradient(180deg, rgba(6,10,24,.96), rgba(4,7,18,1)),
    var(--bg);
  background-attachment:fixed;
  user-select:none;
  -webkit-user-select:none;
}
img{max-width:100%;display:block;pointer-events:none;-webkit-user-drag:none}
button,a{touch-action:manipulation}
a{color:inherit}
.hidden{display:none !important}
.page-shell{
  min-height:100vh;
  background:linear-gradient(180deg, #040712, #0a1229 60%, #06101f);
}
.page-wrap,.reward-wrap{
  width:min(1120px, calc(100vw - 28px));
  margin:0 auto;
  padding:22px 0 40px;
  display:grid;
  gap:22px;
}
.panel{
  background:linear-gradient(180deg, rgba(18,28,58,.96), rgba(9,15,35,.98));
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
}
.inset-panel{
  border-radius:24px;
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}
.hero{padding:26px}
.eyebrow,.modal-eyebrow{
  color:#ffc85a;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  margin:0 0 12px;
}
.hero h1{margin:0 0 10px;font-size:clamp(34px,5vw,52px)}
.hero .lead,.game-subtitle{
  margin:0;
  line-height:1.9;
  color:#dce5ff;
  font-size:16px;
}
.hero-actions,.toolbar{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}
.button{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:#fff;
  min-height:46px;
  padding:10px 18px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .15s ease, opacity .15s ease, background .15s ease;
}
.button:hover{transform:translateY(-1px);opacity:.96}
.button.primary{background:linear-gradient(180deg,#f6c15a,#dfa23d);color:#161208}
.button.ghost{background:rgba(255,255,255,.04)}
.button.small{min-height:38px;padding:8px 14px;font-size:13px}
.notice{
  margin-top:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.03);
  padding:16px 18px;
  color:#d8def7;
  line-height:1.8;
}
.rules{
  padding:22px;
  display:grid;
  gap:20px;
  grid-template-columns:1.4fr .9fr;
  align-items:center;
}
.rules h2,.embed-head h2,.panel-head h2{margin:0 0 12px}
.rules ul{margin:0;padding-left:1.2em;line-height:1.9;color:#dce5ff}
.rule-card-preview{justify-self:center;width:min(320px,100%)}
.rule-card-preview img{border-radius:22px;border:1px solid var(--line);aspect-ratio:1/1;object-fit:cover;object-position:center 18%; box-shadow:0 18px 36px rgba(0,0,0,.26)}
.game-embed{padding:22px}

.embed-stage{
  position:relative;
  width:100%;
}

.embed-head,.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
#gameFrame{
  width:100%;
  border:0;
  border-radius:22px;
  background:#040814;
  min-height:980px;
  display:block;
}
.play-page{background:linear-gradient(180deg,#040712,#0a1229 60%,#06101f)}
.play-page::before,.play-page::after,.page-shell::before,.page-shell::after{content:none !important}
.play-wrap{
  width:min(1100px, calc(100vw - 20px));
  margin:0 auto;
  padding:12px 0 18px;
}
.game-shell{padding:18px}
.game-topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:18px;
}
.game-topbar h1{margin:0 0 8px;font-size:clamp(28px,4vw,42px)}
.compact-toolbar{margin-top:0}
.hud-strip{
  display:grid;
  grid-template-columns:repeat(7, minmax(90px, 1fr));
  gap:10px;
  margin-bottom:16px;
}
.hud-chip{
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.04);
  padding:10px 12px;
}
.hud-chip span{display:block;font-size:11px;color:var(--muted);margin-bottom:5px}
.hud-chip strong{font-size:15px}
.game-main-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(240px, 280px);
  gap:16px;
  align-items:start;
}
.map-panel,.side-panel,.log-panel{padding:18px}
.side-panel{min-width:0;position:sticky;top:16px}
.side-panel-wrap{display:grid;gap:16px}
.map-grid-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:14px 0 14px;
  overflow:visible;
}
.map-grid{
  display:grid;
  grid-template-columns:repeat(11, var(--cell-size));
  grid-template-rows:repeat(11, var(--cell-size));
  gap:var(--cell-gap);
  justify-content:center;
  padding:clamp(6px, 1.4vw, 12px);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.map-cell{
  border-radius:15px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(12,20,44,.98), rgba(9,15,34,.98));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:800;
  color:#d6deff;
  position:relative;
  transition:transform .12s ease, border-color .12s ease, background .12s ease, opacity .12s ease, box-shadow .12s ease, filter .12s ease;
  min-width:0;
  aspect-ratio:1 / 1;
  overflow:hidden;
}
.map-cell:disabled{cursor:default}
.map-cell.is-void{
  visibility:visible;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 6px, transparent 6px 12px),
    linear-gradient(180deg, rgba(6,9,18,.99), rgba(1,3,8,.995));
  border:1px solid rgba(118,130,166,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.015);
  opacity:1;
  color:transparent;
  filter:saturate(.45) brightness(.72);
}
.map-cell.is-active{box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.map-cell.is-unvisited{
  background:linear-gradient(180deg, rgba(42,72,171,.98), rgba(17,33,90,.995));
  border-color:rgba(126,164,255,.34);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 0 0 1px rgba(64,105,214,.08);
  color:transparent;
}
.map-cell.is-visited{background:linear-gradient(180deg, rgba(92,110,150,.95), rgba(49,60,92,.98)); border-color:rgba(178,194,236,.26);}
.map-cell.is-consumed{opacity:.86}
.map-cell.is-selectable{
  border-color:rgba(244,191,84,.98);
  box-shadow:0 0 0 1px rgba(244,191,84,.34), 0 0 20px rgba(244,191,84,.24), inset 0 0 0 1px rgba(255,255,255,.08);
  cursor:pointer;
}
.map-cell.is-selectable:hover{transform:translateY(-1px) scale(1.02)}
.cell-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:21px;
  line-height:1;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
  transform:translateY(-2px);
}
.map-cell small{
  position:absolute;
  bottom:4px;
  left:0;
  right:0;
  text-align:center;
  font-size:9px;
  font-weight:700;
  letter-spacing:.02em;
  color:rgba(255,255,255,.76);
}
.map-cell[data-kind="entrance"]{background:linear-gradient(180deg, rgba(103,232,255,.98), rgba(20,123,214,.98)); border-color:rgba(140,241,255,.95); box-shadow:0 0 0 1px rgba(130,240,255,.28), 0 0 18px rgba(66,196,255,.26), inset 0 0 0 1px rgba(255,255,255,.18); color:#fff}
.map-cell[data-kind="exit"]{background:linear-gradient(180deg, rgba(193,255,104,.99), rgba(88,170,36,.98)); border-color:rgba(209,255,132,.98); box-shadow:0 0 0 1px rgba(211,255,120,.26), 0 0 18px rgba(148,255,79,.24), inset 0 0 0 1px rgba(255,255,255,.16); color:#f7fff1; text-shadow:0 1px 0 rgba(22,48,10,.45)}
.map-cell[data-kind="boss"]{background:linear-gradient(180deg, rgba(255,108,136,.96), rgba(133,35,56,.96)); color:#fff}
.map-cell[data-kind="bossSupply"]{background:linear-gradient(180deg, rgba(167,142,255,.96), rgba(73,57,134,.96)); color:#fff}
.map-cell[data-kind="unknown"]{
  background:linear-gradient(180deg, rgba(42,72,171,.98), rgba(17,33,90,.995));
  border-color:rgba(126,164,255,.34);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 0 0 1px rgba(64,105,214,.08);
  color:transparent;
}
.map-cell[data-kind="frontier"]{
  background:linear-gradient(180deg, rgba(83,68,24,.98), rgba(48,36,10,.99));
  border-color:rgba(244,191,84,.98);
  color:transparent;
}
.map-cell[data-kind="frontier"] .cell-icon{filter:drop-shadow(0 0 6px rgba(244,191,84,.30));}
.map-cell.is-visited[data-kind="enemy"]{background:linear-gradient(180deg, rgba(87,114,191,.95), rgba(40,55,112,.98));}
.map-cell.is-visited[data-kind="elite"]{background:linear-gradient(180deg, rgba(181,102,255,.95), rgba(79,38,130,.98));}
.map-cell.is-visited[data-kind="heal"]{background:linear-gradient(180deg, rgba(88,205,161,.95), rgba(29,110,79,.98));}
.map-cell.is-visited[data-kind="trap"]{background:linear-gradient(180deg, rgba(255,119,118,.95), rgba(130,43,50,.98));}
.map-cell.is-visited[data-kind="treasure"]{background:linear-gradient(180deg, rgba(247,198,94,.96), rgba(147,104,34,.98)); color:#231507}
.map-cell.is-visited[data-kind="shop"]{background:linear-gradient(180deg, rgba(112,208,255,.96), rgba(33,90,133,.98));}
.map-cell.is-visited[data-kind="choice"]{background:linear-gradient(180deg, rgba(150,146,255,.96), rgba(63,61,139,.98));}
.map-cell.is-visited[data-kind="empty"]{background:linear-gradient(180deg, rgba(90,105,148,.92), rgba(40,48,78,.96));}
.floor-badge{
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  font-size:12px;
  color:#ffd891;
  font-weight:700;
}
.legend-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  color:var(--muted);
  font-size:12px;
}
.legend-swatch{
  width:14px;height:14px;border-radius:6px;display:inline-block;margin-right:6px;vertical-align:-2px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)
}
.legend-swatch.is-selectable{background:linear-gradient(180deg, rgba(83,68,24,.98), rgba(48,36,10,.99));border-color:rgba(244,191,84,.92)}
.legend-swatch.is-visited{background:linear-gradient(180deg, rgba(92,110,150,.95), rgba(49,60,92,.98));border-color:rgba(178,194,236,.30)}
.legend-swatch.is-wall{background:repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 4px, transparent 4px 8px), linear-gradient(180deg, rgba(6,9,18,.99), rgba(1,3,8,.995));border-color:rgba(118,130,166,.18)}
.legend-swatch.is-hidden{background:linear-gradient(180deg, rgba(42,72,171,.98), rgba(17,33,90,.995));border-color:rgba(126,164,255,.34)}
.legend-swatch.is-frontier{background:linear-gradient(180deg, rgba(83,68,24,.98), rgba(48,36,10,.99));border-color:rgba(244,191,84,.92)}
.side-panel-wrap{display:grid;gap:16px}

.side-panel-wrap > section:first-child,
.side-panel-wrap > section:nth-child(3),
.log-panel,
.floor-badge{display:none !important}

.side-panel-wrap{align-content:start}
.objective-box,.reward-progress-box,.run-stats{
  display:grid;
  gap:10px;
  color:#dce5ff;
  line-height:1.7;
}
.objective-card,.reward-progress-row,.run-stat-row{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.objective-card strong,.reward-progress-row strong{display:block;margin-bottom:3px}
.reward-progress-row{display:flex;justify-content:space-between;gap:12px;align-items:center}
.reward-progress-meta{white-space:nowrap;color:var(--muted);font-size:13px}
.reward-progress-meta.is-unlocked{color:#ffd271;font-weight:700}
.log-panel{margin-top:16px}
.log-list{
  display:grid;
  gap:8px;
  max-height:280px;
  overflow:visible;
  padding-right:4px;
}
.log-entry{
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  padding:10px 12px;
  line-height:1.65;
  color:#d9e1ff;
}
.log-entry small{display:block;color:var(--muted);margin-bottom:4px}
.overlay{
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  background:rgba(0,0,0,.62);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  z-index:2147483000;
  overflow:hidden;
  pointer-events:auto;
}
.overlay.is-parent-portal{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
}
.modal{
  width:min(620px, calc(100vw - 28px));
  max-height:min(88vh, calc(100dvh - 20px));
  margin-top:0;
  border-radius:26px;
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg, rgba(18,28,58,.98), rgba(9,15,35,1));
  box-shadow:0 24px 54px rgba(0,0,0,.42);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.modal.reward-modal{width:min(760px, calc(100vw - 24px))}
.modal-top{
  min-height:0;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
}
.modal-top.has-image{padding:14px 14px 0;flex:0 0 auto}
.modal-image{
  width:100%;
  max-height:min(32vh, 360px);
  object-fit:contain;
  border-radius:22px;
  border:1px solid var(--line);
}
.modal-content{padding:16px 18px 8px;overflow:auto;scrollbar-width:none;-ms-overflow-style:none}
.modal-content.compact{padding-top:12px}
.modal-content::-webkit-scrollbar{width:0;height:0}
.modal-content h2{margin:0 0 8px;font-size:25px}
.modal-content p{margin:0 0 8px;line-height:1.65;color:#dce5ff;font-size:14px}
.modal-content ul{margin:0;padding-left:1.2em;line-height:1.7;color:#dce5ff;font-size:14px}
.modal-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:14px 18px 18px;
  flex:0 0 auto;
}
.result-stats,.shop-list,.choice-list,.reward-grid,.reward-progress-list{
  display:grid;
  gap:12px;
}
.result-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.stat-card{
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.03);
  padding:10px 12px;
}
.stat-card span{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
.stat-card strong{font-size:16px}
.shop-overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.shop-overview-chip{padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035)}
.shop-overview-chip span{display:block;color:var(--muted);font-size:12px;margin-bottom:2px}
.shop-overview-chip strong{font-size:16px}
.shop-item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.shop-item-body strong{display:block;margin-bottom:4px}
.shop-item-body span{color:var(--muted);font-size:13px}
.shop-item.is-disabled{opacity:.55}
.reward-wrap{padding-bottom:40px}
.reward-progress-panel{padding:20px}
.reward-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}
.reward-card{
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(18,28,58,.96), rgba(9,15,35,.98));
  box-shadow:var(--shadow);
}
.reward-card.locked{opacity:.88}
.reward-image-wrap{position:relative}
.reward-card img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  cursor:pointer;
}
.lock-layer{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.48);
  color:#fff;
  font-weight:700;
  letter-spacing:.08em;
}
.reward-body{padding:16px 18px 18px}
.reward-body h3{margin:0 0 8px}
.reward-body p{margin:0 0 8px;color:#dbe4ff;line-height:1.7}
.reward-condition{font-size:13px;color:var(--muted)!important}
.notice-center{padding:28px;text-align:center}
.preview-grid{align-self:stretch}
.preview-grid img{height:100%; width:100%}
@media (max-width: 1024px){
  .hud-strip{grid-template-columns:repeat(4, minmax(100px, 1fr))}
  .game-main-grid{grid-template-columns:1fr}
  .side-panel-wrap{grid-template-columns:repeat(3, minmax(0, 1fr))}
  .reward-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 720px){
  :root{--cell-size:38px}
  .cell-icon{font-size:16px}
  .page-wrap,.reward-wrap,.play-wrap{width:min(100vw - 14px, 1120px)}
  .rules{grid-template-columns:1fr}
  .hud-strip{grid-template-columns:repeat(2, minmax(100px, 1fr))}
  .side-panel-wrap{grid-template-columns:1fr}
  .result-grid,.reward-grid{grid-template-columns:1fr}
  .game-shell{padding:14px}
  .modal-content h2{font-size:24px}
}

.reward-progress-box{display:grid;gap:12px}
.reward-progress-row{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:rgba(255,255,255,.03)}
.reward-progress-row strong{display:block;margin-bottom:4px;font-size:var(--progress-label-size);line-height:1.4;min-width:0;overflow-wrap:anywhere;word-break:break-word}
.reward-progress-meta{font-weight:800;color:#dbe4ff;white-space:nowrap;font-size:var(--progress-meta-size);line-height:1.35;text-align:right}
.reward-progress-meta.is-unlocked{color:#8ee1a0}
@media (max-width: 920px){.hud-strip{grid-template-columns:repeat(3,minmax(90px,1fr))}.play-wrap{width:min(100%, calc(100vw - 12px))}.map-grid{transform:scale(.95);transform-origin:top center}}
@media (max-width: 640px){:root{--cell-size:42px}.hud-strip{grid-template-columns:repeat(2,minmax(90px,1fr))}.game-shell{padding:14px}.map-grid{gap:4px;padding:8px}}

@media (max-width:760px){
  .game-main-grid{grid-template-columns:1fr}
  .side-panel{position:static}
}


@media (max-width: 640px){
  .overlay{padding:10px;}
  .modal{width:min(96vw, 560px); max-height:min(90vh, calc(100dvh - 12px));}
  .modal-image{max-height:min(28vh, 280px);}
  .modal-content h2{font-size:22px;}
  .result-grid{grid-template-columns:1fr;}
}

.map-cell[data-kind="unknown"] .cell-icon,
.map-cell[data-kind="unknown"] small,
.map-cell[data-kind="frontier"] .cell-icon,
.map-cell[data-kind="frontier"] small{display:none;}


/* ===== step28: mobile reward progress readability fix ===== */
@media (max-width: 820px){
  .game-main-grid{grid-template-columns:1fr;}
  .side-panel{position:static; top:auto;}
  .side-panel-wrap{gap:12px;}

  .reward-progress-item{min-width:0;}
  .reward-progress-row{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
    align-items:start;
  }
  .reward-progress-row strong{
    margin-bottom:0;
    min-width:0;
    line-height:1.45;
    word-break:break-word;
    overflow-wrap:anywhere;
    font-size:14px;
  }
  .reward-progress-meta{
    white-space:normal;
    line-height:1.35;
    font-size:13px;
    justify-self:end;
    text-align:right;
  }
}

@media (max-width: 560px){
  .side-panel,.map-panel{padding:14px;}
  .reward-progress-row{padding:10px 12px;}
  .reward-progress-row strong{font-size:13px;}
  .reward-progress-meta{font-size:12px;}
}


/* ===== step29: responsive board + progress sizing ===== */
@media (max-width: 1024px){
  .game-main-grid{grid-template-columns:1fr;}
  .side-panel{position:static;top:auto;order:2;width:100%;}
  .map-panel{order:1;}
  .map-grid-wrap{padding:10px 0 8px;overflow:visible;}
  .map-grid{margin-inline:auto;transform:none !important;}
}

@media (max-width: 820px){
  .play-wrap{width:min(100%, calc(100vw - 10px));}
  .game-shell{padding:12px;}
  .hud-strip{grid-template-columns:repeat(2, minmax(92px, 1fr));}
  .panel-head{margin-bottom:12px;}
  .panel-head h2{font-size:20px;}
  .map-panel,.side-panel{padding:14px;}
  .map-grid{transform:none !important;}
  .reward-progress-box{gap:10px;}
  .reward-progress-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;align-items:start;padding:10px 12px;}
}

@media (max-width: 560px){
  .legend-row{gap:8px;font-size:11px;}
  .legend-swatch{width:12px;height:12px;border-radius:5px;}
  .reward-progress-row{grid-template-columns:1fr;gap:6px;}
  .reward-progress-meta{justify-self:end;white-space:normal;}
}

@media (max-width: 420px){
  .map-panel,.side-panel{padding:12px;}
  .floor-badge{padding:6px 10px;font-size:11px;}
  .legend-row{font-size:10px;}
}