/* AIco — pixel UI */
:root{
  --bg:#14121f; --bg2:#1b1830; --panel:#241f3d; --panel2:#2e2752; --line:#0a0814; --hi:#6a5cc0;
  --text:#f4eedc; --dim:#a39dc0; --yellow:#ffd35a; --green:#6be07a; --blue:#5ab8ff; --pink:#ff7fa8; --orange:#ff9f4a; --purple:#b48cff;
  --w:#5ab8ff; --c:#ffd35a; --a:#b48cff;
  --font:'DotGothic16','MS Gothic','Osaka-Mono',monospace;
  --title:'Press Start 2P','DotGothic16',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:8px 8px;
  color:var(--text); font-family:var(--font); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:none; font-smooth:never; overflow-x:hidden;
}
canvas,img{image-rendering:pixelated;image-rendering:crisp-edges}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;border:0;background:none}
input{font-family:inherit}
.hidden{display:none!important}

/* ---------- pixel frame ---------- */
.px{
  position:relative; background:var(--panel); margin:4px;
  box-shadow:
    0 -4px 0 0 var(--line), 0 4px 0 0 var(--line), -4px 0 0 0 var(--line), 4px 0 0 0 var(--line),
    inset 4px 4px 0 0 rgba(255,255,255,.07), inset -4px -4px 0 0 rgba(0,0,0,.3);
}
.px.light{background:var(--panel2)}
.px.deep{background:var(--bg2)}
.pad{padding:12px 14px}
.title-bar{
  display:inline-block; background:var(--hi); color:#fff; padding:0 10px; margin:-4px 0 8px -4px; font-size:14px;
  box-shadow:0 4px 0 var(--line), 4px 0 0 var(--line);
}
h2.sec{font-size:13px;color:var(--dim);margin:0 0 6px;letter-spacing:.1em}

/* buttons */
.btn{
  display:inline-block; padding:8px 18px; background:var(--hi); color:#fff; margin:4px;
  box-shadow:0 -4px 0 0 var(--line),0 4px 0 0 var(--line),-4px 0 0 0 var(--line),4px 0 0 0 var(--line),
    inset 4px 4px 0 0 rgba(255,255,255,.25), inset -4px -4px 0 0 rgba(0,0,0,.3);
  user-select:none; transition:none;
}
.btn:hover{filter:brightness(1.15)}
.btn:active{transform:translateY(3px);box-shadow:0 -4px 0 0 var(--line),0 1px 0 0 var(--line),-4px 0 0 0 var(--line),4px 0 0 0 var(--line),inset 4px 4px 0 0 rgba(0,0,0,.25)}
.btn.go{background:#2f9e4f}
.btn.warn{background:#c9822a}
.btn.ghost{background:var(--panel2)}
.btn.big{font-size:20px;padding:12px 28px}
.btn[disabled]{filter:grayscale(1) brightness(.7);cursor:default;transform:none}
.btn.sm{padding:2px 10px;font-size:13px}

/* ---------- screens ---------- */
.screen{min-height:100vh;padding:22px;display:flex;flex-direction:column;align-items:center;justify-content:center}
#game.screen{justify-content:flex-start;padding:10px 14px;align-items:stretch}

/* title */
.logo{font-family:var(--title);font-size:clamp(36px,8vw,76px);color:var(--yellow);letter-spacing:.05em;
  text-shadow:4px 4px 0 #c9822a,8px 8px 0 var(--line);margin-bottom:10px;text-align:center}
.logo small{display:block;font-size:.28em;color:var(--blue);text-shadow:2px 2px 0 var(--line);margin-top:20px;letter-spacing:.2em}
.tagline{color:var(--dim);margin-bottom:26px;text-align:center}
#parade{width:min(720px,94vw);height:auto;margin-bottom:26px;background:#3a2f6b}
.blink{animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* lobby */
.lobby-grid{display:grid;grid-template-columns:minmax(260px,340px) minmax(300px,640px);gap:26px;width:min(1020px,100%)}
@media(max-width:820px){.lobby-grid{grid-template-columns:1fr}}
.field{margin:8px 0}
.field label{display:block;color:var(--dim);font-size:13px;margin-bottom:4px}
.field input[type=text]{width:100%;background:var(--bg);color:var(--text);border:0;padding:8px 10px;font-size:16px;
  box-shadow:inset 3px 3px 0 rgba(0,0,0,.5),0 0 0 3px var(--line)}
.role-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.role-pick button{padding:8px 4px;background:var(--bg2);box-shadow:0 0 0 3px var(--line);text-align:center;font-size:13px}
.role-pick button.on{background:var(--hi);box-shadow:0 0 0 3px var(--yellow)}
.role-pick button canvas{display:block;margin:0 auto 2px}
.room{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px;margin:10px 4px;background:var(--bg2);cursor:pointer;
  box-shadow:0 0 0 3px var(--line)}
.room:hover{background:#2a2450}
.room.on{box-shadow:0 0 0 3px var(--yellow);background:#2f2860}
.room .nm{font-size:17px}
.room .meta{color:var(--dim);font-size:13px}
.room .pl{text-align:right;color:var(--green)}
.room .pl.full{color:var(--pink)}
.pips{display:flex;gap:3px;justify-content:flex-end;margin-top:3px}
.pips i{width:9px;height:9px;background:#3b3566;display:block}
.pips i.on{background:var(--green)}

/* matching */
.match-box{width:min(820px,100%);text-align:center}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}
.slot{height:84px;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;color:var(--dim);
  box-shadow:0 0 0 3px var(--line)}
.slot.in{background:var(--panel2);color:var(--text);animation:pop .25s steps(3)}
.slot.me{box-shadow:0 0 0 3px var(--yellow)}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.dots::after{content:'';animation:dots 1.2s steps(1) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.roulette{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0}
.rcard{padding:16px 8px;background:var(--bg2);box-shadow:0 0 0 3px var(--line);opacity:.55}
.rcard.hl{opacity:1;background:var(--panel2);box-shadow:0 0 0 4px var(--yellow);transform:translateY(-6px)}
.rcard.final{animation:flash .5s steps(2) 3}
@keyframes flash{50%{background:#fff;color:#000}}
.rcard canvas{display:block;margin:0 auto 6px}
.brief{text-align:left;font-size:15px;line-height:1.8}
.brief li{margin-left:18px}

/* ---------- game ---------- */
.topbar{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:8px 14px;margin-bottom:10px}
.brand{font-family:var(--title);font-size:16px;color:var(--yellow);text-shadow:2px 2px 0 var(--line)}
.daybox{display:flex;align-items:center;gap:14px;min-width:0}
.daynum{font-family:var(--title);font-size:14px;white-space:nowrap}
.daynum b{color:var(--yellow);font-size:20px}
.gauge-wrap{flex:1;min-width:120px}
.gauge{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;height:10px}
.gauge i{background:#2a2548;display:block}
.gauge i.on{background:#5a5a8c}
.gauge.late i.on{background:#7a6a82}
.gauge-txt{display:flex;justify-content:space-between;font-size:12px;color:var(--dim);margin-top:4px}
.topbtns{display:flex;align-items:center;gap:2px}
.chip{display:inline-block;padding:0 8px;background:var(--bg);box-shadow:0 0 0 2px var(--line);font-size:12px}

.game-grid{display:grid;grid-template-columns:290px minmax(0,1fr) 370px;gap:14px;align-items:start}
@media(max-width:1180px){.game-grid{grid-template-columns:260px minmax(0,1fr)}.game-grid .rolecol{grid-column:1/-1}}
@media(max-width:760px){.game-grid{grid-template-columns:1fr}.topbar{grid-template-columns:1fr}}

/* world indicators */
.surv{padding:6px 0 2px}
.surv .big{font-family:var(--title);font-size:26px}
.surv .big.ok{color:var(--green)} .surv .big.mid{color:var(--yellow)} .surv .big.low{color:var(--pink)}
.bar{position:relative;height:20px;background:var(--bg);box-shadow:0 0 0 3px var(--line);margin:8px 0 4px}
.bar>i{position:absolute;left:0;top:0;bottom:0;display:block;background:repeating-linear-gradient(90deg,var(--green) 0 6px,#49b85d 6px 8px)}
.bar>i.mid{background:repeating-linear-gradient(90deg,var(--yellow) 0 6px,#d8a93b 6px 8px)}
.bar>i.low{background:repeating-linear-gradient(90deg,var(--pink) 0 6px,#d95d85 6px 8px)}
.bar .line60{position:absolute;left:60%;top:-6px;bottom:-6px;width:4px;background:#fff;z-index:2}
.bar .line60::after{content:'60%';position:absolute;top:-17px;left:-12px;font-size:11px;color:#fff;background:var(--line);padding:0 3px}
.bar-lbl{display:flex;justify-content:space-between;color:var(--dim);font-size:12px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.kpi{background:var(--bg);padding:6px 8px;box-shadow:0 0 0 2px var(--line)}
.kpi .k{font-size:11px;color:var(--dim)}
.kpi .v{font-size:18px;display:flex;align-items:baseline;gap:6px}
.kpi .d{font-size:11px}
.up{color:var(--green)} .dn{color:var(--pink)} .flat{color:var(--dim)}
.kpi canvas{width:100%;height:22px;display:block;margin-top:2px}
.stocks{width:100%;border-collapse:collapse;font-size:13px}
.stocks td,.stocks th{padding:3px 4px;text-align:right}
.stocks th{color:var(--dim);font-weight:normal;font-size:11px}
.stocks td:first-child,.stocks th:first-child{text-align:left}
.policy{display:flex;gap:8px;flex-wrap:wrap;font-size:13px}

/* scene */
#scene{width:100%;display:block;background:#000;box-shadow:0 0 0 4px var(--line)}
.scene-wrap{padding:4px;position:relative}
.scene-hud{position:absolute;left:14px;top:14px;display:flex;gap:6px;pointer-events:none}
.scene-hud .chip{background:rgba(10,8,20,.75)}
.calm{position:absolute;left:0;right:0;bottom:12px;text-align:center;pointer-events:none}
.calm span{display:inline-block;background:rgba(10,8,20,.78);padding:2px 12px;font-size:13px;color:#d9f5df}
.log{height:150px;overflow:auto;font-size:13px;padding:6px 10px}
.log div{padding:2px 0;border-bottom:1px dashed rgba(255,255,255,.06)}
.log::-webkit-scrollbar,.rolebody::-webkit-scrollbar{width:10px}
.log::-webkit-scrollbar-thumb,.rolebody::-webkit-scrollbar-thumb{background:var(--hi)}
.log::-webkit-scrollbar-track,.rolebody::-webkit-scrollbar-track{background:var(--bg)}
.tag{display:inline-block;font-size:10px;padding:0 5px;margin-right:6px;color:#000;vertical-align:1px}
.t-news{background:var(--blue)} .t-bad{background:var(--pink)} .t-good{background:var(--green)} .t-ai{background:var(--purple)} .t-you{background:var(--yellow)}
.log .tk{color:var(--dim);margin-right:6px}

/* role panel */
.rolehead{display:flex;align-items:center;gap:12px;padding:8px 12px}
.rolehead canvas{width:48px;height:60px;flex:none}
.rolehead .rn{font-size:20px}
.rolehead .goal{font-size:12px;color:var(--dim);line-height:1.4}
.role-w{--rc:var(--w)} .role-c{--rc:var(--c)} .role-a{--rc:var(--a)}
.rolehead .rn{color:var(--rc)}
.tabs{display:flex;gap:4px;margin:8px 4px 0}
.tabs button{flex:1;padding:6px 0;background:var(--bg2);color:var(--dim);box-shadow:0 0 0 3px var(--line);font-size:14px}
.tabs button.on{background:var(--rc,var(--hi));color:#000}
.tabs.info{margin:0 0 8px}
.tabs.info button.on{background:var(--hi);color:#fff}
.rolebody{max-height:calc(100vh - 250px);min-height:300px;overflow:auto;padding:10px 12px}
.status{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.st{background:var(--bg);padding:4px 8px;box-shadow:0 0 0 2px var(--line);font-size:12px}
.st b{display:block;font-size:16px;font-weight:normal}
.st .mini{height:6px;background:#352f5c;margin-top:3px}
.st .mini i{display:block;height:100%;background:var(--green)}
.report{background:var(--bg);padding:6px 10px;margin-bottom:10px;font-size:13px;box-shadow:0 0 0 2px var(--line);border-left:6px solid var(--rc)}
.report .ln{display:flex;justify-content:space-between}
.ctl{margin:0 0 12px}
.ctl-h{display:flex;justify-content:space-between;align-items:baseline}
.ctl-h .val{font-size:18px;color:var(--yellow);font-weight:normal}
.ctl-h .chg{font-size:11px;color:var(--orange);margin-left:6px}
.ctl-b{display:flex;gap:8px;align-items:center;margin-top:3px}
.step{width:30px;height:30px;background:var(--hi);color:#fff;font-size:18px;line-height:28px;text-align:center;flex:none;
  box-shadow:0 0 0 3px var(--line),inset 3px 3px 0 rgba(255,255,255,.25),inset -3px -3px 0 rgba(0,0,0,.3)}
.step:active{transform:translateY(2px)}
.hint{font-size:11px;color:var(--dim);margin-top:2px}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:18px;background:var(--bg);box-shadow:0 0 0 3px var(--line);cursor:pointer;min-width:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:26px;background:var(--rc);box-shadow:0 0 0 3px var(--line),inset 3px 3px 0 rgba(255,255,255,.4)}
input[type=range]::-moz-range-thumb{width:16px;height:26px;background:var(--rc);border:3px solid var(--line);border-radius:0}
.forecast{background:var(--bg);padding:8px 10px;box-shadow:0 0 0 2px var(--line);font-size:13px;margin-top:6px}
.forecast .ln{display:flex;justify-content:space-between}
.forecast .tot{border-top:2px dashed var(--hi);margin-top:4px;padding-top:4px;font-size:15px}
.note-keep{font-size:12px;color:var(--green);margin:8px 0}
.orders .o{display:flex;justify-content:space-between;align-items:center;padding:3px 0;border-bottom:1px dashed rgba(255,255,255,.1);font-size:13px}
.qtybar{display:flex;gap:4px;margin:6px 0}
.qtybar button{padding:2px 8px;background:var(--bg);box-shadow:0 0 0 2px var(--line)}
.qtybar button.on{background:var(--yellow);color:#000}
.vote-now{display:flex;justify-content:space-between;font-size:12px;color:var(--dim)}

/* result */
.result-box{width:min(900px,100%)}
.verdict{font-family:var(--title);font-size:clamp(20px,4vw,34px);text-align:center;margin:8px 0 16px;line-height:1.6}
.verdict.win{color:var(--green);text-shadow:3px 3px 0 var(--line)} .verdict.lose{color:var(--pink);text-shadow:3px 3px 0 var(--line)}
.rank{width:100%;border-collapse:collapse;font-size:14px}
.rank td,.rank th{padding:4px 8px;text-align:right}
.rank td:nth-child(1),.rank th:nth-child(1){text-align:center}
.rank td:nth-child(2),.rank th:nth-child(2){text-align:left}
.rank tr.me{background:#4a3f10;color:var(--yellow)}
.rank th{color:var(--dim);font-weight:normal;font-size:12px}
#resChart{width:100%;height:auto;background:var(--bg);image-rendering:pixelated}
.res-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;margin:4px 2px}
.res-legend .muted{color:var(--dim)}

/* debug dock */
.dock{position:fixed;left:8px;bottom:8px;z-index:50;display:flex;flex-wrap:wrap;gap:2px;max-width:60vw;opacity:.6}
.dock:hover{opacity:1}
.dock .btn{font-size:11px;padding:2px 8px;margin:3px}
#toast{position:fixed;left:50%;top:78px;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:var(--panel2);padding:8px 18px;box-shadow:0 0 0 4px var(--line);animation:tin .2s steps(3)}
@keyframes tin{from{transform:translateY(-14px);opacity:0}}
.overlay{position:fixed;inset:0;background:rgba(10,8,20,.82);z-index:70;display:flex;align-items:center;justify-content:center;padding:20px}
.overlay .box{width:min(560px,100%)}

/* tutorial */
#tut .box{width:min(640px,100%);max-height:94vh;overflow:auto}
.tut-body{min-height:300px;font-size:15px;line-height:1.7}
.tut-body h3{font-size:19px;color:var(--yellow);margin-bottom:8px}
.tut-body p{margin:6px 0}
.tut-body em{font-style:normal;color:var(--green)}
.tut-body b{color:var(--yellow);font-weight:normal}
.tut-dots{display:flex;gap:6px;justify-content:center;margin:10px 0 2px}
.tut-dots i{width:10px;height:10px;background:#3b3566;display:block}
.tut-dots i.on{background:var(--yellow)}
.tut-nav{display:flex;justify-content:space-between;align-items:center}
.tut-box{background:var(--bg);padding:8px 10px;box-shadow:0 0 0 3px var(--line);margin:8px 0}
.tut-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0}
.tut-roles>div{background:var(--bg);padding:10px 6px;text-align:center;font-size:12px;line-height:1.5;box-shadow:0 0 0 3px var(--line)}
.tut-roles canvas{display:block;margin:0 auto 4px}
.tut-roles .nm{font-size:16px}
.tut-roles>div.me{box-shadow:0 0 0 4px var(--yellow)}
.tut-layout{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:8px;margin:10px 0;font-size:12px;text-align:center}
.tut-layout>div{padding:22px 6px;background:var(--bg);box-shadow:0 0 0 3px var(--line)}
.tut-layout b{display:block;font-size:14px}
.tut-flow{display:flex;flex-direction:column;gap:2px;margin:8px 0;align-items:center}
.tut-flow div{background:var(--bg);padding:3px 14px;box-shadow:0 0 0 3px var(--line);width:min(360px,100%);text-align:center}
.tut-flow span{color:var(--orange);line-height:1}
.tut-flow .bad{color:var(--pink)}
.tut-gauge{display:grid;grid-template-columns:repeat(24,1fr);gap:2px;height:14px;margin:6px 0}
.tut-gauge i{background:#352f5c}.tut-gauge i.on{background:var(--green)}
#btnHowGame{margin-left:6px}
#dock{display:none}
body.debug #dock{display:flex}

/* ================= スマホ(縦の効率重視) =================
   上部固定: 日数・時間ゲージ + 生存率/経済指標。それ以外はスクロール。
   順序: 街 → あなたの操作 → ニュース → 株 → 体制。「決めた!」は画面下に固定 */
@media(max-width:760px){
  body{font-size:14px}
  .screen{padding:10px}
  .px{margin:3px}
  .pad{padding:8px 10px}
  .title-bar{font-size:12px;margin:-3px 0 6px -3px;padding:0 8px}
  .lbl{display:none}
  .btn{padding:6px 12px}

  #game.screen{padding:0 0 10px}
  .game-grid{display:flex;flex-direction:column;gap:0;align-items:stretch}
  .worldcol,.game-grid>main,.rolecol{display:contents}

  /* 固定ヘッダー */
  .topbar{position:sticky;top:0;z-index:30;margin:0;height:46px;padding:4px 8px;display:flex;gap:8px;align-items:center;
    box-shadow:0 3px 0 0 var(--line)}
  .brand{display:none}
  .daybox{flex:1;gap:8px}
  .daynum{font-size:10px}
  .daynum b{font-size:15px}
  .gauge{height:8px;gap:1px}
  .gauge-txt{font-size:10px;margin-top:2px}
  .gauge-txt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #gaugeMsg{display:none}
  .gauge-txt{justify-content:flex-end}
  .topbtns{gap:0}
  .topbtns .chip{font-size:10px;padding:0 5px}
  .topbtns .btn{margin:2px;padding:4px 9px}

  /* 固定の指標(生存率 + 経済指標) */
  #worldTop{position:sticky;top:46px;z-index:29;order:0}
  #worldTop .px{margin:0;box-shadow:0 3px 0 0 var(--line);padding:6px 8px}
  #worldTop .px+.px{box-shadow:0 3px 0 0 var(--line);background:var(--bg2)}
  #worldTop .title-bar{display:none}
  /* 生存率は1行: 「労働者の生存率 [バー(60%の目印つき)] 100%」 */
  .surv{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:0}
  .surv .bar-lbl{grid-area:1/1;font-size:11px;white-space:nowrap}
  .surv .bar-lbl span+span{display:none}
  .surv .big{grid-area:1/3;font-size:15px;white-space:nowrap}
  .surv .bar{grid-area:1/2;height:12px;margin:0}
  .surv .bar .line60{top:-3px;bottom:-3px}
  .surv .bar .line60::after{display:none} /* 「60%」の文字は、1行にするため省く(目印の白い線は残す) */
  .surv .hint{display:none}
  #worldTop .px+.px{padding:4px 8px}
  .kpis{grid-template-columns:repeat(3,1fr);gap:4px;margin:0}
  .kpi{padding:2px 5px}
  .kpi .k{font-size:9px;white-space:nowrap}
  .kpi .v{font-size:13px;gap:3px;white-space:nowrap}
  .kpi .d{font-size:9px}
  .kpi canvas{display:none}

  /* スクロールする部分 */
  .scene-wrap{order:1;padding:3px;margin:6px 3px 3px}
  .scene-hud{left:8px;top:8px}
  .scene-hud .chip{font-size:10px}
  .calm{bottom:6px}
  .calm span{font-size:11px;padding:1px 8px}
  #roleBox{order:2}
  .infobox{order:3}
  .log{height:120px;font-size:12px;padding:4px 6px}
  .infobody{min-height:120px}
  .tabs.info{margin:0 0 6px}
  .rolehead .sync{font-size:10px;padding:0 5px}

  /* ロールパネル: 内側スクロールをやめ、ページ全体でスクロール */
  .rolebody{max-height:none;min-height:0;overflow:visible;padding:8px 10px}
  .rolehead{padding:6px 10px;gap:10px}
  .rolehead canvas{width:30px;height:38px}
  .rolehead .rn{font-size:16px}
  .rolehead .goal{display:none}
  .tabs{margin:6px 3px 0}
  .tabs button{padding:8px 0}
  .status{grid-template-columns:repeat(2,1fr);gap:4px;margin-bottom:8px}
  .st{padding:3px 6px}
  .st b{font-size:15px}
  .report{padding:4px 8px;margin-bottom:8px;font-size:12px}
  .ctl{margin-bottom:8px}
  .ctl-h .val{font-size:16px}
  .ctl-b{gap:6px;margin-top:2px}
  .step{width:38px;height:38px;line-height:36px;font-size:20px}
  input[type=range]{height:22px}
  input[type=range]::-webkit-slider-thumb{width:20px;height:34px}
  input[type=range]::-moz-range-thumb{width:20px;height:34px}
  .hint{font-size:10px}
  .forecast{font-size:12px;padding:6px 8px}
  .note-keep{margin:6px 0 0;font-size:11px}

  #toast{top:96px}

  /* 他の画面 */
  .logo{margin-bottom:6px}
  .tagline{margin-bottom:16px;font-size:13px}
  .slots{grid-template-columns:repeat(4,1fr);gap:6px}
  .slot{height:68px;font-size:10px}
  .match-box{padding:8px}
  .roulette{gap:6px}
  .rcard{padding:10px 2px;font-size:12px}
  .brief{font-size:13px;line-height:1.6}
  .room{margin:8px 3px}
  #tut .box{padding:8px 10px}
  .tut-body{min-height:0;font-size:14px;line-height:1.6}
  .tut-layout{grid-template-columns:1fr 1fr 1fr}
  .tut-layout>div{padding:10px 2px;font-size:10px}
  .tut-roles{gap:5px}
  .tut-roles>div{padding:6px 2px;font-size:10px}
  .overlay{padding:8px;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){.blink,.slot.in,.rcard.final{animation:none}}

/* 広告・スポンサー枠(ads.js で設定) */
.ad-slot{width:min(600px,100%);margin:14px auto 4px}
.ad-slot[hidden]{display:none}
.ad-box{display:block;position:relative;aspect-ratio:6/1;background:var(--bg2);color:var(--dim);text-decoration:none;
  box-shadow:0 0 0 3px var(--line),inset 3px 3px 0 rgba(255,255,255,.06),inset -3px -3px 0 rgba(0,0,0,.3);overflow:hidden}
.ad-box:not(.has-img){background-image:repeating-linear-gradient(135deg,transparent 0 10px,rgba(255,255,255,.04) 10px 20px)}
a.ad-box:hover{filter:brightness(1.15)}
.ad-box img{width:100%;height:100%;object-fit:contain;display:block}
.ad-dummy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(12px,3.4vw,18px);letter-spacing:.2em}
.ad-tag{position:absolute;right:0;top:0;font-size:9px;line-height:1;padding:2px 4px;background:var(--line);color:var(--dim)}
.ad-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:4px;min-height:1.6em}
.ad-cap{font-size:11px;color:var(--dim);flex:1;text-align:right}
.ad-buy{color:var(--blue);text-decoration:none}
.ad-box.recruit{color:var(--blue)}
.ad-report{font-size:10px;line-height:1;padding:4px 7px;background:var(--bg);color:var(--dim);box-shadow:0 0 0 2px var(--line);flex:none}
.ad-report:hover:not(:disabled){color:var(--pink)}
.ad-report:disabled{opacity:.6;cursor:default}
.ad-report.town{position:absolute;right:12px;top:12px;z-index:5;background:rgba(10,8,20,.75)}
.rep-sel{width:100%;background:var(--bg);color:var(--text);border:0;padding:8px 10px;font-size:15px;font-family:inherit;box-shadow:inset 3px 3px 0 rgba(0,0,0,.5),0 0 0 3px var(--line)}
.ad-result{margin:14px auto 0}
.ad-result .ad-box{aspect-ratio:8/1}
.ad-result .ad-cap{text-align:center;font-size:13px;color:var(--text)}
.ad-result .ad-foot{flex-direction:column;align-items:center}
@media(max-width:760px){.ad-slot{margin:10px auto 2px}.ad-box{aspect-ratio:6.4/1}
  .ad-report{padding:9px 12px;font-size:11px;min-height:34px} /* 指で押しやすいように大きめ */
  .ad-report.town{padding:6px 10px;min-height:0;right:8px;top:8px}}

/* ワールド準備中(文字は rem: ブラウザ/OSの文字サイズ設定に追従) */
.ld-box{width:min(640px,100%);text-align:center}
.ld-top{text-align:right}
.ld-title{font-size:1.4rem;font-weight:normal;color:var(--yellow);margin:.2rem 0 .8rem}
.ld-ind{margin:.2rem 0 .6rem}
.ld-ind canvas{display:block;margin:0 auto;width:min(360px,92%);height:auto;image-rendering:pixelated}
.ld-sub{font-size:1rem;color:var(--text);margin:.2rem 0}
.ld-elapsed{font-size:.85rem;color:var(--dim);margin:0 0 .8rem}
.ld-tips{display:flex;align-items:stretch;gap:.5rem;margin:.4rem 0}
.ld-view{flex:1;min-width:0;background:var(--bg);box-shadow:0 0 0 3px var(--line);overflow:hidden;touch-action:pan-y;user-select:none;cursor:grab}
.ld-card{padding:1rem;min-height:9rem;display:flex;align-items:center;justify-content:center}
.ld-card.in-r{animation:ldinr .24s steps(4)}
.ld-card.in-l{animation:ldinl .24s steps(4)}
@keyframes ldinr{from{transform:translateX(28px);opacity:0}}
@keyframes ldinl{from{transform:translateX(-28px);opacity:0}}
.ld-tip{display:flex;gap:1rem;align-items:center;text-align:left;width:100%}
.ld-img{flex:none}
.ld-tip-title{font-size:1.15rem;color:var(--yellow);margin-bottom:.4rem}
.ld-tip-body{font-size:1rem;line-height:1.7}
.ld-arrow{flex:none;width:2.4rem;min-height:2.4rem;align-self:center;height:2.4rem;background:var(--hi);color:#fff;font-size:1rem;
  box-shadow:0 0 0 3px var(--line),inset 3px 3px 0 rgba(255,255,255,.25),inset -3px -3px 0 rgba(0,0,0,.3)}
.ld-arrow:active{transform:translateY(2px)}
.ld-dots{display:flex;gap:.5rem;justify-content:center;margin:.8rem 0}
.ld-dot{width:.7rem;height:.7rem;padding:0;background:#3b3566;display:block}
.ld-dot.on{background:var(--yellow)}
.ld-dot{position:relative}
.ld-dot::after{content:'';position:absolute;inset:-.5rem} /* タップしやすいように当たり判定を広げる */
.ld-error{background:var(--bg);padding:1rem;margin:.6rem 0;box-shadow:0 0 0 3px var(--pink);font-size:1rem}
.ld-actions{margin-top:.4rem;display:flex;justify-content:center;flex-wrap:wrap}
@media(max-width:760px){.ld-arrow{width:2rem}.ld-card{padding:.7rem}.ld-tip{gap:.6rem}}
@media(prefers-reduced-motion:reduce){
  .ld-card.in-r,.ld-card.in-l{animation:none}
}

/* ゲスト登録の案内(結果画面。控えめなカード) */
.reg-card{position:relative;margin:12px 4px 4px;padding:10px 34px 10px 12px;background:var(--panel2);box-shadow:0 0 0 3px var(--line),inset 3px 3px 0 rgba(255,255,255,.07)}
.reg-t{font-size:15px;color:var(--yellow);margin-bottom:4px}
.reg-p{font-size:12px;color:var(--dim);line-height:1.6;margin:0 0 6px}
.reg-pt{font-size:14px;margin:0 0 2px}
.reg-sub{font-size:12px;color:var(--dim);line-height:1.6}
.reg-cap{font-size:12px;color:var(--orange);margin:4px 0}
.reg-ben ul{margin:2px 0 6px 18px;font-size:12px;line-height:1.7}
.reg-act{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.reg-later{font-size:13px;color:var(--dim);text-decoration:underline;padding:6px 4px}
.reg-note{font-size:11px;color:var(--dim);margin-top:6px}
.reg-pt b{color:var(--yellow);font-weight:normal;font-size:16px}
.reg-x{position:absolute;right:2px;top:0;width:32px;height:32px;font-size:18px;color:var(--dim)}
.reg-x:hover{color:var(--text)}
.reg-card .btn{margin:0}

/* ニックネーム */
.nick-box{width:min(520px,100%)}
.nick-h{font-size:20px;font-weight:normal;color:var(--yellow);margin:6px 0}
.nick-p{font-size:14px;line-height:1.7;margin:6px 0 10px}
.nick-p b{color:var(--yellow);font-weight:normal}
.nick-sub{font-size:12px;color:var(--dim);margin:6px 0 4px}
.nick-cand{display:flex;flex-wrap:wrap;gap:6px}
.nick-chip{padding:6px 12px;background:var(--bg);color:var(--text);box-shadow:0 0 0 2px var(--line);font-size:14px}
.nick-chip:hover{background:#2a2450;color:var(--yellow)}
.nick-re{margin:8px 0 0;padding:4px 6px;font-size:12px;color:var(--blue);text-decoration:underline}
.nick-guest{margin:10px 0 0;line-height:1.6}
.nick-err{min-height:1.4em;margin:6px 0;font-size:13px;color:var(--pink);white-space:pre-wrap}
.nick-act{display:flex;gap:8px;flex-wrap:wrap}
.nick-show{display:flex;align-items:center;gap:10px;justify-content:space-between;background:var(--bg);padding:6px 10px;box-shadow:inset 3px 3px 0 rgba(0,0,0,.5),0 0 0 3px var(--line)}
.nick-show b{font-weight:normal;font-size:17px;word-break:break-all}
.nick-show .btn{margin:0}
.nick-show .btn[disabled]{opacity:.45;cursor:not-allowed}
.nick-when{font-size:11px;color:var(--dim);margin-top:4px;line-height:1.5}
.nick-when:empty{display:none}
.nick-hint{font-size:11px;color:var(--dim);margin-top:4px}
.nick-hint.bad{color:var(--pink)}

/* ランキング */
.rk-box{width:min(640px,100%)}
.rk-note{font-size:12px;color:var(--dim);line-height:1.6;margin:4px 0 8px}
.rk-tabs{margin:6px 0}
.rk-tabs button{font-size:14px}
.rk-close{font-size:12px;color:var(--dim);margin:6px 2px;min-height:1.4em;line-height:1.5}
.rk-season{font-size:13px;color:var(--yellow);margin:6px 0 4px}
.rk-t td:nth-child(3),.rk-t th:nth-child(3){white-space:nowrap}
.rk-t td:nth-child(2){word-break:break-all}
.rk-more{margin:6px 0;padding:4px 8px;font-size:13px;color:var(--blue);text-decoration:underline}
.rk-me{margin-top:4px}
.rk-gap{text-align:center;color:var(--dim);line-height:1}
.rk-youare{font-size:14px;margin:6px 2px}
.rk-youare b{color:var(--yellow);font-weight:normal;font-size:18px}
.rk-guest{background:var(--panel2);padding:10px 12px;margin:10px 0;font-size:13px;line-height:1.7;box-shadow:0 0 0 3px var(--line)}
.rk-guest .muted{color:var(--dim);font-size:12px}

/* 見出しの保有現金 */
.head-cash{font-size:14px;margin:2px 0 4px}
.head-cash b{color:var(--yellow);font-weight:normal;font-size:17px}
.head-cash .est{font-size:11px;color:var(--dim);margin-left:6px}
.head-cash .est.short{color:var(--pink)}

/* 結果の共有 / 寄付の案内(並び: 順位 → 共有 → 広告 → もういちど) */
.share-box{margin:14px 4px 4px;text-align:center}
.share-box>.btn{min-width:220px}
.share-nick{display:flex;gap:6px;justify-content:center;align-items:center;font-size:12px;color:var(--dim);margin-top:4px}
.share-nick input{accent-color:var(--yellow);width:16px;height:16px}
.share-panel{margin-top:10px;background:var(--bg);box-shadow:0 0 0 3px var(--line);padding:8px}
.share-panel img{display:block;width:100%;height:auto;image-rendering:pixelated;box-shadow:0 0 0 3px var(--line)}
.share-actions{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:8px}
.share-actions .btn{text-decoration:none;color:#fff;font-size:14px;padding:6px 14px}
.donate{position:fixed;right:14px;bottom:14px;z-index:45;width:min(300px,calc(100vw - 28px));background:var(--panel2);padding:10px 12px;
  box-shadow:0 0 0 4px var(--line),inset 3px 3px 0 rgba(255,255,255,.07);animation:donatein .45s steps(6)}
@keyframes donatein{from{transform:translateX(120%);opacity:0}}
.donate-t{font-size:15px;color:var(--yellow);padding-right:24px}
.donate-p{font-size:12px;color:var(--dim);margin:4px 0 8px;line-height:1.5}
.donate-x{position:absolute;right:4px;top:2px;width:30px;height:30px;font-size:18px;line-height:1;color:var(--dim)}
.donate-x:hover{color:var(--text)}
.donate .btn{margin:0 6px 0 0}
.donate-done{display:inline-block;font-size:11px;color:var(--dim);margin-top:6px}
#result.donate-on{padding-bottom:150px}
@media(prefers-reduced-motion:reduce){.donate{animation:none}}

/* 役職の指名(指名券) */
.lobby-grid{grid-template-columns:minmax(320px,440px) minmax(300px,600px)}
@media(max-width:820px){.lobby-grid{grid-template-columns:1fr}}
.nom-acct{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.nom-chip{font-size:13px;padding:2px 8px}
.nom-chip b{color:var(--yellow);font-weight:normal;font-size:16px}
.nom-buy{font-size:12px;padding:3px 8px;background:var(--bg);color:var(--dim);box-shadow:0 0 0 2px var(--line)}
.nom-buy.hot{color:var(--text);box-shadow:0 0 0 2px var(--hi)}
.nom-buy small,.nom-mode small,.nom-sec small,.nom-seat small,.nom-sec-h small{font-size:10px;color:var(--dim);margin-left:2px}
.nom-list{display:flex;flex-direction:column;gap:8px}
.nom-card{display:flex;gap:10px;align-items:flex-start;background:var(--bg2);padding:8px;box-shadow:0 0 0 3px var(--line)}
.nom-card.on{box-shadow:0 0 0 3px var(--yellow);background:#2f2860}
.nom-ico{flex:none;width:36px;padding-top:2px}
.nom-ico canvas{display:block;margin:0 auto}
.nom-body{flex:1;min-width:0}
.nom-card .nm{font-size:16px}
.nom-card .rare{font-size:10px;margin-left:6px;padding:0 5px;background:var(--hi);color:#fff;vertical-align:2px}
.nom-card .desc{font-size:12px;color:var(--dim);line-height:1.5;margin-bottom:2px}
.nom-card .nom-modes{margin-top:4px}
.nom-seat{display:block;font-size:12px;margin:2px 0 4px;color:var(--text)}
.nom-modes{display:flex;gap:6px;flex-wrap:wrap}
.nom-mode{flex:1;min-width:110px;padding:6px 6px;background:var(--bg);box-shadow:0 0 0 2px var(--line);font-size:13px;text-align:center}
.nom-mode:hover:not(:disabled){background:#2a2450}
.nom-mode.on{background:var(--hi);color:#fff;box-shadow:0 0 0 2px var(--yellow)}
.nom-mode:disabled{opacity:.45;cursor:not-allowed}
.nom-why{font-size:11px;color:var(--orange);margin-top:4px;line-height:1.5}
.nom-second{margin-top:10px}
.nom-sec-h{font-size:13px;margin-bottom:4px}
.nom-secs{display:flex;gap:6px;flex-wrap:wrap}
.nom-sec{flex:1;min-width:90px;padding:6px;background:var(--bg);box-shadow:0 0 0 2px var(--line);font-size:13px}
.nom-sec.on{background:var(--hi);color:#fff;box-shadow:0 0 0 2px var(--yellow)}
.nom-sec:disabled{opacity:.35;cursor:not-allowed}
.nom-note{font-size:11px;color:var(--dim);line-height:1.7;margin-top:10px}
.nom-note b{color:var(--text);font-weight:normal}
.nom-result{list-style:none;margin:10px 0 0;padding:8px 10px;background:var(--bg);box-shadow:0 0 0 2px var(--line);font-size:13px;line-height:1.7}
.nom-result li{margin:2px 0;margin-left:0}
@media(max-width:760px){.nom-mode{min-width:96px}.nom-card{padding:6px}}

/* 情報タブ / 送信状態 */
.infobody{min-height:150px}
.policy-grid{grid-template-columns:repeat(3,1fr)}
.sync{font-size:11px;padding:1px 8px;background:var(--bg);box-shadow:0 0 0 2px var(--line);white-space:nowrap;align-self:flex-start}
.sync.ok{color:var(--green)} .sync.dim{color:var(--dim)} .sync.busy{color:var(--yellow)}

/* 言語セレクタ(タイトル / ニックネーム / ランキング / ロビー / 準備中だけ) */
.langbox{position:fixed;top:8px;right:8px;z-index:40}
.langbox select{font:inherit;font-size:12px;color:var(--text);background:var(--panel);border:0;box-shadow:0 0 0 2px var(--line);padding:4px 6px;cursor:pointer}
body[data-screen="match"] .langbox,body[data-screen="game"] .langbox,body[data-screen="result"] .langbox{display:none}