/* RED LIST 端末UI（試作）
   端末画像は 941×1672px。全部の大きさを「画像上のpx」で書けるよう、
   --px（＝端末の幅の 1/941）を基準にしている。スマホの大きさが変わっても、
   端末の画像と、その上に置いた部品の位置関係は、そのまま拡大縮小される。 */

:root{
  --bg:#15110F;
  --lcd-ink:#26301c;        /* 液晶の文字：黒に近い深緑 */
  --lcd-ink-soft:#5c6b48;   /* 液晶の薄い文字 */
  --lcd-hi:#26301c;         /* 選択中の帯 */
  --lcd-hi-ink:#e1ebc5;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;background:var(--bg);overflow:hidden;
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none;}
body{font-family:"DotGothic16","Zen Kaku Gothic New",monospace;color:var(--lcd-ink);}

.stage{position:fixed;inset:0;display:grid;place-items:center;background:var(--bg);}

/* 端末：画面に収まる最大の大きさ。幅か高さの、小さいほうに合わせる */
.device{
  position:relative;
  width:min(100vw, calc(100dvh * 1125 / 2000));
  aspect-ratio:1125 / 2000;
  container-type:inline-size;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  touch-action:manipulation;
}
/* PC・横向きの画面：横長の端末。画面に収まる最大の大きさ（幅か高さの、小さいほうに合わせる） */
/* PC・横向きの画面：横長の端末の幅 --devw。画面の幅の65%まで。
   ヘッダー（ロゴ・説明文）と、端末の下の遊び方・足元の分の高さ（--site-reserve。画面の高さに合わせて、実測で決めた）を引いた高さにも収める
   ＝ 画面を縮めても、なるべくスクロールしないで、遊び方まで見える。
   スマホを横向きにしたような、高さが小さい画面（520px以下）だけは、小さくなりすぎないよう画面いっぱいに出す */
:root{--site-reserve:calc(18.5dvh + 182px);--site-gap:clamp(18px,2.4vw,40px);--site-pad:clamp(20px,3vw,48px);--devw:min(65vw, calc((100dvh - var(--site-reserve)) * 1672 / 941));}
.device.land{width:var(--devw);aspect-ratio:1672 / 941;}
@media (max-height:520px){ .device.land{width:min(100vw, calc(100dvh * 1672 / 941));} }
.device .body{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;}

/* ---------- 押せる範囲 ---------- */
.hit{
  z-index:3;position:absolute;border:0;background:transparent;padding:0;cursor:pointer;
  touch-action:none;outline:none;
}
.hit.round{border-radius:50%;}
/* 押した見た目：暗くして、内側に影を落として「沈んだ」ように見せる */
.hit.down{
  background:radial-gradient(circle at 50% 35%, rgba(70,0,25,.22), rgba(70,0,25,.38));
  box-shadow:inset 0 calc(100cqw/941*7) calc(100cqw/941*12) rgba(50,0,15,.55);
}
.hit:focus-visible{box-shadow:0 0 0 calc(100cqw/941*4) rgba(255,255,255,.85);}
body.debug .hit{outline:2px solid #00ff6a;background:rgba(0,255,106,.12);}
body.debug .lcd{outline:2px solid #00a2ff;}

/* 十字キー：全体を四分割して当たり判定にし、押した腕だけ暗くする */
.dpad{z-index:3;position:absolute;touch-action:none;cursor:pointer;}
.dpad .arm{position:absolute;opacity:0;transition:opacity .04s;
  background:radial-gradient(circle at 50% 50%, rgba(70,0,25,.20), rgba(70,0,25,.40));
  box-shadow:inset 0 calc(100cqw/941*6) calc(100cqw/941*10) rgba(50,0,15,.5);
  border-radius:calc(100cqw/941*18);}
.dpad .arm.on{opacity:1;}
.dpad .arm.up{left:33%;top:0;width:34%;height:46%;}
.dpad .arm.down{left:33%;bottom:0;width:34%;height:46%;}
.dpad .arm.left{left:0;top:33%;width:46%;height:34%;}
.dpad .arm.right{right:0;top:33%;width:46%;height:34%;}

/* ---------- 目 ---------- */
/* 赤目は本体画像に描かれている。ふだんの目（白目・黒目）の画像を、その上に重ねて隠す。
   赤くしたいときは、この画像を透明にして、下の赤目を見せる */
.eye-calm{
  position:absolute;border-radius:50%;pointer-events:none;z-index:1;
  transition:opacity .5s ease;opacity:1;
}
.eye-calm img{display:block;width:100%;height:100%;}
.eye-calm.red{opacity:0;}

/* ---------- 液晶 ---------- */
.lcd{
  --px:calc(100cqw / 941);
  position:absolute;overflow:hidden;z-index:2;
  border-radius:calc(var(--px)*26);
  font-size:calc(var(--px)*30);line-height:1.35;
}
.hdr{
  display:flex;align-items:center;gap:calc(var(--px)*16);
  height:calc(var(--px)*66);padding:0 calc(var(--px)*26);
  border-bottom:calc(var(--px)*4) solid var(--lcd-ink);
  font-size:calc(var(--px)*34);
}
.hdr .ttl{letter-spacing:.08em;flex:0 0 auto;}
.hdr .nick{
  margin-left:auto;font:inherit;font-size:calc(var(--px)*28);color:var(--lcd-ink);
  background:transparent;border:0;border-bottom:calc(var(--px)*2) dotted var(--lcd-ink-soft);
  padding:0 calc(var(--px)*4);max-width:calc(var(--px)*330);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;
}
.hdr .cnt{flex:0 0 auto;font-size:calc(var(--px)*28);}
.screen{position:absolute;left:0;right:0;top:calc(var(--px)*66);bottom:0;overflow:hidden;}
.screen > *{position:absolute;inset:0;}

/* HOME：左にAKAME、右に進み具合と最新の発見 */
.home{display:flex;gap:calc(var(--px)*22);padding:calc(var(--px)*18) calc(var(--px)*26);}
.home .hl{position:relative;width:calc(var(--px)*290);flex:none;}
.home .who small{display:block;font-size:calc(var(--px)*24);color:var(--lcd-ink-soft);}
.home .who b{font-weight:400;font-size:calc(var(--px)*40);letter-spacing:.06em;}
.home .bubble{margin-top:calc(var(--px)*14);position:relative;padding:calc(var(--px)*10) calc(var(--px)*16);
  border:calc(var(--px)*4) solid var(--lcd-ink);border-radius:calc(var(--px)*14);background:#e6eecd;
  font-size:calc(var(--px)*28);line-height:1.3;overflow-wrap:anywhere;}
.home .bubble::after{content:"";position:absolute;left:calc(var(--px)*40);bottom:calc(var(--px)*-15);
  width:calc(var(--px)*18);height:calc(var(--px)*18);background:#e6eecd;
  border-right:calc(var(--px)*4) solid var(--lcd-ink);border-bottom:calc(var(--px)*4) solid var(--lcd-ink);
  transform:rotate(45deg);}
.home .sprite{position:absolute;left:calc(var(--px)*-14);bottom:calc(var(--px)*2);width:calc(var(--px)*320);
  image-rendering:pixelated;cursor:pointer;}
.home .sprite.hop{animation:hop .35s ease-out;}
@keyframes hop{0%{transform:translateY(0)}40%{transform:translateY(calc(var(--px)*-30))}100%{transform:translateY(0)}}
.home .hr{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(var(--px)*14);}
.home small{font-size:calc(var(--px)*22);color:var(--lcd-ink-soft);}
.prog .line{display:flex;align-items:baseline;justify-content:space-between;}
.prog .num{font-size:calc(var(--px)*30);}
.prog .num b{font-weight:400;font-size:calc(var(--px)*68);line-height:1;}
.prog .rest{font-size:calc(var(--px)*28);}
.prog .gauge{display:flex;gap:calc(var(--px)*5);margin-top:calc(var(--px)*6);}
.prog .gauge i{flex:1;height:calc(var(--px)*20);border:calc(var(--px)*3) solid var(--lcd-ink);border-radius:calc(var(--px)*3);}
.prog .gauge i.on{background:var(--lcd-ink);}
.latest{display:flex;flex-direction:column;gap:calc(var(--px)*8);}
.hrow,.hbtn{display:flex;align-items:center;gap:calc(var(--px)*12);width:100%;text-align:left;cursor:pointer;
  font:inherit;color:var(--lcd-ink);background:transparent;border:calc(var(--px)*3) solid var(--lcd-ink);
  border-radius:calc(var(--px)*10);padding:calc(var(--px)*8) calc(var(--px)*14);}
.hrow{font-size:calc(var(--px)*26);}
.hrow b{font-weight:400;}
.hrow span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hrow small{color:inherit;opacity:.7;}
.hrow em{font-style:normal;font-size:calc(var(--px)*22);}
.latest .none{font-size:calc(var(--px)*26);color:var(--lcd-ink-soft);padding:calc(var(--px)*8) 0;}
.hbtns{display:flex;gap:calc(var(--px)*10);margin-top:auto;}
.hbtn{flex:1;justify-content:center;font-size:calc(var(--px)*25);padding:calc(var(--px)*12) calc(var(--px)*6);white-space:nowrap;}
.hrow.sel,.hbtn.sel{background:var(--lcd-hi);color:var(--lcd-hi-ink);}
.hrow:active,.hbtn:active{transform:translateY(calc(var(--px)*3));}

/* LIST（図鑑）：発見された個体は、写真（カラー）で並ぶ */
.listwrap{position:absolute;inset:0;}
.list{position:absolute;left:0;right:0;top:0;bottom:calc(var(--px)*100);overflow-y:auto;
  padding:calc(var(--px)*16) calc(var(--px)*20) 0;
  display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:min-content;
  gap:calc(var(--px)*18) calc(var(--px)*12);scrollbar-width:none;}
.list::-webkit-scrollbar{display:none;}
.cell{display:flex;flex-direction:column;gap:calc(var(--px)*6);cursor:pointer;}
.cell .ph{aspect-ratio:1;border:calc(var(--px)*3) solid var(--lcd-ink);border-radius:calc(var(--px)*10);
  overflow:hidden;background:#cfd9b0;}
.cell .ph img{display:block;width:100%;height:100%;object-fit:cover;}
.cell.off .ph{border-style:dashed;display:grid;place-items:center;color:var(--lcd-ink-soft);background:transparent;}
.cell.off .ph b{font-weight:400;font-size:calc(var(--px)*62);}
.cell small{text-align:center;font-size:calc(var(--px)*24);border-radius:calc(var(--px)*6);color:var(--lcd-ink-soft);}
.cell.sel .ph{outline:calc(var(--px)*5) solid var(--lcd-ink);outline-offset:calc(var(--px)*3);}
.cell.sel small{background:var(--lcd-hi);color:var(--lcd-hi-ink);}
.info{position:absolute;left:0;right:0;bottom:0;height:calc(var(--px)*100);
  display:flex;align-items:center;gap:calc(var(--px)*14);padding:0 calc(var(--px)*26);
  border-top:calc(var(--px)*4) solid var(--lcd-ink);background:#e6eecd;font-size:calc(var(--px)*32);}
.info b{font-weight:400;}
.info span{margin-left:auto;font-size:calc(var(--px)*26);color:var(--lcd-ink-soft);}

/* 詳細：写真を画面の半分ほどに。主役は発見者。場所はMAPへ、SNSは外へ */
.detail{background:#e6eecd;padding:calc(var(--px)*20) calc(var(--px)*28);
  display:flex;flex-direction:column;gap:calc(var(--px)*12);}
.detail .main{flex:1;min-height:0;display:flex;gap:calc(var(--px)*26);align-items:stretch;}
.detail .ph{flex:none;width:calc(var(--px)*320);border:calc(var(--px)*4) solid var(--lcd-ink);
  border-radius:calc(var(--px)*12);overflow:hidden;background:#cfd9b0;}
.detail .ph img{display:block;width:100%;height:100%;object-fit:cover;}
.detail .ph.off{border-style:dashed;display:grid;place-items:center;color:var(--lcd-ink-soft);background:transparent;}
.detail .ph.off b{font-weight:400;font-size:calc(var(--px)*120);}
.detail .right{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
.detail .who small{font-size:calc(var(--px)*24);color:var(--lcd-ink-soft);}
.detail .who h2{font-weight:400;font-size:calc(var(--px)*62);line-height:1.12;letter-spacing:.02em;overflow-wrap:anywhere;}
.detail .who h2 i{font-style:normal;font-size:calc(var(--px)*30);margin-left:calc(var(--px)*8);}
.detail dl{margin-top:calc(var(--px)*14);display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--px)*8) calc(var(--px)*14);}
.detail dt{font-size:calc(var(--px)*22);color:var(--lcd-ink-soft);}
.detail dd{font-size:calc(var(--px)*28);overflow-wrap:anywhere;}
.detail .say{margin-top:calc(var(--px)*12);padding:calc(var(--px)*3) calc(var(--px)*16);cursor:pointer;
  border-left:calc(var(--px)*6) solid var(--lcd-ink);font-size:calc(var(--px)*26);line-height:1.3;}
.detail .say small{display:block;font-size:calc(var(--px)*20);line-height:1.15;color:var(--lcd-ink-soft);}
.detail .say .txt{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
/* 2行に収まらないときだけ出る「全文を読む」 */
.detail .say .more{display:block;width:max-content;margin:calc(var(--px)*4) 0 0 auto;padding:calc(var(--px)*1) calc(var(--px)*14);
  font-size:calc(var(--px)*22);border:calc(var(--px)*2) solid var(--lcd-ink);border-radius:calc(var(--px)*8);}
.detail .say .more[hidden]{display:none;}
.detail .say .more.sel{background:var(--lcd-hi);color:var(--lcd-hi-ink);}
.detail .acts{flex:none;display:flex;gap:calc(var(--px)*12);}
.actbtn{flex:1;min-width:0;display:flex;align-items:center;gap:calc(var(--px)*12);text-align:left;cursor:pointer;
  padding:calc(var(--px)*11) calc(var(--px)*18);font:inherit;font-size:calc(var(--px)*28);
  color:var(--lcd-ink);background:transparent;border:calc(var(--px)*3) solid var(--lcd-ink);border-radius:calc(var(--px)*12);}
.actbtn small{font-size:calc(var(--px)*22);opacity:.75;}
.actbtn span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.actbtn em{font-style:normal;font-size:calc(var(--px)*24);}
.actbtn.sel{background:var(--lcd-hi);color:var(--lcd-hi-ink);}
.actbtn:active{transform:translateY(calc(var(--px)*3));}

/* MAP：地図は実際の色のまま。?tint=1 を付けると、液晶の色に寄せて見られる */
.mapwrap{background:#dfe8c3;}
#map{position:absolute;inset:0;background:#dfe8c3;}
body.tint #map .leaflet-tile-pane{filter:sepia(1) hue-rotate(38deg) saturate(.75) contrast(.92) brightness(1.02);}
/* 著作権表示（OpenStreetMap）は消さずに、下の説明帯の上へ逃がす */
#map .leaflet-bottom{bottom:calc(var(--px)*40);}
#map .leaflet-control-attribution{font-size:calc(var(--px)*16);background:rgba(225,235,197,.85);padding:0 calc(var(--px)*6);}
/* Leafletがマーカー本体の位置を transform で動かすので、中心合わせは中の要素でやる */
.pin{width:0;height:0;}
.pin i{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:block;
  width:calc(var(--px)*34);height:calc(var(--px)*34);background:#c81e1e;border:calc(var(--px)*4) solid #fff;
  border-radius:50%;box-shadow:0 0 0 calc(var(--px)*3) var(--lcd-ink);}
.pin i::after{content:"";position:absolute;inset:calc(var(--px)*-30);border-radius:50%;}
.pin.hot i{width:calc(var(--px)*50);height:calc(var(--px)*50);animation:ping 1.3s ease-out infinite;}
@keyframes ping{0%{box-shadow:0 0 0 calc(var(--px)*3) var(--lcd-ink),0 0 0 0 rgba(200,30,30,.6);}
  100%{box-shadow:0 0 0 calc(var(--px)*3) var(--lcd-ink),0 0 0 calc(var(--px)*34) rgba(200,30,30,0);}}
.mapnote{position:absolute;left:calc(var(--px)*14);top:calc(var(--px)*14);z-index:600;cursor:pointer;font-family:inherit;color:var(--lcd-ink);text-align:left;
  background:rgba(225,235,197,.95);border:calc(var(--px)*3) solid var(--lcd-ink);border-radius:calc(var(--px)*10);
  padding:calc(var(--px)*8) calc(var(--px)*18);font-size:calc(var(--px)*28);}
.mapnote[hidden]{display:none;}
.mapnote span{display:block;font-size:calc(var(--px)*22);color:var(--lcd-ink-soft);}
.maphint{position:absolute;left:0;right:0;bottom:0;padding:calc(var(--px)*8) calc(var(--px)*20);
  font-size:calc(var(--px)*24);background:rgba(225,235,197,.9);z-index:500;pointer-events:none;}

/* 目を押したときのお知らせ */
.notice{position:absolute;inset:calc(var(--px)*66) 0 0 0;z-index:1000;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:calc(var(--px)*18);text-align:center;
  background:rgba(225,235,197,.96);}
.notice b{font-weight:400;font-size:calc(var(--px)*48);letter-spacing:.04em;}
.notice span{font-size:calc(var(--px)*32);}
.notice span.long{max-width:calc(var(--px)*700);line-height:1.5;font-size:calc(var(--px)*30);}
/* 「遊び方」（2ページ）。本番の /home と同じ言葉 */
.notice.how{justify-content:center;gap:calc(var(--px)*22);padding:0 calc(var(--px)*30);}
.notice.how .msg{display:flex;flex-direction:column;gap:calc(var(--px)*16);}
.notice.how .msg p{font-size:calc(var(--px)*36);line-height:1.5;letter-spacing:.03em;}
.notice.how .msg p.final{font-weight:700;margin-top:calc(var(--px)*6);}
.notice.how h3{font-weight:400;font-size:calc(var(--px)*40);letter-spacing:.08em;}
.notice.how .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--px)*14);width:100%;}
.notice.how .step{display:flex;flex-direction:column;align-items:center;gap:calc(var(--px)*8);padding:calc(var(--px)*14) calc(var(--px)*8);
  border:calc(var(--px)*3) solid var(--lcd-ink);border-radius:calc(var(--px)*12);}
.notice.how .step svg{width:calc(var(--px)*52);height:calc(var(--px)*52);}
.notice.how .step b{font-weight:400;font-size:calc(var(--px)*25);white-space:nowrap;}
/* スマホ（縦長）は液晶が狭いので、2×2にする */
.device:not(.land) .notice.how .steps{grid-template-columns:repeat(2,1fr);}
.device:not(.land) .notice.how .step b{font-size:calc(var(--px)*29);}
.notice.how .step span{font-size:calc(var(--px)*22);line-height:1.4;color:var(--lcd-ink-soft);}
.notice .go{margin-top:calc(var(--px)*6);padding:calc(var(--px)*14) calc(var(--px)*40);font:inherit;font-size:calc(var(--px)*34);
  color:var(--lcd-hi-ink);background:var(--lcd-hi);border:0;border-radius:calc(var(--px)*12);cursor:pointer;}
.notice .go:active{transform:translateY(calc(var(--px)*3));}
.notice small{font-size:calc(var(--px)*24);color:var(--lcd-ink-soft);margin-top:calc(var(--px)*14);}
.notice[hidden]{display:none;}

@media (prefers-reduced-motion:reduce){
  .eye-calm,.eye-calm i{transition:none;}
  .home .sprite.hop{animation:none;}
  .pin i::after{content:"";position:absolute;inset:calc(var(--px)*-30);border-radius:50%;}
.pin.hot i{animation:none;}
}

/* HOME / MAP / LIST のボタンの見た目。いまの画面のボタンだけクリーム色になる */
.face{position:absolute;pointer-events:none;z-index:1;}
.face img{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .18s ease;}
.face .pink{opacity:1;}
.face .cream{opacity:0;}
.face.active .pink{opacity:0;}
.face.active .cream{opacity:1;}
@media (prefers-reduced-motion:reduce){ .face img{transition:none;} }

/* 横長の端末では、液晶の中の大きさの基準を変える（液晶が横に広いので、縦に収まるよう少し小さめにする） */
.device.land .lcd{--px:calc(100cqw / 1520);}

/* ---------- PC（横長）のときだけ：ホームページ ----------
   並び：ヘッダー（ロゴ／説明文／SNS）→ 端末 → 遊び方 → 足元。画面を下にスクロールすると、遊び方が出る。
   配色は、サイトの明るい配色（クリーム #F3F1EC、墨 #1C1A17、赤 #C81E1E）をそのまま使う */
.site-head,.site-msg,.site-how,.site-foot{display:none;}
@media (min-height:521px){
  html.land{height:auto;overflow-y:auto;overflow-x:hidden;}
  html.land,body.land{
    background:radial-gradient(ellipse at 50% 38%, #FBFAF6 0%, #F3F1EC 70%) fixed;
    color:#1C1A17;
  }
  body.land{height:auto;min-height:100%;overflow:visible;}
  body.land .stage{position:relative;inset:auto;display:grid;place-items:center;background:transparent;}
  /* 端末を、クリームの上に浮かせる影 */
  .device.land .body{filter:drop-shadow(0 calc(100cqw/1672*22) calc(100cqw/1672*34) rgba(70,25,15,.28));}

  /* ヘッダー：左にロゴ、まんなかに説明文、右にSNS */
  body.land .site-head{
    display:flex;justify-content:space-between;align-items:flex-start;gap:24px;
    padding:clamp(14px,2.4vh,30px) var(--site-pad) 0;
  }
  .logo{display:inline-block;text-decoration:none;color:#FFFDF8;background:#C81E1E;
    font-family:"Zen Kaku Gothic New",sans-serif;text-align:center;padding:.5em 1em .6em;line-height:1.1;}
  .logo .wm{display:block;font-weight:900;letter-spacing:.04em;font-size:clamp(20px,2.3vw,38px);}
  .logo .tg{display:block;font-weight:400;letter-spacing:.02em;font-size:clamp(10px,1.1vw,17px);margin-top:.15em;}
  .logo .tg b{font-weight:900;letter-spacing:.04em;}
  /* 説明文（本番の /home と同じ3行）：ヘッダーの下に、本文として。上下に余白をとって、端末を少し下げる */
  body.land .site-msg{
    display:block;text-align:center;
    margin:clamp(14px,4.8vh,52px) auto clamp(14px,4.4vh,48px);
    font-family:"Zen Kaku Gothic New",sans-serif;font-size:calc(clamp(13px,1.35vw,20px) + 2pt);line-height:1.85;letter-spacing:.04em;
  }
  .site-msg p{margin:0;}
  .site-msg p.final{font-weight:900;color:#C81E1E;}
  .sns{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;
    font-family:"Zen Kaku Gothic New",sans-serif;font-size:clamp(11px,1vw,14px);}
  .sns a{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-decoration:none;color:#1C1A17;
    border:1.5px solid #1C1A17;border-radius:8px;padding:.55em .95em;background:rgba(255,253,248,.7);
    transition:background .15s,color .15s;}
  .sns a b{font-weight:900;letter-spacing:.06em;}
  .sns a span{color:#6E685F;letter-spacing:.04em;}
  .sns a:hover{background:#1C1A17;color:#FFFDF8;}
  .sns a:hover span{color:#DED8CC;}
  .sns a:focus-visible,.logo:focus-visible{outline:3px solid #C81E1E;outline-offset:3px;}

  /* 遊び方：端末の下に、4ステップを横に並べる。幅は端末と同じ。少しスクロールすると見える */
  body.land .site-how{
    display:block;margin:clamp(24px,4.5vh,56px) auto 0;width:var(--devw);
    font-family:"Zen Kaku Gothic New",sans-serif;
  }
  .site-how h2{font-size:clamp(12px,1.05vw,16px);font-weight:900;letter-spacing:.2em;margin:0 0 clamp(12px,2vh,22px);
    display:flex;align-items:center;gap:16px;}
  .site-how h2::before,.site-how h2::after{content:"";flex:1;height:1px;background:#DED8CC;}
  .site-how .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,32px);}
  /* 1つずつを、正方形に近いカードにして、中の文字は折り返す */
  .site-how .step{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;
    aspect-ratio:1 / .92;padding:clamp(10px,1.5vw,22px);
    background:rgba(255,253,248,.78);border:1px solid #DED8CC;border-radius:14px;}
  .site-how .step svg{flex:none;width:clamp(24px,2.1vw,34px);height:clamp(24px,2.1vw,34px);color:#C81E1E;}
  .site-how .step .tx{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;}
  .site-how .step b{font-size:clamp(12px,.95vw,15px);font-weight:700;}
  /* 説明文：1pt大きく。区切りの位置で折り返し、行の長さをそろえる */
  .site-how .step span{font-size:calc(clamp(10.5px,.82vw,12.5px) + 1pt);color:#6E685F;line-height:1.65;text-wrap:balance;}

  body.land .site-foot{
    display:flex;justify-content:center;align-items:center;
    width:100%;margin:clamp(28px,5vh,56px) 0 0;padding-bottom:clamp(20px,3.6vh,36px);
    font-family:"Zen Kaku Gothic New",sans-serif;font-size:clamp(11px,1vw,14px);letter-spacing:.1em;color:#6E685F;
  }
  body.land .site-foot small{font-size:inherit;}
}
@media (prefers-reduced-motion:reduce){ .sns a{transition:none;} }

/* ---------- タッチ操作なし：液晶の中では、指でのスクロール・ピンチ・長押しを効かせない（マウスのホイールは効く） ---------- */
.lcd, .lcd *{touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}

/* ---------- いま使えるボタンの表示（液晶のヘッダーの、まんなか） ---------- */
.hdr .khint{flex:1;min-width:0;margin-left:calc(var(--px)*22);font-size:calc(var(--px)*21);letter-spacing:.04em;
  color:var(--lcd-ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hdr .nick.sel{background:var(--lcd-hi);color:var(--lcd-hi-ink);border-bottom-color:transparent;}

/* 十字キーの「さわれる範囲」を、見た目の十字より外へ広げる（指の太さ対策）。見た目は変わらない。
   上は、HOME/MAP/LISTのボタンに近いので、控えめにしてある */
.dpad::before{content:"";position:absolute;inset:-12% -24% -24% -24%;}

/* 札を十字キーで選んでいるとき（黒く反転） */
.mapnote.sel{background:var(--lcd-hi);color:var(--lcd-hi-ink);}
.mapnote.sel span{color:var(--lcd-hi-ink);opacity:.85;}

/* ロゴ：赤い帯の中に、ロゴ画像（クリーム色の黄）を置く。画像の幅で、帯の大きさが決まる */
@media (min-height:521px){
  body.land .logo{padding:clamp(9px,.85vw,15px) clamp(13px,1.2vw,21px);line-height:0;}
  .logo-img{display:block;width:clamp(124px,11.5vw,220px);height:auto;}
}

/* ---------- 本番のデータを読むとき ---------- */
/* よみこみ中・つながらなかったとき */
.loading{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  font-size:calc(var(--px)*32);line-height:1.7;color:var(--lcd-ink-soft);padding:0 calc(var(--px)*40);}
/* 写真がない（まだ入っていない・読み込めなかった）個体 */
.ph.nophoto{display:grid;place-items:center;background:repeating-linear-gradient(135deg,#d6e0b8 0 calc(var(--px)*8),#cfd9b0 calc(var(--px)*8) calc(var(--px)*16));}
.ph.nophoto::after{content:"NO PHOTO";font-size:calc(var(--px)*17);letter-spacing:.08em;color:var(--lcd-ink-soft);text-align:center;}
.detail .ph.nophoto::after{font-size:calc(var(--px)*22);}