/* 画面の全部を 1 つのアプリの UI キットで描く。部品は 3 つだけ：
   - パネル（メイン盤面の床・ルールカード・サブ盤面・設定）: 白・2.5px の黒線・角丸 12px・下に 4px の黒い影
   - キー（押せないボタン＝岩・⚙）: 角丸 8〜12px・2.5px の黒線・下に 3px の黒い影。押せる物は白、押せない物は灰色
   - ラジオ（ゴール ◎）: 赤い輪と点
   海はページの地（紙色）。色は意味のある所だけ（ゴールの赤・青いペンギン・くちばしと足の橙）。
   遊ぶ所は 1 つのマス目（7×10。1 マス --cell）。カード（ウィンドウ）は見出しのつまみ ⋮⋮ でつかんで動かし、マスにそろえて置く。
   触った方が前（影が濃い）。黒いペンギンはカードの下、青いペンギンはサブ盤面の中に描く（隠れると見えない）。 */
:root {
  --ink: #1c1c1e;
  --dim: #85827a;
  --paper: #f4f3ef;
  --card: #fff;
  --soft: #e7e4dc;
  --gridline: #ebe8e1;
  --red: #e03131;
  --blue: #4f78b0;
  --gold: #c99a1c;
  --cell: 48px;
    --line: 2.5px;
  --r: 12px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; height: 100%; background: var(--paper); touch-action: manipulation; }

body {
  color: var(--ink);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic", system-ui, sans-serif;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

p, h1, h2 { word-break: auto-phrase; text-wrap: pretty; }
button { font-family: inherit; color: inherit; touch-action: manipulation; -webkit-touch-callout: none; }

#app {
  position: relative;
  height: var(--app-h, 100dvh);
  transform: translateY(var(--app-top, 0px));
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  overflow: hidden;
}

/* --- 上の余白（題名・進み具合・止める ◎ の札・⚙） --- */
.band { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 4px 12px 0; position: relative; z-index: 30; }
.title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: 1px; white-space: nowrap; }
.dots { display: flex; gap: 5px; margin-right: auto; }
.dots i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); }
.dots i.on { background: var(--ink); }
.gi { width: 1.15em; height: 1.15em; vertical-align: -0.22em; margin: 0 1px; }
/* 止める ◎ の数（空いていれば輪、埋まれば ◎）。キーと同じ線と影の札 */
.need { display: inline-flex; gap: 3px; padding: 4px 7px; border: 2px solid var(--ink); border-radius: 8px; background: var(--card); box-shadow: 0 2px 0 var(--ink); }
.ni { width: 20px; height: 20px; display: block; }
.need.pulse { animation: jig .52s; }
/* ⚙（押せるキー。動かさない） */
.key { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; border: var(--line) solid var(--ink); background: var(--card); box-shadow: 0 3px 0 var(--ink); padding: 0; cursor: pointer; color: var(--ink); }
.key svg { width: 60%; height: 60%; display: block; margin: auto; }
.key:active, .key.on { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.key.on { background: var(--ink); color: #fff; }

/* --- 本編 --- */
#main { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* 遊ぶ所は指でスワイプする面 */
.play { position: relative; padding: 4px 8px 6px; display: flex; flex-direction: column; justify-content: center; align-items: center; touch-action: none; min-height: 100%; }
.stage { position: relative; width: calc(var(--cell) * 7); height: calc(var(--cell) * 10); flex: 0 0 auto; transition: transform .35s ease, opacity .35s ease; }
.stage.out { transform: translateX(-115%) rotate(-4deg); opacity: 0; }
.stage.in0 { transform: translateX(30%); opacity: 0; transition: none; }
.field { position: absolute; inset: 0; }

/* パネル（床）。線は ::after に描き、中のマスの大きさを --cell のまま保つ */
.floor { position: absolute; background: var(--card); border-radius: var(--r); box-shadow: 0 4px 0 var(--ink); }
.floor::after { content: ""; position: absolute; inset: 0; border: var(--line) solid var(--ink); border-radius: inherit; pointer-events: none; }
.grid { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.grid line { stroke: var(--gridline); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }

/* 押せないボタン（岩）。灰色のキー */
.chip { position: absolute; }
.chip i { position: absolute; inset: 13% 13% 19%; background: var(--soft); border: var(--line) solid var(--ink); border-radius: 9px; box-shadow: 0 3px 0 var(--ink); }
.chip i::after { content: ""; position: absolute; left: 30%; right: 30%; top: 50%; height: 2.5px; margin-top: -1.25px; border-radius: 2px; background: #b9b4a8; }
/* ゴール（赤いラジオ） */
.goal { position: absolute; display: flex; align-items: center; justify-content: center; }
.goal i { width: 60%; height: 60%; border-radius: 50%; border: 3px solid var(--red); background: var(--card); display: flex; align-items: center; justify-content: center; }
.goal i::after { content: ""; width: 46%; height: 46%; border-radius: 50%; background: var(--red); }
/* スタート（点線の枠と字） */
.start { position: absolute; }
.start::before { content: ""; position: absolute; inset: 9%; border: 2px dashed #b9b4a8; border-radius: 9px; }
.start span { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; font-size: 8px; font-weight: 700; color: var(--dim); letter-spacing: -.2px; }

/* ペンギン。位置は transform で動かす（滑る長さに合わせて main.js が transition の時間を決める） */
.pg { position: absolute; left: 0; top: 0; z-index: 5; width: var(--cell); height: var(--cell); pointer-events: none; will-change: transform; }
.pg .pgi { position: absolute; left: 10%; top: 6%; width: 80%; height: 88%; overflow: visible; transform-origin: 50% 100%; }
.pg.left .pgi { transform: scaleX(-1); }
.pg.sink .pgi { animation: sink .5s ease-in forwards; }
.pg.bump .pgi { animation: bump .28s; }
.pg.left.bump .pgi { animation: bumpL .28s; }
.pg.hop .pgi { animation: hop .5s 2; }
.pg.left.hop .pgi { animation: hopL .5s 2; }
.pg.born .pgi { animation: popin .3s ease-out; }
.pg.lift { z-index: 9; }
@keyframes sink { to { transform: translateY(30%) scale(.3); opacity: 0; } }
@keyframes bump { 30% { transform: scaleX(.86) scaleY(1.06); } }
@keyframes bumpL { 0%, 100% { transform: scaleX(-1); } 30% { transform: scaleX(-.86) scaleY(1.06); } }
@keyframes hop { 40% { transform: translateY(-22%); } }
@keyframes hopL { 0%, 100% { transform: scaleX(-1); } 40% { transform: scaleX(-1) translateY(-22%); } }
@keyframes popin { from { transform: scale(.4); opacity: 0; } }

.splash { z-index: 6; position: absolute; left: 0; top: 0; width: var(--cell); height: var(--cell); pointer-events: none; }
.splash i { position: absolute; inset: 18%; border: 2.5px solid var(--ink); border-radius: 50%; animation: ring .6s ease-out forwards; }
.splash i + i { animation-delay: .12s; opacity: 0; }
@keyframes ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

.mark { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 6; }
.stamp { position: absolute; width: 100%; height: 100%; pointer-events: none; animation: stampIn .18s ease-out; }
.stamp circle { fill: none; stroke: var(--red); stroke-width: 3; opacity: .9; }
@keyframes stampIn { from { transform: scale(1.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mk { position: absolute; left: 0; top: 0; width: var(--cell); height: var(--cell); }
.mk .stamp { left: -60%; top: -60%; width: 220%; height: 220%; }

/* --- 動かせるカード（ルールカード・サブ盤面）。ウィンドウとして重ねられ、触った方が前。見出しのつまみ ⋮⋮ でつかむ --- */
.card { position: absolute; left: 0; top: 0; z-index: 2; background: var(--card); border-radius: var(--r); box-shadow: 0 4px 0 var(--ink); }
.card::after { content: ""; position: absolute; inset: 0; border: var(--line) solid var(--ink); border-radius: inherit; pointer-events: none; z-index: 3; }
.rcard { width: calc(var(--cell) * 3); height: calc(var(--cell) * 2); }
.scard { width: calc(var(--cell) * 4); height: calc(var(--cell) * 4); }
.card.front { z-index: 3; }
/* 後ろのウィンドウは影が薄く、見出しの字も薄い */
.card.back { box-shadow: 0 3px 0 #c9c5bb; }
.card.back::after { border-color: #6d6a63; }
.card.back .grip b { color: var(--dim); }
.card.held { z-index: 8; box-shadow: 0 8px 0 var(--ink); }
#pgk { z-index: 1; }
.pgb { z-index: 4; }
.card.snap { transition: left .14s ease, top .14s ease; }
.card.jig .grip { animation: jig .52s; }
.grip { position: relative; height: var(--cell); display: flex; align-items: center; gap: 6px; padding: 0 10px; border-bottom: 2px solid var(--ink); cursor: grab; touch-action: none;
  font-size: 15px; font-weight: 800; letter-spacing: 1px; white-space: nowrap; }
.card.held .grip { cursor: grabbing; }
.dots6 { width: 12px; height: 19px; fill: var(--dim); flex: 0 0 auto; }
.rbody { margin: 0; height: var(--cell); display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 4px;
  font-size: max(13px, calc(var(--cell) * .29)); font-weight: 700; line-height: 1.22; white-space: nowrap; }
/* サブ盤面の床（カードの枠がそのまま床の枠） */
.sin { position: absolute; left: 0; right: 0; bottom: 0; top: var(--cell); }
.sfloor { position: absolute; inset: 0; overflow: hidden; border-radius: 0 0 var(--r) var(--r); }
/* 出口：下の枠の 1 マスの切れ目（枠の線と影がそこだけ切れて、外へ口が開く） */
.exit { position: absolute; bottom: -9px; width: var(--cell); height: 13px; z-index: 4; pointer-events: none; }
.exit::before { content: ""; position: absolute; left: 3px; right: 3px; top: 0; bottom: 0; background: var(--card); border-left: var(--line) solid var(--ink); border-right: var(--line) solid var(--ink); }
/* つかんでいる間、置く先のマス（置けない所は赤い点線） */
.ghost { position: absolute; z-index: 7; border: 2.5px dashed var(--dim); border-radius: var(--r); pointer-events: none; }
.ghost.bad { border-color: var(--red); }

/* --- 設定（⚙ の下に開く） --- */
.gpop { position: absolute; z-index: 40; right: 10px; top: 58px; width: 180px; background: var(--card); border-radius: var(--r); box-shadow: 0 4px 0 var(--ink); animation: pop .16s ease-out; transform-origin: 85% 0; }
.gpop::after { content: ""; position: absolute; inset: 0; border: var(--line) solid var(--ink); border-radius: inherit; pointer-events: none; }
@keyframes pop { from { transform: scale(.4); opacity: .3; } }
.grow { height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 14px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.grow + .grow { border-top: 1.5px solid var(--gridline); }
.glink { width: 100%; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: inherit; cursor: pointer; text-align: left; }
.glink:active { background: var(--paper); }
.chev { font-size: 16px; color: var(--dim); }
.sw { position: relative; width: 38px; height: 22px; border-radius: 11px; border: 2px solid var(--ink); background: var(--card); padding: 0; cursor: pointer; flex: 0 0 auto; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); transition: left .15s; }
.sw.on { background: var(--blue); }
.sw.on::after { left: 18px; background: #fff; }
.sw::before { content: ""; position: absolute; inset: -11px -4px; }
.done .gpop { display: none; }
.gans { margin: 0; padding: 10px 14px 12px; border-top: 1.5px solid var(--gridline); font-size: 20px; font-weight: 800; line-height: 1.5; letter-spacing: 2px; text-align: center; }
.gans small { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0; color: var(--dim); }

/* 横向きの低い画面：上の余白を左の列にして、マス目を縦いっぱいに */
@media (orientation: landscape) and (max-height: 520px) {
  #app { flex-direction: row; max-width: 820px; }
  .band { flex-direction: column; align-items: flex-start; justify-content: center; width: 150px; min-height: 0; padding: 8px 4px 8px 16px; gap: 12px; }
  .dots { margin-right: 0; }
  .gpop { left: 16px; right: auto; top: auto; bottom: 16px; transform-origin: 0 100%; }
  .play { padding: 4px; }
}

@keyframes jig { 0%, 100% { translate: 0 0; rotate: 0deg; } 15% { translate: 0 -3px; rotate: -9deg; } 35% { translate: 0 -3px; rotate: 8deg; } 55% { translate: 0 -2px; rotate: -5deg; } 75% { translate: 0 -1px; rotate: 3deg; } }

/* --- 結果 --- */
.result { padding: 16px 14px 18px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
/* 結果画面は見た目はふつうのクリア画面（線は描かない）。裏は 7×6 のマス目（1 マス --rc）で、題名・小見出し・札・ボタンは壁、
   「クリア」のはんこはゴール。結果の外は海。画面のどこをスワイプしてもペンギンが滑る（ほかのゲームの欄は縦に送れる） */
.result { touch-action: none; }
.rafter { touch-action: pan-y; }
.rarea { position: relative; align-self: center; width: calc(var(--rc, 48px) * 7); height: calc(var(--rc, 48px) * 6); flex: 0 0 auto; }
.rfloor { position: absolute; inset: 0; background: var(--card); border-radius: var(--r); box-shadow: 0 4px 0 var(--ink); }
.rfloor::after { content: ""; position: absolute; inset: 0; border: var(--line) solid var(--ink); border-radius: inherit; pointer-events: none; }
.rarea .pg, .rarea .splash { width: var(--rc, 48px); height: var(--rc, 48px); }
.rbig, .rtitle, .rsub, .rstat, .rbtn { position: absolute; }
.rstamp { position: absolute; inset: 4%; width: 92%; height: 92%; transform: rotate(-12deg); }
.rstamp circle { fill: none; stroke: var(--red); stroke-width: 2.6; }
.rstamp text { fill: var(--red); font-size: 9.5px; font-weight: 800; text-anchor: middle; dominant-baseline: central; letter-spacing: -.3px; }
.rarea.won { height: calc(var(--rc, 48px) * 7); }
.rarea.won .rstamp circle { stroke: var(--gold); }
.rarea.won .rstamp text { opacity: 0; }
.rdot { position: absolute; left: 34%; top: 34%; width: 32%; height: 32%; border-radius: 50%; background: var(--gold); animation: stampIn .25s ease-out; }
.rtitle { margin: 0; padding-left: 14px; display: flex; align-items: flex-end; padding-bottom: 2px; box-sizing: border-box; font-size: 28px; font-weight: 800; letter-spacing: 3px; line-height: 1; white-space: nowrap; }
.rsub { margin: 0; padding-left: 15px; display: flex; align-items: center; box-sizing: border-box; font-size: 15px; font-weight: 700; color: var(--dim); white-space: nowrap; }
.rstat { box-sizing: border-box; display: flex; justify-content: space-between; gap: 4px; padding: 0 10px;
  align-items: center; border-radius: 10px; background: var(--paper); font-size: 12px; color: var(--dim); white-space: nowrap; }
.rstat b { font-size: 17px; color: var(--ink); font-variant-numeric: tabular-nums; }
.rbtn { box-sizing: border-box; height: auto; margin: 0; border-width: var(--line); transform-origin: 50% 50%; }
.rarea .rbtn { padding: 0; }
.btn.jig { animation: jig .52s; }
.dots i.g { border-color: var(--gold); }
.dots i.g.on { background: var(--gold); }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 4px; height: 48px; font-size: 16px; font-weight: 800;
  border: var(--line) solid var(--ink); border-radius: 12px; background: var(--card); color: var(--ink); text-decoration: none; cursor: pointer; box-shadow: 0 3px 0 var(--ink);
}
.btn.x { background: var(--ink); color: #fff; }
.xlogo { width: 18px; height: 18px; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

#foot { padding: 6px 14px 16px; font-size: 12px; text-align: center; color: var(--dim); }

.toast { pointer-events: none; position: fixed; left: 50%; top: 40%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px;
  border-radius: 10px; font-size: 14px; z-index: 50; transition: opacity .5s; }
.toast.out { opacity: 0; }

/* おまけ（?bonus）。カードは動かせないので、つまみの点を出さない */
.card.locked .grip { cursor: default; }
.card.locked .dots6 { display: none; }
.title small { font-size: .55em; color: var(--dim); margin-left: 2px; }
.bdone { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 20px; text-align: center; }
.bdone h2 { margin: 0; font-size: 26px; }
.bdone p { margin: 0; line-height: 1.8; }
.bdone small { color: var(--dim); }
.bdone .rbtn { position: static; width: min(280px, 100%); height: 48px; }