/* ===== カラーブロック / レトロ携帯機風カラー落ちものパズル ===== */
:root{
  --shell:#d9b34a;        /* 筐体カラー（ポップな黄色系GB） */
  --shell-dark:#b88e2a;
  --shell-light:#ecca6a;
  --bezel:#2b2b33;
  --screen-frame:#5a5a66;
  --lcd-bg:#0f1020;       /* カラー化したダーク液晶 */
  --lcd-grid:#1c1d33;
  --ink:#e8e8f0;
  --accent:#e8508a;       /* GBブランドの赤紫 */
  --a-btn:#d23a6a;
  --b-btn:#d23a6a;
  --bg:#1a1a22;
  font-synthesis:none;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}

body{
  background:
    radial-gradient(circle at 50% 0%, #2a2a3a 0%, var(--bg) 60%);
  color:var(--ink);
  font-family:"DotGothic16", "Hiragino Kaku Gothic ProN", sans-serif;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:12px;
  gap:14px;
  overscroll-behavior:none;
}

/* ===== ヘッダー ===== */
.site-header{text-align:center;margin-top:4px;}
.site-title{
  font-family:"Press Start 2P", monospace;
  font-size:clamp(20px,6vw,34px);
  letter-spacing:1px;
  background:linear-gradient(90deg,#00e5ff,#ffe600,#ff3b8d,#00ff95);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 0 rgba(0,0,0,.3);
}
.site-tagline{font-size:13px;opacity:.7;margin-top:8px;letter-spacing:2px;}

/* ===== 広告枠 ===== */
.ad-slot{
  width:100%;max-width:728px;min-height:90px;
  display:flex;align-items:center;justify-content:center;
  border:1px dashed #555;border-radius:8px;
  background:rgba(255,255,255,.03);
  color:#777;font-size:12px;letter-spacing:1px;
}
.ad-bottom{min-height:100px;max-width:336px;}

/* ===== ゲームボーイ筐体 ===== */
.stage{width:100%;display:flex;justify-content:center;}
.gameboy{
  width:min(420px,96vw);
  background:linear-gradient(160deg,var(--shell-light),var(--shell) 35%,var(--shell-dark));
  border-radius:18px 18px 60px 18px;
  padding:18px 18px 22px;
  box-shadow:
    0 18px 40px rgba(0,0,0,.5),
    inset 0 2px 0 rgba(255,255,255,.4),
    inset 0 -6px 12px rgba(0,0,0,.25);
  user-select:none;
}

/* ブランド表記 */
.gb-brand{display:flex;align-items:center;gap:8px;padding:2px 4px 10px;}
.gb-power{color:#d23a6a;font-size:9px;}
.gb-brand-name{font-family:"Press Start 2P",monospace;font-size:11px;color:#3a3320;}
.gb-brand-sub{font-style:italic;font-size:11px;color:#6b5e34;margin-left:auto;font-family:Georgia,serif;}

/* スクリーンのベゼル */
.gb-screen-bezel{
  background:linear-gradient(160deg,#4a4a55,var(--bezel));
  border-radius:10px 10px 24px 10px;
  padding:14px 16px 18px;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.6);
}
.gb-screen-label{
  text-align:center;color:#8a8aa0;font-size:8px;letter-spacing:2px;
  margin-bottom:8px;font-family:"Press Start 2P",monospace;
}
.gb-screen-label::before,.gb-screen-label::after{content:"▌";color:var(--accent);margin:0 6px;}

/* 液晶（カラー化） */
.gb-screen{
  position:relative;
  display:flex;gap:8px;
  background:var(--lcd-bg);
  border:2px solid #05060f;
  border-radius:4px;
  padding:8px;
  aspect-ratio:auto;
}
#board{
  height:auto;width:60%;max-width:240px;
  background:var(--lcd-bg);
  border-right:2px solid #05060f;
  image-rendering:pixelated;
}
.gb-side{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0;}
.panel-block{text-align:center;}
.panel-label{
  font-family:"Press Start 2P",monospace;font-size:8px;color:#6df0c8;
  letter-spacing:1px;margin-bottom:3px;
}
#next,#hold{width:100%;height:auto;background:rgba(255,255,255,.03);border-radius:3px;}
.panel-value{
  font-family:"Press Start 2P",monospace;font-size:12px;color:#ffe600;
  margin-bottom:6px;word-break:break-all;
}
.stats .panel-value:last-of-type{margin-bottom:0;}

/* オーバーレイ */
.gb-overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,8,20,.86);backdrop-filter:blur(2px);
  border-radius:4px;text-align:center;padding:16px;
}
.gb-overlay.hidden{display:none;}
.overlay-title{
  font-family:"Press Start 2P",monospace;font-size:22px;line-height:1.5;
  background:linear-gradient(90deg,#00e5ff,#ff3b8d);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:14px;
}
.overlay-msg{font-size:14px;color:var(--ink);margin-bottom:16px;min-height:18px;}
.overlay-btn{
  font-family:"Press Start 2P",monospace;font-size:12px;
  background:var(--accent);color:#fff;border:none;
  padding:12px 20px;border-radius:8px;cursor:pointer;
  box-shadow:0 4px 0 #a52c5e;transition:transform .05s, box-shadow .05s;
}
.overlay-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #a52c5e;}
.overlay-hint{font-size:10px;opacity:.55;margin-top:14px;line-height:1.6;}

/* ===== コントロール ===== */
.gb-controls{display:flex;justify-content:space-between;align-items:center;padding:22px 6px 6px;}

/* 十字キー */
.dpad{display:grid;grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px);}
.dpad-btn{
  background:#222;color:#888;border:none;font-size:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.15),0 2px 4px rgba(0,0,0,.4);
}
.dpad-btn:active{background:#111;color:#fff;}
.dpad .up{grid-area:1/2;border-radius:6px 6px 0 0;}
.dpad .left{grid-area:2/1;border-radius:6px 0 0 6px;}
.dpad .center{grid-area:2/2;background:#1a1a1a;cursor:default;box-shadow:inset 0 0 4px rgba(0,0,0,.6);}
.dpad .center::after{content:"";width:10px;height:10px;border-radius:50%;background:#333;}
.dpad .right{grid-area:2/3;border-radius:0 6px 6px 0;}
.dpad .down{grid-area:3/2;border-radius:0 0 6px 6px;}

/* A / B ボタン */
.ab-buttons{display:flex;gap:16px;transform:rotate(-20deg);align-items:flex-end;}
.ab-btn{
  width:48px;height:48px;border-radius:50%;border:none;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#e8709a,var(--a-btn));
  color:#fff;font-family:"Press Start 2P",monospace;font-size:14px;
  box-shadow:0 4px 0 #8e224a,inset 0 2px 2px rgba(255,255,255,.4);
}
.ab-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #8e224a;}
.ab-btn.b{margin-bottom:18px;}

/* START / SELECT */
.gb-startselect{display:flex;gap:18px;justify-content:center;padding:6px 0 4px;}
.ss-btn{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  background:none;border:none;cursor:pointer;color:#3a3320;
}
.ss-knob{
  width:42px;height:13px;border-radius:8px;
  background:linear-gradient(180deg,#555,#2b2b33);
  transform:rotate(-20deg);
  box-shadow:0 2px 3px rgba(0,0,0,.4),inset 0 1px 1px rgba(255,255,255,.2);
}
.ss-btn:active .ss-knob{background:#1a1a1a;}
.ss-text{font-family:"Press Start 2P",monospace;font-size:7px;letter-spacing:1px;}

/* スピーカー & サウンド */
.gb-bottom{display:flex;justify-content:space-between;align-items:flex-end;padding:14px 6px 0;}
.sound-toggle{
  font-family:"Press Start 2P",monospace;font-size:8px;
  background:#2b2b33;color:#6df0c8;border:none;border-radius:6px;
  padding:8px 10px;cursor:pointer;box-shadow:0 2px 3px rgba(0,0,0,.4);
}
.sound-toggle.off{color:#777;}
.gb-speaker{display:flex;gap:6px;transform:rotate(-20deg);}
.gb-speaker span{width:5px;height:34px;border-radius:3px;background:rgba(0,0,0,.25);box-shadow:inset 0 1px 2px rgba(0,0,0,.4);}

/* ===== 説明・フッター ===== */
.info{
  width:100%;max-width:680px;line-height:1.9;font-size:15px;
  background:rgba(255,255,255,.04);border-radius:12px;padding:22px 24px;
}
.info h2{font-family:"Press Start 2P",monospace;font-size:15px;color:#6df0c8;margin-bottom:14px;}
.info h3{font-size:16px;color:#ffe600;margin:18px 0 8px;}
.controls-list{list-style:none;display:flex;flex-direction:column;gap:6px;}
.controls-list li{padding-left:18px;position:relative;}
.controls-list li::before{content:"▸";position:absolute;left:0;color:var(--accent);}
.info b{color:#00e5ff;}
.small{font-size:12px;opacity:.6;margin-top:10px;}

.site-footer{text-align:center;font-size:12px;opacity:.6;line-height:1.8;padding:10px;}

/* ===== レスポンシブ ===== */
@media (max-width:430px){
  .dpad{grid-template-columns:repeat(3,36px);grid-template-rows:repeat(3,36px);}
  .ab-btn{width:44px;height:44px;}
  .gb-screen-label{font-size:7px;}
}

/* ===== パンくず ===== */
.crumbs{font-size:11px;opacity:.7;margin-bottom:8px;letter-spacing:1px;}
.crumbs a{color:#6df0c8;text-decoration:none;}
.crumbs a:hover{text-decoration:underline;}

/* ===== アフィリエイト枠 ===== */
.affiliate-box{
  width:100%;max-width:520px;
  background:rgba(255,255,255,.04);
  border:1px solid #34344a;border-radius:12px;
  padding:14px 16px;text-align:center;
}
.affiliate-label{font-size:10px;color:#8a8a99;letter-spacing:.18em;margin-bottom:8px;}
.aff-link{
  display:inline-flex;align-items:center;gap:14px;text-align:left;
  color:var(--ink);text-decoration:none;padding:6px 10px;border-radius:10px;
  transition:background .15s ease;
}
.aff-link:hover{background:rgba(255,255,255,.07);}
.aff-ico{font-size:30px;line-height:1;flex:0 0 auto;}
.aff-txt{display:flex;flex-direction:column;gap:4px;}
.aff-txt b{font-size:14px;color:#ffe600;}
.aff-txt small{font-size:12px;color:#9a9aad;line-height:1.5;}

/* ===== 他サービス回遊 ===== */
.others{
  width:100%;max-width:680px;
  background:rgba(255,255,255,.04);border-radius:12px;padding:22px 24px;
}
.others h2{font-family:"Press Start 2P",monospace;font-size:13px;color:#6df0c8;margin-bottom:8px;}
.others-lead{font-size:13px;opacity:.7;margin-bottom:14px;}
.others-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;}
.others-grid a{
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.05);border:1px solid #34344a;border-radius:10px;
  padding:10px 12px;color:var(--ink);text-decoration:none;
  transition:background .15s ease,border-color .15s ease;
}
.others-grid a:hover{background:rgba(255,255,255,.1);border-color:#4a4a66;}
.o-ico{font-size:22px;flex:0 0 auto;}
.o-txt{display:flex;flex-direction:column;gap:2px;}
.o-txt b{font-size:13px;}
.o-txt small{font-size:11px;opacity:.6;}

/* ===== フッターリンク ===== */
.footer-nav{display:flex;gap:16px;justify-content:center;margin-top:8px;}
.footer-nav a{color:#6df0c8;text-decoration:none;}
.footer-nav a:hover{text-decoration:underline;}