:root{
  --bg:#0e121a; --panel:#19212d; --panel2:#243040; --text:#eff6ff;
  --muted:#9aa8b7; --accent:#1fc7e8; --red:#ff3d49; --green:#45e58f; --yellow:#ffc24a;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Yu Gothic","Meiryo",system-ui,sans-serif}
button{font:inherit;color:var(--text);background:var(--panel2);border:1px solid #34455a;border-radius:12px;padding:12px 16px;cursor:pointer}
button:hover{filter:brightness(1.08)}
button:disabled{opacity:.55;cursor:default}
#app{max-width:1280px;margin:0 auto;padding:22px}
.screen{display:none;min-height:760px}
.screen.active{display:block}
.hero{text-align:center;padding:34px 0 14px}
.hero h1{font-size:64px;letter-spacing:.08em;color:var(--accent);margin:0}
.hero p{color:var(--muted);font-size:19px}
.card{background:var(--panel);border:1px solid #29384b;border-radius:18px;padding:26px}
.menu-card{max-width:560px;margin:20px auto}
.card h2{text-align:center;margin-top:0}
.mode-label{text-align:center;color:var(--yellow);font-size:26px;font-weight:700;margin:18px}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mode-btn.selected{outline:3px solid var(--accent);background:#243b45}
.primary{background:var(--accent);color:#061116;font-weight:800;border:none}
#startBtn{width:100%;font-size:24px;margin-top:14px}
.bottom-actions{display:flex;gap:12px;justify-content:center;margin-top:16px}
.menu-credit{text-align:center;color:var(--muted);font-size:13px;letter-spacing:.04em;margin-top:28px;padding-bottom:8px}
.wide{max-width:920px;margin:55px auto}
.tutorial-demo{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:28px 0}
.demo-answer{outline:3px solid var(--accent)}
.statusbar{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:8px;align-items:stretch}
.statusbar>div{background:var(--panel);border-radius:12px;padding:10px;text-align:center}
.statusbar span{display:block;color:var(--muted);font-size:13px}
.statusbar strong{display:block;font-size:22px;margin-top:3px}
.statusbar>div:nth-child(2) strong{color:var(--yellow)}
.statusbar>div:nth-child(4) strong{color:var(--accent);font-size:16px}
.compact{padding:8px 14px}
.question{text-align:center;font-size:21px;margin:15px 0}
.areas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.area{background:var(--panel);border:1px solid #29384b;border-radius:14px;padding:8px}
.cells{display:grid;grid-template-columns:repeat(5,1fr);gap:2px}
.cell{aspect-ratio:1.15/1;display:flex;align-items:center;justify-content:center;font-size:clamp(24px,2.6vw,38px);line-height:1;border:2px solid transparent;border-radius:4px}
.cell.odd{border-color:var(--red);color:#fff}
.area-btn{width:100%;font-size:25px;font-weight:800;margin-top:7px;padding:8px}
.result{
  text-align:center;
  font-size:34px;
  font-weight:900;
  min-height:56px;
  margin:12px 0 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  letter-spacing:.04em;
}
.result-top{
  background:var(--panel);
  border:1px solid #29384b;
  border-radius:12px;
}
.result:empty{
  background:transparent;
  border-color:transparent;
}
.result.correct{color:var(--green)}
.result.incorrect,.result.timeout{color:var(--red)}
.end-card{text-align:center}
.score-big span{display:block;color:var(--muted)}
.score-big strong{font-size:72px;color:var(--accent)}
.score-sub{font-size:20px;margin:10px}
.rank-display{font-size:28px;font-weight:900;margin:4px 0 14px;letter-spacing:.04em}
.rank-display-sub{font-size:22px;margin-top:-4px}
.rank-yellow{color:#ffd700}
.rank-yellowgreen{color:#adff2f}
.rank-pink{color:#ff69b4}
.rank-orange{color:#ff9800}
.rank-lightblue{color:#66ccff}
.end-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.history-list{display:grid;gap:8px;margin:20px 0}
.history-max{text-align:center;font-size:22px;font-weight:700;color:var(--red);padding:8px 12px 12px}
.history-max strong{font-size:28px;color:var(--red)}
.history-max-rank{font-size:22px;font-weight:900;margin-top:6px;letter-spacing:.04em}
.history-list > .backMenu{margin:2px auto 12px;display:block}
.history-row{display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--panel2);padding:12px;border-radius:10px}
.empty{color:var(--muted);text-align:center;padding:28px}
@media(max-width:760px){
  #app{padding:10px}
  .screen{min-height:auto}
  .hero h1{font-size:46px}
  .areas{grid-template-columns:1fr}
  .statusbar{grid-template-columns:1fr 1fr}
  .statusbar .compact{grid-column:1/-1}
  .cell{font-size:clamp(24px,7vw,34px)}
  .wide{margin:20px auto}
}


/* ===== iPhone / App Store build ===== */
html, body {
  width: 100%;
  min-height: 100%;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}
body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}
button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* iPhone portrait: menus remain comfortable and game board stays 2 x 2. */
@media (max-width: 760px) {
  #app { padding: 8px; max-width: none; }
  .hero { padding: 18px 0 8px; }
  .hero h1 { font-size: 42px; }
  .hero p { margin: 8px 0; font-size: 16px; }
  .card { padding: 18px; }
  .menu-card { margin: 10px auto; }
  .bottom-actions { margin-top: 10px; }
  .menu-credit { margin-top: 20px; font-size: 12px; padding-bottom: 4px; }

  #gameScreen .statusbar {
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
  }
  #gameScreen .statusbar > div {
    padding: 5px 2px;
    min-width: 0;
  }
  #gameScreen .statusbar span {
    font-size: 9px;
    white-space: nowrap;
  }
  #gameScreen .statusbar strong {
    font-size: 15px;
  }
  #gameScreen .statusbar > div:nth-child(4) strong {
    font-size: 11px;
  }
  #gameScreen .statusbar .compact {
    grid-column: 1 / -1;
    padding: 5px;
    font-size: 12px;
  }

  #gameScreen .result {
    min-height: 34px;
    margin: 5px 0 2px;
    font-size: 22px;
  }
  #gameScreen .question {
    font-size: 14px;
    margin: 5px 0;
  }

  /* Important: keep A/B/C/D visible together on iPhone. */
  #gameScreen .areas {
    grid-template-columns: 1fr 1fr;
    gap: 5px;
  }
  #gameScreen .area {
    padding: 4px;
    border-radius: 9px;
  }
  #gameScreen .cells {
    gap: 0;
  }
  #gameScreen .cell {
    aspect-ratio: 1 / 1;
    font-size: clamp(22px, 7.2vw, 30px);
    border-width: 2px;
  }
  #gameScreen .area-btn {
    margin-top: 3px;
    padding: 5px;
    font-size: 18px;
    min-height: 34px;
  }
}

/* Landscape iPhone: use the wider screen efficiently. */
@media (max-height: 500px) and (orientation: landscape) {
  #app { padding: 5px 8px; }
  #gameScreen .statusbar {
    grid-template-columns: repeat(4, 1fr) auto;
    gap: 4px;
  }
  #gameScreen .statusbar .compact {
    grid-column: auto;
    padding: 4px 10px;
  }
  #gameScreen .result {
    min-height: 28px;
    font-size: 20px;
    margin: 3px 0;
  }
  #gameScreen .question {
    margin: 2px 0 4px;
    font-size: 13px;
  }
  #gameScreen .areas {
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
  }
  #gameScreen .cell {
    font-size: clamp(20px, 3vw, 30px);
  }
  #gameScreen .area-btn {
    font-size: 16px;
    min-height: 28px;
    padding: 3px;
  }
}

/* ===== Tutorial: real game-screen preview ===== */
.tutorial-wrap{max-width:920px;margin:20px auto}
.tutorial-head{display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:10px}
.tutorial-head h2{margin:0;color:var(--accent);letter-spacing:.08em}
.tutorial-step{position:absolute;right:4px;color:var(--muted);font-weight:700}
.tutorial-page{display:none}
.tutorial-page.active{display:block}
.tutorial-message{background:var(--panel);border:1px solid #29384b;border-radius:14px;padding:14px 16px;margin-bottom:10px;text-align:center}
.tutorial-message strong{display:block;color:var(--yellow);font-size:21px;margin-bottom:5px}
.tutorial-message span{color:var(--text);font-size:15px}
.tutorial-game{border:2px solid #34455a;border-radius:14px;padding:8px;background:var(--bg);pointer-events:none}
.tutorial-statusbar{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.tutorial-statusbar>div{background:var(--panel);border-radius:9px;padding:6px 3px;text-align:center}
.tutorial-statusbar span{display:block;color:var(--muted);font-size:10px;white-space:nowrap}
.tutorial-statusbar strong{display:block;font-size:17px;margin-top:2px}
.tutorial-statusbar>div:nth-child(2) strong{color:var(--yellow)}
.tutorial-statusbar>div:nth-child(4) strong{color:var(--accent);font-size:13px}
.tutorial-score-focus>div:first-child{outline:3px solid var(--yellow)}
.tutorial-result{height:32px;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:900;margin:3px 0}
.tutorial-result.correct{color:var(--green)}
.tutorial-question{text-align:center;font-size:14px;margin:3px 0 6px}
.tutorial-areas{grid-template-columns:1fr 1fr;gap:5px}
.tutorial-areas .area{padding:4px;border-radius:9px}
.tutorial-areas .cells{gap:0}
.tutorial-areas .cell{aspect-ratio:1/1;font-size:clamp(20px,5vw,29px);border-width:2px}
.tutorial-areas .area-btn{margin-top:3px;padding:4px;font-size:17px;min-height:30px}
.tutorial-areas .area-btn.tutorial-answer{outline:3px solid var(--accent);background:#243b45;box-shadow:0 0 0 4px rgba(31,199,232,.15)}
.tutorial-nav{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:10px}
.tutorial-nav button{padding:9px}
@media(max-width:760px){
  .tutorial-wrap{margin:5px auto}
  .tutorial-head{margin-bottom:5px}
  .tutorial-message{padding:9px 8px;margin-bottom:6px}
  .tutorial-message strong{font-size:17px;margin-bottom:3px}
  .tutorial-message span{font-size:12px;line-height:1.35;display:block}
  .tutorial-game{padding:5px}
  .tutorial-statusbar>div{padding:4px 1px}
  .tutorial-statusbar span{font-size:8px}
  .tutorial-statusbar strong{font-size:14px}
  .tutorial-statusbar>div:nth-child(4) strong{font-size:10px}
  .tutorial-result{height:24px;font-size:18px;margin:1px 0}
  .tutorial-question{font-size:11px;margin:1px 0 3px}
  .tutorial-areas .cell{font-size:clamp(20px,6.6vw,27px)}
  .tutorial-areas .area-btn{font-size:15px;min-height:27px;padding:2px}
  .tutorial-nav{margin-top:6px}
  .tutorial-nav button{padding:7px 4px;font-size:13px}
}


/* ===== SPECIAL mode ===== */
.mode-btn[hidden]{display:none}
.special-mode-btn{color:var(--yellow);font-weight:900}
.cell.memory-hidden{color:transparent !important;text-shadow:none !important}
.menu-credit{cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}