/* =====================================================================
   DigiGo ゲームUIレイヤー v5 「CMYKポップ」（#030-2: PM提示のリファレンスに全面変更）
   ---------------------------------------------------------------------
   白地 × シアン／マゼンタ／イエローの斜めストライプ、ハーフトーン、黒太枠に
   ハードシャドウ、斜めに切ったパネル、黄色の斜めボタン、黒リボンの見出し、
   丸アイコンのナビ。スマホ(縦)ではボタンナビを画面下に、PCでは上部タブ＋
   最大幅コンテナに整える。main.css の後に読み込む上書きレイヤー。
   動きは transform/opacity のみ、prefers-reduced-motion で停止。
   ===================================================================== */

:root {
  /* パレット差し替え（main.css の --dg-* を丸ごと上書き） */
  --dg-lime:        #FFE500;   /* 主ボタン＝イエロー */
  --dg-lime-light:  #FFF176;
  --dg-lime-dark:   #111111;   /* 「強調テキスト」用途は黒に寄せる */
  --dg-lime-pale:   #F4F7FB;
  --dg-black:       #FFFFFF;   /* 旧「黒カード」→白パネル */
  --dg-black-deep:  #111111;
  --dg-dark:        #FFFFFF;
  --dg-dark-mid:    #111111;   /* 旧ボーダー→黒 */
  --dg-dark-light:  #333333;
  --dg-white:       #111111;   /* 旧「白文字」→黒文字 */
  --dg-text-sub:    #5a5f6a;
  --dg-yellow:      #FFE500;
  --dg-orange:      #FF8A00;
  --dg-red:         #E5004F;
  --dg-cyan:        #2CD5F0;
  --dg-magenta:     #FF2E8E;
  --dg-star-gold:   #FFC400;
  --dg-radius:      6px;
  --dg-cut:         0px;
  --dg-shadow:      6px 6px 0 #111;
  --dg-glow-lime:   0 0 0 rgba(0,0,0,0);
  --dg-glow-cyan:   0 0 0 rgba(0,0,0,0);
  --dg-bg-gradient: #ffffff;

  --pop-ink:     #111111;
  --pop-paper:   #FFFFFF;
  --pop-cyan:    #2CD5F0;
  --pop-magenta: #FF2E8E;
  --pop-yellow:  #FFE500;
  --pop-cyan-pale:    #DDF7FC;
  --pop-magenta-pale: #FFE1EE;
  --pop-yellow-pale:  #FFF6B3;
  --pop-shadow:  6px 6px 0 var(--pop-ink);
  --pop-shadow-sm: 4px 4px 0 var(--pop-ink);
  --pop-skew:    -12deg;

  --dg-ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --dg-ease-out: cubic-bezier(.22, 1, .36, 1);
  --dg-t-fast: .14s;
  --dg-t-mid:  .3s;
  --dg-t-slow: .55s;
}

/* ---------- テクスチャ（ハーフトーン・斜めストライプ） ---------- */
.pop-halftone,
#login-screen,
#student-dashboard,
#center-panel,
#mission-creator {
  background-color: var(--pop-paper);
  background-image:
    radial-gradient(circle, rgba(17,17,17,.10) 1.2px, transparent 1.4px),
    linear-gradient(115deg, var(--pop-cyan-pale) 0 14%, transparent 14% 30%, var(--pop-magenta-pale) 30% 38%, transparent 38% 62%, var(--pop-yellow-pale) 62% 70%, transparent 70% 86%, var(--pop-cyan-pale) 86%);
  background-size: 9px 9px, 100% 100%;
}

/* ---------- キーフレーム ---------- */
@keyframes dgPopIn { 0%{transform:translateY(16px) scale(.9);opacity:0} 60%{transform:translateY(-3px) scale(1.03);opacity:1} 100%{transform:none;opacity:1} }
@keyframes dgSlideUp { from{transform:translateY(12px);opacity:0} to{transform:none;opacity:1} }
@keyframes dgFloat { 0%,100%{transform:translateY(0) rotate(-1.5deg)} 50%{transform:translateY(-7px) rotate(1.5deg)} }
@keyframes dgWiggle { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-12deg)} 40%{transform:rotate(10deg)} 60%{transform:rotate(-6deg)} 80%{transform:rotate(4deg)} }
@keyframes dgBlink { 0%,92%,100%{transform:scaleY(1)} 95%{transform:scaleY(.1)} }
@keyframes dgStarSpin { 0%{transform:scale(0) rotate(-180deg);opacity:0} 60%{transform:scale(1.4) rotate(15deg);opacity:1} 80%{transform:scale(.92) rotate(-6deg)} 100%{transform:scale(1) rotate(0);opacity:1} }
@keyframes dgConfetti { 0%{transform:translate(0,0) rotate(0) scale(1);opacity:1} 100%{transform:translate(var(--cx),var(--cy)) rotate(720deg) scale(.4);opacity:0} }
@keyframes dgBounceTab { 0%{transform:scale(1)} 40%{transform:scale(1.1,.9)} 70%{transform:scale(.97,1.04)} 100%{transform:scale(1)} }
@keyframes dgCountFlash { 0%{color:var(--pop-magenta)} 100%{color:var(--pop-ink)} }
@keyframes dgToastIn { 0%{transform:translate(-50%,24px) scale(.9);opacity:0} 60%{transform:translate(-50%,-6px) scale(1.03);opacity:1} 100%{transform:translate(-50%,0) scale(1);opacity:1} }
@keyframes dgBreath { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
@keyframes dgStripeMove { from{background-position:0 0} to{background-position:60px 0} }
@keyframes dgTagPop { 0%{transform:scale(0) rotate(-20deg)} 70%{transform:scale(1.2) rotate(4deg)} 100%{transform:scale(1) rotate(0)} }
@keyframes dgDots { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%{content:'...'} }

/* ---------- 基本 ---------- */
html, body { background: var(--pop-paper); color: var(--pop-ink); }
/* hidden属性がクラスのdisplay指定(.login-mascot{display:block}等)に負けないようにする */
[hidden] { display: none !important; }
/* 旧L字コーナー飾りは無効化（下の白パネルルールで角アクセントに差し替える） */
.dg-corner::before, .dg-corner::after { border: none; width: 0; height: 0; opacity: 1; }
.dg-cut-panel { clip-path: none; }

/* 白パネル（黒枠＋ハードシャドウ＋角のCMYアクセント） */
.pop-panel,
.login-card,
.dash-stat-card,
.world-card,
.spot-card,
.result-card,
.dg-run-dialog,
.mc-panel,
.mycode-card,
.quest-card,
.mission-world-locked {
  position: relative;
  background: var(--pop-paper);
  border: 3px solid var(--pop-ink);
  border-radius: 4px;
  box-shadow: var(--pop-shadow);
  filter: none;
  clip-path: none;
  color: var(--pop-ink);
}
.pop-panel::before, .login-card::before, .dash-stat-card::before,
.world-card::before, .spot-card::before, .result-card::before, .dg-run-dialog::before, .mc-panel::before {
  content: '';
  position: absolute;
  /* main.cssの .dg-corner::before(top:-1px;left:-1px) が残ると左上に描かれて
     グラデーションの向きが合わなくなるため、left/bottom を明示的に解除する（#031追加2） */
  top: 0; right: 0; left: auto; bottom: auto;
  width: 46px; height: 46px;
  background: linear-gradient(225deg, var(--pop-cyan) 0 30%, var(--pop-magenta) 30% 46%, transparent 46%);
  pointer-events: none;
  z-index: 0;
}
.pop-panel::after, .login-card::after, .dash-stat-card::after,
.world-card::after, .spot-card::after, .result-card::after, .dg-run-dialog::after, .mc-panel::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; top: auto; right: auto;
  width: 46px; height: 46px;
  background: linear-gradient(45deg, var(--pop-magenta) 0 30%, var(--pop-cyan) 30% 46%, transparent 46%);
  pointer-events: none;
  z-index: 0;
}
.pop-panel > *, .login-card > *, .dash-stat-card > *, .world-card > *, .spot-card > *, .result-card > *, .dg-run-dialog > *, .mc-panel > * { position: relative; z-index: 1; }

/* 黒リボン見出し（斜めに切った黒帯） */
.pop-ribbon,
.panel-header,
.dash-section-title,
.mission-world-title,
.dg-run-dialog-title,
.mc-header,
.result-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pop-ink);
  color: #fff;
  font-weight: 900;
  padding: 8px 28px 8px 20px;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  background-image: radial-gradient(circle, rgba(255,255,255,.18) 1px, transparent 1.3px);
  background-size: 7px 7px;
  border: none;
  margin: 0 0 14px;
  text-shadow: none;
}
.dash-section-title::before { display: none; }
.dash-section-title, .mission-world-title { font-size: 18px; }
.dash-section-title rt { color: var(--pop-cyan); }

/* 黄色の斜めボタン（リファレンスの OK / 受け取る） */
.pop-btn,
.dg-btn-primary,
.login-submit-btn,
.world-card-play-btn,
.spot-card-play-btn,
.dg-create-mission-btn,
.mc-btn-next,
.mc-btn-submit,
.dg-resume-btn,
#chat-send,
.mycode-load-btn,
.lesson-footer .dg-btn-primary {
  /* 文字はまっすぐのまま、背景の板(::before)だけを斜めにする */
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--pop-ink);
  font-weight: 900;
  font-family: inherit;
  letter-spacing: .04em;
  box-shadow: none;
  filter: none;
  clip-path: none;
  margin-left: 8px; margin-right: 8px;
  transition: transform var(--dg-t-fast) var(--dg-ease-out);
  cursor: pointer;
  --pop-btn-bg: var(--pop-yellow);
  --pop-btn-shadow: 4px 4px 0 var(--pop-ink);
}
.pop-btn::before, .dg-btn-primary::before, .login-submit-btn::before, .world-card-play-btn::before, .spot-card-play-btn::before,
.dg-create-mission-btn::before, .mc-btn-next::before, .mc-btn-submit::before, .dg-resume-btn::before, #chat-send::before, .mycode-load-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pop-btn-bg);
  background-image: linear-gradient(115deg, transparent 0 55%, rgba(255,255,255,.5) 55% 62%, transparent 62%);
  border: 3px solid var(--pop-ink);
  box-shadow: var(--pop-btn-shadow);
  transform: skewX(var(--pop-skew));
  transition: transform var(--dg-t-fast) var(--dg-ease-out), box-shadow var(--dg-t-fast), background-color var(--dg-t-fast);
  animation: none;
  left: 0; width: auto; height: auto;
}
.pop-btn:hover, .dg-btn-primary:hover, .login-submit-btn:hover, .world-card-play-btn:hover, .spot-card-play-btn:hover, .dg-create-mission-btn:hover, .dg-resume-btn:hover, #chat-send:hover, .mycode-load-btn:hover {
  transform: translate(-2px, -2px);
  --pop-btn-shadow: 6px 6px 0 var(--pop-ink);
  filter: none;
  color: var(--pop-ink);
  box-shadow: none;
}
.pop-btn:active, .dg-btn-primary:active, .login-submit-btn:active, .world-card-play-btn:active, .spot-card-play-btn:active, .dg-create-mission-btn:active, .dg-resume-btn:active, #chat-send:active {
  transform: translate(3px, 3px);
  --pop-btn-shadow: 1px 1px 0 var(--pop-ink);
}
.dg-btn-primary:disabled, .world-card-play-btn:disabled {
  --pop-btn-bg: #cfd3da; color: #6b7280; transform: none; cursor: default; box-shadow: none; filter: none;
}
/* 白い斜めボタン（キャンセル／戻る／閉じる） */
.pop-btn-ghost,
.dg-run-dialog-cancel-btn,
.mc-btn-back,
.mycode-new-btn,
.mycode-delete-btn,
.panel-back-to-world,
.builder-toolbar button:not(.dg-btn-primary),
#builder-flow-dialog-quit {
  position: relative;
  isolation: isolate;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--pop-ink);
  font-weight: 900;
  font-family: inherit;
  box-shadow: none;
  margin-left: 6px; margin-right: 6px;
  transition: transform var(--dg-t-fast) var(--dg-ease-out);
  cursor: pointer;
  --pop-btn-bg: var(--pop-paper);
  --pop-btn-shadow: 3px 3px 0 var(--pop-ink);
}
.pop-btn-ghost::before, .dg-run-dialog-cancel-btn::before, .mc-btn-back::before, .mycode-new-btn::before, .mycode-delete-btn::before,
.panel-back-to-world::before, .builder-toolbar button:not(.dg-btn-primary)::before, #builder-flow-dialog-quit::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: var(--pop-btn-bg);
  border: 2px solid var(--pop-ink);
  box-shadow: var(--pop-btn-shadow);
  transform: skewX(var(--pop-skew));
  transition: background-color var(--dg-t-fast), box-shadow var(--dg-t-fast);
}
.pop-btn-ghost:hover, .dg-run-dialog-cancel-btn:hover, .mc-btn-back:hover, .mycode-new-btn:hover, .mycode-delete-btn:hover, .panel-back-to-world:hover {
  --pop-btn-bg: var(--pop-cyan-pale); color: var(--pop-ink); transform: translate(-2px, -2px); --pop-btn-shadow: 5px 5px 0 var(--pop-ink); background: transparent; box-shadow: none;
}
.mycode-delete-btn:hover { --pop-btn-bg: var(--pop-magenta-pale); }
#builder-flow-select { border: 2px solid var(--pop-ink); background: #fff; color: var(--pop-ink); font-weight: 700; box-shadow: 3px 3px 0 var(--pop-ink); border-radius: 0; }

/* ステータスタグ（NEW / CLEAR） */
.pop-tag {
  position: absolute; top: -12px; left: -6px;
  display: inline-block;
  padding: 3px 14px;
  font-size: 12px; font-weight: 900; letter-spacing: .08em; color: #fff;
  background: var(--pop-cyan);
  border: 2px solid var(--pop-ink);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  box-shadow: 3px 3px 0 var(--pop-ink);
  animation: dgTagPop .45s var(--dg-ease-pop) both;
  z-index: 2;
}

/* ---------- ブランディング（#031: Adminで差し替えるロゴ／マスコット／ログイン背景） ---------- */
.brand-logo.has-image { background: transparent !important; -webkit-text-stroke: 0; padding: 0; clip-path: none; color: transparent; }
.brand-logo-img { display: block; max-height: 64px; max-width: 260px; object-fit: contain; margin: 0 auto; }
.dash-logo .brand-logo-img { max-height: 36px; max-width: 160px; margin: 0; }
.brand-mascot-img { object-fit: contain; }
.login-mascot.brand-mascot-img { width: 130px; height: 110px; }
.dash-mascot-mini.brand-mascot-img { width: 36px; height: 32px; }
.login-bg { position: absolute; inset: 0; z-index: 0; display: none; background-size: cover; background-position: center; }
.login-bg.active { display: block; }
.login-bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.login-bg.active::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--login-bg-dim, .2)); }
#login-screen > .login-card { z-index: 1; }

/* ---------- ログイン ---------- */
#login-screen { align-items: center; justify-content: center; position: relative; }
#login-screen::before, #login-screen::after { display: none; }
.login-card { max-width: 420px; padding: 40px 32px 34px; animation: dgPopIn var(--dg-t-slow) var(--dg-ease-pop) both; gap: 14px; }
.login-mascot { width: 116px; animation: dgFloat 2.8s ease-in-out infinite; filter: drop-shadow(4px 4px 0 var(--pop-ink)); }
.login-mascot circle:nth-of-type(2), .login-mascot circle:nth-of-type(3) { transform-origin: center; transform-box: fill-box; animation: dgBlink 4.2s ease-in-out infinite; }
.login-logo {
  font-size: 40px; color: var(--pop-ink); text-shadow: none;
  background: linear-gradient(90deg, var(--pop-cyan), var(--pop-magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1.5px var(--pop-ink);
  animation: dgPopIn .7s var(--dg-ease-pop) .1s both;
}
.login-input {
  background: #fff; border: 3px solid var(--pop-ink); border-radius: 0; color: var(--pop-ink); box-shadow: var(--pop-shadow-sm);
  height: 54px; font-size: 17px; font-weight: 700; text-align: center;
}
.login-input::placeholder { color: #9aa0ab; font-weight: 700; }
.login-input:focus { border-color: var(--pop-ink); box-shadow: 4px 4px 0 var(--pop-cyan); transform: none; }
.login-submit-btn { height: 56px; font-size: 20px; margin-top: 6px; }
.login-error { color: var(--pop-magenta); background: var(--pop-magenta-pale); border: 2px solid var(--pop-magenta); border-radius: 0; font-weight: 700; animation: dgWiggle .5s ease; }

/* ---------- ダッシュボード ---------- */
#student-dashboard { flex-direction: column; }
/* 上部ステータスバー（名前／星／王冠／クリア）＝リファレンスのヘッダー */
.dash-header {
  height: auto; min-height: 56px; padding: 6px 16px;
  background: var(--pop-paper);
  border-bottom: 3px solid var(--pop-ink);
  gap: 10px;
}
.dash-header::after { height: 4px; bottom: -7px; background: repeating-linear-gradient(115deg, var(--pop-cyan) 0 12px, var(--pop-magenta) 12px 24px, var(--pop-yellow) 24px 36px, #fff 36px 40px); box-shadow: none; }
.dash-logo {
  font-size: 22px; text-shadow: none; color: var(--pop-ink);
  background: var(--pop-ink); color: #fff; padding: 4px 16px 4px 12px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.dash-mascot-mini { width: 34px; height: 30px; margin: 0 4px 0 6px; flex-shrink: 0; animation: dgFloat 3s ease-in-out infinite; filter: drop-shadow(2px 2px 0 var(--pop-ink)); }
.dash-room-title { color: var(--pop-ink); font-size: 16px; text-align: left; flex: 1; }
.dash-room-title rt { color: var(--pop-magenta); font-size: 9px; }
.dash-logout-btn { color: var(--pop-ink); border: 2px solid var(--pop-ink); border-radius: 50%; width: 40px; height: 40px; background: #fff; box-shadow: 3px 3px 0 var(--pop-ink); transition: transform var(--dg-t-fast) var(--dg-ease-pop); }
.dash-logout-btn:hover { background: var(--pop-magenta-pale); color: var(--pop-magenta); transform: scale(1.08); }

.dash-body { padding: 22px 20px 100px; }
.dash-body > * { max-width: 1080px; margin-left: auto; margin-right: auto; }

/* ステータスカード → 横並びのステータス帯 */
.dash-status-cards { gap: 14px; margin-bottom: 26px; }
.dash-stat-card {
  min-width: 170px; padding: 14px 18px 16px; text-align: left;
  border-left: 3px solid var(--pop-ink);
  animation: dgPopIn var(--dg-t-slow) var(--dg-ease-pop) both;
  transition: transform var(--dg-t-fast) var(--dg-ease-pop);
}
.dash-stat-card:nth-child(1){animation-delay:.05s} .dash-stat-card:nth-child(2){animation-delay:.15s} .dash-stat-card:nth-child(3){animation-delay:.25s}
.dash-stat-card:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--pop-ink); }
.dash-stat-icon { justify-content: flex-start; margin-bottom: 2px; filter: none; }
.dash-stat-value { color: var(--pop-ink); font-size: 2rem; }
.dash-stat-value.dg-count-flash { animation: dgCountFlash .9s ease-out; }
.dash-stat-label { color: var(--pop-ink); font-size: 12px; font-weight: 700; margin: 2px 0 8px; }
.dash-stat-label rt { color: var(--pop-cyan); }
.dg-gauge { background: #fff; border: 2px solid var(--pop-ink); border-radius: 0; height: 14px; box-shadow: none; }
.dg-gauge-fill { background: var(--pop-yellow); border-radius: 0; }
.dg-gauge-fill::after { background-image: linear-gradient(-45deg, rgba(17,17,17,.12) 25%, transparent 25%, transparent 50%, rgba(17,17,17,.12) 50%, rgba(17,17,17,.12) 75%, transparent 75%); }

/* タブ → 斜めタブ（リファレンスの「ウィークリー／チャレンジ」） */
.dash-mode-tabs { gap: 10px; border-bottom: none; padding: 4px 8px 12px; margin-bottom: 18px; overflow-x: auto; }
.dash-mode-tab {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center;
  min-height: 48px; padding: 10px 26px 10px 22px; margin: 0 6px; border-radius: 0;
  border: none; background: transparent; color: var(--pop-ink);
  font-size: 15px; font-weight: 900; box-shadow: none;
  transition: transform var(--dg-t-fast) var(--dg-ease-out);
  --pop-btn-bg: #fff; --pop-btn-shadow: 4px 4px 0 var(--pop-ink);
}
.dash-mode-tab::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--pop-btn-bg); border: 3px solid var(--pop-ink); box-shadow: var(--pop-btn-shadow);
  transform: skewX(var(--pop-skew)); transition: background-color var(--dg-t-fast), box-shadow var(--dg-t-fast);
}
.dash-mode-tab .dg-tab-ico { margin-right: 6px; transition: transform var(--dg-t-mid) var(--dg-ease-pop); }
.dash-mode-tab:hover { transform: translate(-2px,-2px); --pop-btn-shadow: 6px 6px 0 var(--pop-ink); --pop-btn-bg: var(--pop-yellow-pale); color: var(--pop-ink); background: transparent; }
.dash-mode-tab:hover .dg-tab-ico { transform: scale(1.3) rotate(-10deg); }
.dash-mode-tab:active { transform: translate(3px,3px); --pop-btn-shadow: 1px 1px 0 var(--pop-ink); }
.dash-mode-tab.active { --pop-btn-bg: var(--pop-cyan); color: var(--pop-ink); background: transparent; animation: dgBounceTab .45s var(--dg-ease-pop); }

#dash-mission-section:not(.hidden), #dash-miniquest-section:not(.hidden), #dash-openworld-section:not(.hidden), #dash-challenge-section:not(.hidden), #dash-creative-section:not(.hidden) { animation: dgSlideUp var(--dg-t-mid) var(--dg-ease-out) both; }

.mission-world-block { margin-bottom: 36px; }
.dash-mymissions-title { margin-top: 34px; }
/* ステータスカードは小さいので角アクセントも小さく */
.dash-stat-card::before, .dash-stat-card::after { width: 26px; height: 26px; }
.mission-world-meta, .dash-openworld-note, .mission-world-unlock-condition, .dash-comingsoon { color: var(--pop-ink); font-weight: 700; }
.world-card-progress { height: 14px; border: 2px solid var(--pop-ink); border-radius: 0; background: #fff; }
.world-card-progress-bar { background: var(--pop-yellow); border-radius: 0; transition: width 1s var(--dg-ease-out); }
.mission-world-locked { padding: 18px 20px; opacity: 1; background: #f1f3f6; }

/* カード（ステージ／ミニクエスト） */
.world-grid, .spot-grid { gap: 22px 20px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.world-grid > *, .spot-grid > * { animation: dgPopIn var(--dg-t-slow) var(--dg-ease-pop) both; }
.world-grid > *:nth-child(1), .spot-grid > *:nth-child(1){animation-delay:.04s}
.world-grid > *:nth-child(2), .spot-grid > *:nth-child(2){animation-delay:.10s}
.world-grid > *:nth-child(3), .spot-grid > *:nth-child(3){animation-delay:.16s}
.world-grid > *:nth-child(4), .spot-grid > *:nth-child(4){animation-delay:.22s}
.world-grid > *:nth-child(5), .spot-grid > *:nth-child(5){animation-delay:.28s}
.world-grid > *:nth-child(n+6), .spot-grid > *:nth-child(n+6){animation-delay:.34s}
.world-card, .spot-card {
  padding: 20px 18px 18px;
  overflow: visible;
  transition: transform var(--dg-t-fast) var(--dg-ease-pop), box-shadow var(--dg-t-fast);
  background-image: linear-gradient(115deg, transparent 0 78%, var(--pop-cyan-pale) 78% 86%, transparent 86% 90%, var(--pop-magenta-pale) 90%);
}
.world-card:not(.locked):hover, .spot-card:hover { transform: translate(-3px,-3px) rotate(-.5deg); box-shadow: 9px 9px 0 var(--pop-ink); filter: none; border-color: var(--pop-ink); }
.world-card-icon {
  width: 60px; height: 60px; border-radius: 0; clip-path: none;
  background: #fff; border: 3px solid var(--pop-ink); box-shadow: 3px 3px 0 var(--pop-ink);
  transition: transform var(--dg-t-mid) var(--dg-ease-pop);
}
.world-card:not(.locked):hover .world-card-icon { transform: rotate(-6deg) scale(1.06); }
.world-card-title, .spot-card-title { color: var(--pop-ink); font-size: 18px; font-weight: 900; }
.world-card-subtitle, .spot-card-desc { color: var(--dg-text-sub); font-size: 13px; }
.world-card-meta { color: var(--pop-ink); font-size: 16px; letter-spacing: 3px; }
.world-card-play-btn, .spot-card-play-btn { width: calc(100% - 12px); margin: 6px 6px 0; height: 52px; font-size: 18px; border-radius: 0; }
.world-card-play-btn::after, .spot-card-play-btn::after { content: none; }
.world-card.locked { opacity: 1; filter: none; background: #eef0f4; color: #7b8190; box-shadow: 4px 4px 0 #9aa0ab; border-color: #9aa0ab; }
.world-card.locked::before, .world-card.locked::after { display: none; }
.world-card.locked .world-card-title { color: #7b8190; }
.world-card.locked .world-card-icon { border-color: #9aa0ab; box-shadow: 3px 3px 0 #9aa0ab; filter: grayscale(1); }
.world-card-badge { border: 2px dashed #9aa0ab; border-radius: 0; color: #5a5f6a; font-weight: 700; background: #fff; }
.world-card.locked:hover .world-card-badge { animation: dgWiggle .6s ease; }
/* CLEAR / つぎはここ タグ */
.world-card.cleared::before, .world-card.cleared.dg-corner::before {
  content: 'CLEAR'; display: inline-block; width: auto; height: auto;
  top: -12px; left: -6px; right: auto; bottom: auto;
  padding: 3px 14px; font-size: 12px; font-weight: 900; letter-spacing: .08em; color: #fff;
  background: var(--pop-cyan); border: 2px solid var(--pop-ink);
  box-shadow: 3px 3px 0 var(--pop-ink); animation: dgTagPop .45s var(--dg-ease-pop) both; z-index: 2; opacity: 1;
}
.world-card.next-up::before, .world-card.next-up.dg-corner::before {
  content: 'まずはここから！'; display: inline-block; width: auto; height: auto;
  top: -12px; left: -6px; right: auto; bottom: auto;
  padding: 3px 14px; font-size: 12px; font-weight: 900; color: var(--pop-ink);
  background: var(--pop-yellow); border: 2px solid var(--pop-ink);
  box-shadow: 3px 3px 0 var(--pop-ink); animation: dgTagPop .45s var(--dg-ease-pop) both, dgBreath 1.6s ease-in-out 1s infinite; z-index: 2; opacity: 1;
}
.world-card.next-up { border-color: var(--pop-magenta); box-shadow: 6px 6px 0 var(--pop-magenta); }
.world-card.cleared .world-card-title, .world-card.next-up .world-card-title { padding-right: 0; }

/* ミニクエストのフィルタ → 斜めチップ */
.spot-filter-tabs { gap: 10px 12px; }
.spot-filter-tab {
  position: relative; isolation: isolate;
  min-height: 38px; padding: 6px 16px; margin: 0 4px; border-radius: 0;
  border: none; background: transparent; color: var(--pop-ink);
  font-size: 13px; font-weight: 900; box-shadow: none;
  transition: transform var(--dg-t-fast) var(--dg-ease-out), color var(--dg-t-fast);
  --pop-btn-bg: #fff; --pop-btn-shadow: 3px 3px 0 var(--pop-ink);
}
.spot-filter-tab::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--pop-btn-bg); border: 2px solid var(--pop-ink); box-shadow: var(--pop-btn-shadow);
  transform: skewX(var(--pop-skew)); transition: background-color var(--dg-t-fast);
}
.spot-filter-tab:hover { --pop-btn-bg: var(--pop-yellow-pale); color: var(--pop-ink); transform: translate(-1px,-1px); background: transparent; border-color: transparent; }
.spot-filter-tab.active { --pop-btn-bg: var(--pop-magenta); color: #fff; background: transparent; border-color: transparent; animation: dgBounceTab .4s var(--dg-ease-pop); }
.spot-card-subject { border: 2px solid var(--pop-ink); border-radius: 0; padding: 3px 12px; font-size: 12px; color: var(--pop-ink); background: var(--pop-yellow); clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%); }
.spot-card-subject.subject-math { background: var(--pop-cyan); }
.spot-card-subject.subject-japanese { background: var(--pop-magenta); color: #fff; }
.spot-card-subject.subject-science { background: #8CE28C; }
.spot-card-subject.subject-social { background: #C79EFF; }
.spot-card-difficulty { color: var(--pop-magenta); font-size: 14px; font-weight: 900; }
.dg-create-mission-btn { border: 3px solid var(--pop-ink); padding: 10px 22px; font-size: 15px; min-height: 46px; }
.dash-spots-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.panel-loading { color: var(--pop-ink); font-weight: 700; font-size: 14px; }
.panel-loading::after { content: ''; display: inline-block; width: 1.4em; text-align: left; animation: dgDots 1.2s steps(4,end) infinite; }
#student-dashboard .panel-loading { color: var(--pop-ink); }

/* ---------- ゲーム画面 ---------- */
#left-panel { background: #000; }
.divider { background: var(--pop-ink); width: 6px; }
.divider:hover, .divider.dragging { background: var(--pop-magenta); }
#center-panel { border-left: 3px solid var(--pop-ink); }

/* 右メニュー → 白い縦ナビ・丸アイコン（リファレンスの下部ナビをPC向けに縦置き） */
#right-menu { width: 72px; background: var(--pop-paper); border-left: 3px solid var(--pop-ink); padding: 10px 0; gap: 8px; }
#right-menu::before { display: none; }
.menu-btn {
  width: 60px; height: 64px; border-radius: 0; border: none; background: transparent; color: var(--pop-ink);
  flex-direction: column; gap: 3px; transition: transform var(--dg-t-fast) var(--dg-ease-pop);
}
.menu-btn svg {
  width: 44px; height: 44px; padding: 9px; box-sizing: border-box;
  background: #fff; border: 3px solid var(--pop-ink); border-radius: 50%;
  box-shadow: 3px 3px 0 var(--pop-ink);
  transition: transform var(--dg-t-mid) var(--dg-ease-pop), background var(--dg-t-fast);
}
.menu-btn:hover { background: transparent; color: var(--pop-ink); transform: translateY(-2px); }
.menu-btn:hover svg { transform: rotate(-8deg) scale(1.08); background: var(--pop-cyan-pale); }
.menu-btn:active { transform: translateY(2px); }
.menu-btn.active { background: transparent; box-shadow: none; }
.menu-btn.active svg { background: var(--pop-yellow); }
.menu-btn .tooltip {
  display: block; position: static; transform: none; background: var(--pop-ink); color: #fff;
  border: none; padding: 1px 6px; font-size: 9px; line-height: 1.15; white-space: normal; text-align: center;
  max-width: 64px; clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%);
}
.menu-btn.active .tooltip { background: var(--pop-magenta); }
.menu-btn .tooltip .tt-ruby { display: none; }
.tooltip { z-index: auto; }

/* 「ワールドにもどる」 */
.dg-game-overlay { background: rgba(255,255,255,.35); backdrop-filter: blur(1px); }
.dg-resume-btn {
  padding: 18px 48px 14px; font-size: 24px; border-width: 4px;
  /* #032: 要素側の四角い影が斜めの板と二重に見えていた → 影は板(::before)側の --pop-btn-shadow のみ */
  box-shadow: none; outline: none;
  --pop-btn-shadow: 8px 8px 0 var(--pop-ink);
  animation: dgBreath 1.8s ease-in-out infinite;
  color: var(--pop-ink); text-shadow: none;
}
.dg-resume-btn:focus, .dg-resume-btn:focus-visible { outline: none; box-shadow: none; }
.dg-resume-btn:focus-visible { --pop-btn-shadow: 8px 8px 0 var(--pop-cyan); }
.dg-resume-btn rt { color: var(--pop-ink); }
.dg-resume-btn:hover { animation-play-state: paused; }
.dg-resume-btn:disabled { animation: none; opacity: .6; }
/* 選択中／テスト中バナー */
.dg-select-banner, .dg-test-banner {
  background: var(--pop-paper); border: 3px solid var(--pop-ink); box-shadow: var(--pop-shadow-sm); clip-path: none;
}
.dg-select-banner-msg { color: var(--pop-ink); }
.dg-select-banner-msg rt { color: var(--pop-magenta); }
.dg-select-cancel-hint { border-color: var(--pop-ink); color: var(--pop-ink); }

/* 結果トースト */
.result-overlay { max-width: 380px; }
.result-card { padding: 22px 30px 20px; animation: dgPopIn var(--dg-t-slow) var(--dg-ease-pop); text-align: center; }
.result-title { font-size: 26px; margin: 0 auto 14px; display: inline-flex; }
.result-stars { font-size: 46px; gap: 12px; }
.result-stars .star { animation: dgStarSpin .6s var(--dg-ease-pop) forwards; }
.result-stars .star.filled { color: var(--pop-yellow); -webkit-text-stroke: 2px var(--pop-ink); text-shadow: 3px 3px 0 var(--pop-ink); }
.result-stars .star.empty { color: #d9dde5; -webkit-text-stroke: 2px var(--pop-ink); }
.result-score { color: var(--pop-ink); }
.result-crown { color: var(--pop-magenta); text-shadow: none; }
.result-time { color: var(--dg-text-sub); }
.dg-confetti { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.dg-confetti i { position: absolute; top: 45%; left: 50%; width: 10px; height: 14px; border: 2px solid var(--pop-ink); background: var(--c, var(--pop-yellow)); animation: dgConfetti 1.3s var(--dg-ease-out) forwards; animation-delay: var(--d, 0s); }

/* トースト */
.pl-guide-toast, .dg-simple-toast {
  background: var(--pop-paper); color: var(--pop-ink); border: 3px solid var(--pop-ink); border-radius: 0;
  box-shadow: var(--pop-shadow); font-weight: 900; animation: dgToastIn .45s var(--dg-ease-pop);
}

/* ---------- ゲーム内メッセージのポップアップ（#032: Luanti の HUD/チャット文字をやめ PWA 側で表示） ---------- */
.dg-game-toasts { position: fixed; top: 58%; left: 50%; transform: translate(-50%, -50%); z-index: 950; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; width: min(560px, calc(100vw - 24px)); }
.dg-game-toast {
  --toast-accent: var(--pop-cyan);
  position: relative; max-width: 100%; padding: 14px 26px 14px 30px; background: var(--pop-paper); color: var(--pop-ink);
  border: 3px solid var(--pop-ink); box-shadow: var(--pop-shadow); font-weight: 900; font-size: 20px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word; animation: dgGameToastIn .4s var(--dg-ease-pop) both;
}
/* #032: dgToastIn は自分を translateX(-50%) で中央寄せする要素用。コンテナで中央寄せ済みのこの要素に使うと最初左にずれて出るため専用にする */
@keyframes dgGameToastIn { 0%{transform:translateY(-16px) scale(.92);opacity:0} 60%{transform:translateY(4px) scale(1.03);opacity:1} 100%{transform:none;opacity:1} }
.dg-game-toast::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--toast-accent); }
.dg-game-toast.chat { font-weight: 700; font-size: 14px; --toast-accent: var(--pop-yellow); }
.dg-game-toast.title { font-size: 28px; padding: 18px 40px; background: var(--pop-ink); color: #fff; --toast-accent: var(--pop-yellow); letter-spacing: .04em; }
.dg-game-toast.title::after { content: ""; position: absolute; right: 0; top: 0; width: 34px; height: 34px; background: linear-gradient(225deg, var(--pop-cyan) 0 30%, var(--pop-magenta) 30% 46%, transparent 46%); }
.dg-game-toast.leaving { animation: dgToastOut .3s ease-in both; }
@keyframes dgToastOut { to { opacity: 0; transform: translateY(-10px) scale(.96); } }
/* 確認モーダル（confirm/alert の置き換え） */
.dg-modal-overlay { z-index: 320; }
.dg-modal-text { margin: 0 24px 20px; font-size: 16px; font-weight: 700; line-height: 1.7; white-space: pre-wrap; color: var(--pop-ink); }
.dg-modal-ok.danger { --pop-btn-bg: var(--pop-magenta); color: #fff; }
.dg-btn-primary.dg-modal-ok.danger::before { background: var(--pop-magenta); }

/* ---------- パネル（マイコード／せいせき／しつもん／ヒント／せってい／レッスン） ---------- */
.panel-header {
  display: flex; height: auto; min-height: 48px; padding: 6px 14px; margin: 0;
  background: var(--pop-paper); clip-path: none; border-bottom: 3px solid var(--pop-ink);
  background-image: none;
}
.panel-header::after { display: none; }
.panel-header h2 {
  color: #fff; font-size: 15px; background: var(--pop-ink); padding: 6px 22px 6px 14px;
  clip-path: polygon(8px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  background-image: radial-gradient(circle, rgba(255,255,255,.18) 1px, transparent 1.3px); background-size: 7px 7px;
}
.panel-body, .chat-body, .settings-body, .lesson-body, .hint-quest-tabs, .lesson-footer { background: transparent; color: var(--pop-ink); }
.mycode-card { padding: 14px 16px; margin-bottom: 18px; }
.mycode-card-name { color: var(--pop-ink); font-weight: 900; }
.mycode-card-meta { color: var(--dg-text-sub); }
.mycode-new-btn { padding: 6px 16px; font-size: 12px; border-width: 2px; box-shadow: 3px 3px 0 var(--pop-ink); }
.mycode-load-btn, .mycode-delete-btn { border-width: 2px; box-shadow: 3px 3px 0 var(--pop-ink); font-weight: 900; }
.chat-bubble { border: 2px solid var(--pop-ink); border-radius: 0; box-shadow: 3px 3px 0 var(--pop-ink); color: var(--pop-ink); }
.chat-bubble.bot { background: var(--pop-cyan-pale); }
.chat-bubble.user { background: var(--pop-yellow-pale); }
.chat-input-row { background: transparent; border-top: 3px solid var(--pop-ink); }
.chat-input-row input, .mc-input, .dg-run-dialog-input, .mc-field-input, .builder-field-row input, .builder-field-row textarea, .builder-field-row select {
  background: #fff; border: 2px solid var(--pop-ink); border-radius: 0; color: var(--pop-ink); box-shadow: 3px 3px 0 var(--pop-ink);
}
.chat-input-row input:focus, .mc-input:focus, .dg-run-dialog-input:focus { border-color: var(--pop-ink); box-shadow: 3px 3px 0 var(--pop-cyan); outline: none; }
#chat-send { padding: 8px 18px; }
.hint-tab-btn, .tab-btn { border: 2px solid var(--pop-ink); background: #fff; color: var(--pop-ink); font-weight: 900; border-radius: 0; }
.hint-tab-btn.active, .tab-btn.active { background: var(--pop-yellow); color: var(--pop-ink); border-bottom-color: var(--pop-ink); }
.blockly-tabs { background: var(--pop-paper); border-bottom: 3px solid var(--pop-ink); height: 40px; gap: 6px; padding: 4px 6px; }
.tab-btn { flex: 1; font-size: 13px; }
.hint-step, .quest-card, .settings-row { background: #fff; border: 2px solid var(--pop-ink); box-shadow: 3px 3px 0 var(--pop-ink); color: var(--pop-ink); border-radius: 0; }
.settings-value { background: var(--pop-cyan-pale); color: var(--pop-ink); border: 2px solid var(--pop-ink); }
.danger-btn { background: var(--pop-magenta); color: #fff; border: 3px solid var(--pop-ink); box-shadow: var(--pop-shadow-sm); font-weight: 900; }
.lesson-body table th { background: var(--pop-ink); color: #fff; }
.panel-back-to-world { padding: 6px 16px; font-size: 13px; border-width: 2px; box-shadow: 3px 3px 0 var(--pop-ink); }
.panel-back-to-world:hover { background: var(--pop-yellow); }

/* Tキー／クイズ／NPCダイアログ／確認モーダル */
/* #032追加: PM指摘「背景はワールドを暗いオーバーレイで見せた方が分かりやすい」→ 紙テクスチャをやめ半透明の黒に */
.dg-run-dialog-overlay { background: rgba(8, 8, 16, .58); background-image: none; backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
.dg-run-dialog { padding: 0 0 26px; min-width: 320px; max-width: 560px; width: min(560px, calc(100vw - 32px)); }
/* #032追加: width:100% + 左右margin24px で枠からはみ出していた → ブロック幅は自動（margin分を引いた幅）にする */
.dg-run-dialog-input { display: block; width: calc(100% - 48px); max-width: none; }
.dg-run-dialog-title { display: flex; margin: -3px -3px 18px; padding: 10px 24px; font-size: 17px; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); }
.dg-run-dialog > *:not(.dg-run-dialog-title) { margin-left: 24px; margin-right: 24px; }
.dg-npc-dialog-question, .builder-flow-dialog-body { background: #f4f6f9; border: 2px solid var(--pop-ink); color: var(--pop-ink); box-shadow: none; }
.dg-run-dialog-actions { gap: 16px; }
.dg-run-dialog-cancel-btn { padding: 10px 22px; }
#builder-flow-dialog-ok { padding: 10px 28px; }
#builder-flow-dialog-quit { padding: 10px 18px; font-size: 14px; }

/* ミッション作成ウィザード */
.mc-panel { padding: 0 0 18px; }
.mc-header { display: flex; justify-content: space-between; margin: -3px -3px 12px; padding: 10px 22px; clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); }
.mc-header > span { color: #fff; }
.mc-close-btn { color: #fff; background: transparent; border: none; font-size: 22px; width: 40px; height: 40px; cursor: pointer; }
.mc-progress { background: #fff; border: 2px solid var(--pop-ink); height: 12px; margin: 0 18px 14px; }
.mc-progress-fill { background: var(--pop-yellow); }
.mc-body, .mc-footer { padding-left: 18px; padding-right: 18px; }
.mc-label { color: var(--pop-ink); font-weight: 900; }
.mc-radio-group label { color: var(--pop-ink); font-weight: 700; }
.mc-template-card, .mc-item-card { background: #fff; border: 3px solid var(--pop-ink); color: var(--pop-ink); box-shadow: var(--pop-shadow-sm); border-radius: 0; transition: transform var(--dg-t-fast) var(--dg-ease-pop); }
.mc-template-card:hover { transform: translate(-2px,-2px); background: var(--pop-yellow-pale); }
.mc-template-card.selected, .mc-template-card.active { background: var(--pop-cyan); }
.mc-template-icon { display: inline-block; transition: transform var(--dg-t-mid) var(--dg-ease-pop); }
.mc-template-card:hover .mc-template-icon { transform: scale(1.3) rotate(-10deg); }
.mc-add-btn { border: 2px solid var(--pop-ink); background: var(--pop-yellow); color: var(--pop-ink); font-weight: 900; box-shadow: 3px 3px 0 var(--pop-ink); border-radius: 0; }
.mc-confirm { background: #f4f6f9; border: 2px solid var(--pop-ink); color: var(--pop-ink); }
.mc-confirm-note { color: var(--pop-magenta); font-weight: 700; }
.mc-btn-next, .mc-btn-submit { padding: 12px 28px; font-size: 16px; }
.mc-btn-back { padding: 12px 22px; font-size: 15px; }
.mc-status-draft { color: var(--dg-text-sub); }

/* ビルダー（管理者向け・最低限） */
.builder-toolbar button:not(.dg-btn-primary), #builder-flow-select { padding: 6px 14px; font-size: 13px; border-width: 2px; box-shadow: 3px 3px 0 var(--pop-ink); background: #fff; }
.builder-sidebar { background: var(--pop-paper); border-right: 3px solid var(--pop-ink); }
.builder-node-item { background: #fff; border: 2px solid var(--pop-ink); color: var(--pop-ink); font-weight: 900; box-shadow: 3px 3px 0 var(--pop-ink); border-radius: 0; }
.builder-canvas-wrap { background: var(--pop-paper); }

/* ---------- レスポンシブ ---------- */
/* PC/タブレット横: 3〜4列グリッド、ダッシュボード最大幅 */
@media (min-width: 1200px) {
  .world-grid, .spot-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}
/* スマホ縦: タブを画面下の丸アイコンナビに */
@media (max-width: 768px) {
  .dash-body { padding: 16px 12px 110px; }
  .dash-status-cards { gap: 8px; }
  .dash-stat-card { min-width: 0; flex: 1; padding: 10px 12px; }
  .dash-stat-value { font-size: 1.5rem; }
  .dash-mode-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    margin: 0; padding: 8px 8px 10px; gap: 0;
    background: var(--pop-paper); border-top: 3px solid var(--pop-ink);
    justify-content: space-around; overflow: visible;
  }
  .dash-mode-tab {
    flex: 1; min-height: 0; padding: 0; margin: 0; border: none; box-shadow: none; background: transparent; transform: none;
    flex-direction: column; gap: 4px; font-size: 10px;
  }
  .dash-mode-tab::before { display: none; }
  .dash-mode-tab .dg-tab-ico {
    margin: 0; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; background: #fff; border: 3px solid var(--pop-ink); border-radius: 50%; box-shadow: 3px 3px 0 var(--pop-ink);
  }
  .dash-mode-tab:hover, .dash-mode-tab:active { transform: none; box-shadow: none; background: transparent; }
  .dash-mode-tab.active { background: transparent; animation: none; }
  .dash-mode-tab.active .dg-tab-ico { background: var(--pop-yellow); transform: translateY(-4px); }
  /* 下部ナビでは短いラベル(data-short)に差し替える */
  .dash-mode-tab .dg-tab-label { font-size: 0; }
  .dash-mode-tab .dg-tab-label::after { content: attr(data-short); font-size: 10px; font-weight: 900; color: var(--pop-ink); }
  .dash-mode-tab.active .dg-tab-label::after { color: var(--pop-magenta); }
  #right-menu { width: auto; flex-direction: row; border-left: none; border-top: 3px solid var(--pop-ink); }
  .menu-btn { width: 56px; height: 62px; }
  .menu-btn svg { width: 40px; height: 40px; padding: 8px; }
  .world-card-play-btn, .spot-card-play-btn { height: 48px; font-size: 16px; }
}

/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- ゲーム画面のステータスバー（#032: PM提示イメージ＝黒半透過に名前・Lv・バー・スコア・時間） ---------- */
.dg-status-bar {
  position: fixed; top: 12px; left: 12px; z-index: 940; display: flex; align-items: center; gap: 12px;
  padding: 8px 14px 8px 10px; min-width: 300px; max-width: min(520px, calc(100vw - 24px));
  background: rgba(8, 10, 18, .72); color: #fff; border: 2px solid rgba(255,255,255,.18); border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  font-family: inherit; pointer-events: none; animation: dgPopIn .35s var(--dg-ease-pop) both;
}
.dg-status-bar[hidden] { display: none !important; }
.dg-status-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--pop-yellow); border: 3px solid var(--pop-ink);
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex: 0 0 auto;
}
.dg-status-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.dg-status-name { font-weight: 900; font-size: 13px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-status-lvrow { display: flex; align-items: center; gap: 8px; }
.dg-status-lv { font-weight: 900; font-size: 13px; color: var(--pop-yellow); white-space: nowrap; }
.dg-status-bar-track { flex: 1 1 auto; height: 10px; background: rgba(255,255,255,.18); border-radius: 5px; overflow: hidden; min-width: 90px; }
.dg-status-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--pop-cyan), #7ff3ff); border-radius: 5px; transition: width .4s var(--dg-ease-out); }
.dg-status-stats { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.dg-status-stat { display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: 15px; line-height: 1.2; }
.dg-status-stat .ico { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-size: 12px; border: 2px solid var(--pop-ink); }
.dg-status-stat .ico.score { background: var(--pop-yellow); color: var(--pop-ink); }
.dg-status-stat .ico.time { background: var(--pop-cyan); color: var(--pop-ink); }
.dg-status-stat #dg-status-time.warning { color: #ff5c7a; }
@media (max-width: 768px) {
  .dg-status-bar { top: 8px; left: 8px; min-width: 0; padding: 6px 10px 6px 8px; gap: 8px; }
  .dg-status-avatar { width: 32px; height: 32px; font-size: 16px; }
  .dg-status-stat { font-size: 13px; }
}

/* ---------- クリア演出（#032: 「クリアしたんだ！」と分かる大きなモーション） ---------- */
.dg-clear-fx {
  position: fixed; inset: 0; z-index: 960; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 5vh;
  pointer-events: none; overflow: hidden; animation: dgClearBg .35s ease-out both;
}
.dg-clear-fx[hidden] { display: none !important; }
.dg-clear-fx.leaving { animation: dgClearOut .45s ease-in both; }
@keyframes dgClearBg { from { background: rgba(0,0,0,0); } to { background: rgba(0,0,0,.28); } }
@keyframes dgClearOut { to { opacity: 0; } }
.dg-clear-stripes {
  position: absolute; inset: -20% -40%; transform: rotate(-12deg);
  background: repeating-linear-gradient(90deg, var(--pop-yellow) 0 44px, transparent 44px 88px, var(--pop-cyan) 88px 132px, transparent 132px 176px, var(--pop-magenta) 176px 220px, transparent 220px 264px);
  opacity: 0; animation: dgClearStripes 2.6s ease-out both;
}
@keyframes dgClearStripes { 0% { opacity: 0; transform: rotate(-12deg) translateX(-30%); } 15% { opacity: .2; } 60% { opacity: .14; } 100% { opacity: 0; transform: rotate(-12deg) translateX(30%); } }
.dg-clear-word {
  position: relative; font-size: clamp(56px, 10vw, 112px); font-weight: 900; line-height: 1; color: var(--pop-yellow);
  -webkit-text-stroke: 4px var(--pop-ink); paint-order: stroke fill; letter-spacing: .04em;
  text-shadow: 8px 8px 0 var(--pop-ink), 12px 12px 0 var(--pop-magenta);
  transform: scale(0) rotate(-12deg); animation: dgClearWord 1.6s cubic-bezier(.2, 1.4, .4, 1) .05s both;
}
/* 登場→少し揺れる を1本のアニメーションにまとめる（2本に分けると切替の瞬間に transform が抜けて一瞬消える） */
@keyframes dgClearWord { 0% { transform: scale(0) rotate(-12deg); opacity: 0; } 30% { transform: scale(1.25) rotate(4deg); opacity: 1; } 50% { transform: scale(1) rotate(-3deg); } 65% { transform: scale(1.05) rotate(-6deg); } 80% { transform: scale(1.05) rotate(0deg); } 100% { transform: scale(1) rotate(-3deg); opacity: 1; } }
.dg-clear-sub {
  position: relative; margin-top: 10px; padding: 8px 26px; font-size: clamp(18px, 3vw, 28px); font-weight: 900; color: #fff;
  background: var(--pop-ink); border: 3px solid var(--pop-ink); box-shadow: 4px 4px 0 var(--pop-cyan);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  opacity: 0; transform: translateY(20px); animation: dgClearSub .5s var(--dg-ease-pop) .45s both;
}
.dg-clear-sub:empty { display: none; }
@keyframes dgClearSub { to { opacity: 1; transform: none; } }
.dg-clear-stars { position: relative; margin-top: 8px; display: flex; gap: 8px; font-size: clamp(32px, 5vw, 52px); line-height: 1; }
.dg-clear-stars span { display: inline-block; transform: scale(0); animation: dgTagPop .5s var(--dg-ease-pop) both; -webkit-text-stroke: 2px var(--pop-ink); paint-order: stroke fill; }
.dg-clear-stars span.on { color: var(--pop-yellow); text-shadow: 4px 4px 0 var(--pop-ink); }
.dg-clear-stars span.off { color: #cfd4dc; }
.dg-clear-confetti { position: absolute; inset: auto; left: 50%; top: 16vh; width: 0; height: 0; }

/* ---------- 「ワールドに戻る」の待ち時間表示（#032: 半透明で押せない状態は分かりにくい→回る矢印） ---------- */
.dg-resume-btn:disabled { opacity: 1; cursor: wait; }
.dg-resume-btn.loading { position: relative; color: transparent; }
.dg-resume-btn.loading rt { color: transparent; }
.dg-resume-btn.loading::after {
  /* 丸い矢印（↻）がくるくる回るローディング表示 */
  content: "↻"; position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px;
  display: flex; align-items: center; justify-content: center; font-size: 32px; line-height: 1; font-weight: 900; color: var(--pop-ink);
  animation: dgSpin .9s linear infinite;
}
@keyframes dgSpin { to { transform: rotate(360deg); } }

/* ---------- ボタンの板(::before)の位置固定（#032: PM指摘「ホバーで表示がおかしい」） ----------
   main.css の .dg-btn-primary:hover::before { left:130% }（旧デザインの光のスイープ）と
   .dg-resume-btn::before の resumeBtnShine が、板ごと右へ動かして文字だけ残していた。
   hover/active/disabled/focus のどの状態でも板は inset:0 のまま動かさない。 */
.dg-btn-primary:hover::before, .dg-btn-primary:active::before, .dg-btn-primary:focus::before, .dg-btn-primary:disabled::before,
.world-card-play-btn:hover::before, .world-card-play-btn:active::before, .world-card-play-btn:disabled::before,
.spot-card-play-btn:hover::before, .spot-card-play-btn:active::before,
.login-submit-btn:hover::before, .login-submit-btn:active::before,
.dg-create-mission-btn:hover::before, .mc-btn-next:hover::before, .mc-btn-submit:hover::before,
.dg-resume-btn:hover::before, .dg-resume-btn:active::before, .dg-resume-btn:disabled::before,
#chat-send:hover::before, .mycode-load-btn:hover::before {
  display: block; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto;
  animation: none; transform: skewX(var(--pop-skew)); opacity: 1;
}
.dg-btn-primary:hover, .dg-resume-btn:hover { filter: none; }
/* 無効時は板をグレーにするだけ（枠線は板側の1本のみ） */
.dg-btn-primary:disabled::before, .world-card-play-btn:disabled::before, .dg-resume-btn:disabled::before { background-image: none; }

/* ---------- #033 もちものタブ（所持アイテム・レベル・相棒） ---------- */
.dg-items-top { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; margin-bottom: 18px; }
@media (max-width: 768px) { .dg-items-top { grid-template-columns: 1fr; } }
.dg-level-card, .dg-companion-card { padding: 16px 18px; }
.dg-level-lv { font-size: 34px; font-weight: 900; color: var(--pop-ink); line-height: 1; margin-bottom: 8px; }
.dg-level-bar { height: 14px; background: #e6e9ef; border: 2px solid var(--pop-ink); overflow: hidden; }
.dg-level-bar > div { height: 100%; background: linear-gradient(90deg, var(--pop-cyan), #7ff3ff); transition: width .4s var(--dg-ease-out); }
.dg-level-bar.small { display: inline-block; vertical-align: middle; width: 120px; height: 10px; margin-left: 6px; }
.dg-level-meta { margin-top: 6px; font-size: 12px; font-weight: 700; color: #4b5563; }
.dg-companion-card { display: flex; gap: 14px; align-items: flex-start; }
.dg-companion-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--pop-yellow); border: 3px solid var(--pop-ink); display: flex; align-items: center; justify-content: center; font-size: 34px; flex: 0 0 auto; box-shadow: 3px 3px 0 var(--pop-ink); }
.dg-companion-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.dg-companion-name { font-weight: 900; font-size: 18px; display: flex; align-items: center; gap: 8px; }
.dg-companion-rename { padding: 2px 10px; font-size: 11px; }
.dg-companion-lv { font-weight: 900; color: var(--pop-ink); }
.dg-companion-bond { font-weight: 700; font-size: 13px; }
.dg-bond-hearts { color: var(--pop-magenta); letter-spacing: 2px; }
.dg-companion-feed { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.dg-feed-btn { padding: 8px 14px; font-size: 13px; }
.dg-companion-hint { font-size: 12px; color: #6b7280; font-weight: 700; }
.dg-items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.dg-items-empty { grid-column: 1 / -1; padding: 24px; text-align: center; font-weight: 700; color: #6b7280; background: #fff; border: 2px dashed var(--pop-ink); }
.dg-item-card { position: relative; background: #fff; border: 3px solid var(--pop-ink); box-shadow: 4px 4px 0 var(--pop-ink); padding: 14px 10px 10px; text-align: center; animation: dgPopIn .35s var(--dg-ease-pop) both; }
.dg-item-icon { font-size: 40px; line-height: 1; height: 48px; display: flex; align-items: center; justify-content: center; }
.dg-item-icon img { max-height: 48px; max-width: 48px; image-rendering: pixelated; }
.dg-item-name { margin-top: 8px; font-weight: 900; font-size: 14px; }
.dg-item-count { position: absolute; top: -10px; right: -8px; background: var(--pop-yellow); border: 2px solid var(--pop-ink); padding: 2px 8px; font-weight: 900; font-size: 12px; box-shadow: 2px 2px 0 var(--pop-ink); }
.dg-item-hint { margin-top: 6px; font-size: 11px; color: #6b7280; font-weight: 700; }
.dg-item-card.rarity-3 { border-color: var(--pop-cyan); }
.dg-item-card.rarity-4 { border-color: var(--pop-magenta); }
.dg-item-card.rarity-5 { border-color: #f59e0b; background: linear-gradient(180deg, #fff, #fff7d6); }


/* ---------- #035 ワールドスタジオ（管理者） ---------- */
.dg-studio-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.dg-studio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.dg-world-card { background: #fff; border: 3px solid var(--pop-ink); box-shadow: var(--pop-shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.dg-world-card h3 { margin: 0; font-size: 16px; font-weight: 900; display: flex; align-items: center; gap: 8px; }
.dg-world-card .dg-world-dir { font-family: ui-monospace, monospace; font-size: 12px; color: #6b7280; font-weight: 700; }
.dg-world-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.dg-world-badge { font-size: 11px; font-weight: 900; padding: 2px 8px; border: 2px solid var(--pop-ink); background: var(--pop-cyan-pale); }
.dg-world-badge.warn { background: var(--pop-yellow); }
.dg-world-usage { font-size: 12px; color: #374151; font-weight: 700; line-height: 1.5; }
.dg-world-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.dg-world-actions button { padding: 8px 12px; font-size: 13px; }
.dg-studio-form { background: #fff; border: 3px solid var(--pop-ink); box-shadow: var(--pop-shadow); padding: 14px 16px; margin-bottom: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; align-items: end; }
.dg-studio-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 900; }
.dg-studio-form input, .dg-studio-form select { padding: 8px 10px; border: 2px solid var(--pop-ink); background: #fff; font-family: inherit; font-size: 14px; }
/* ビルダー内タブ */
.builder-tabs { display: flex; gap: 6px; padding: 8px 12px 0; background: var(--pop-paper); border-bottom: 3px solid var(--pop-ink); }
.builder-tab { border: 2px solid var(--pop-ink); border-bottom: none; background: #fff; font-weight: 900; font-size: 13px; padding: 8px 14px; cursor: pointer; font-family: inherit; }
.builder-tab.active { background: var(--pop-yellow); }
.builder-pane { padding: 14px 16px; overflow: auto; height: 100%; box-sizing: border-box; }
.builder-pane.hidden { display: none !important; }
.builder-pane h3 { margin: 0 0 8px; font-size: 15px; font-weight: 900; }
.builder-pane .dg-pane-section { background: #fff; border: 2px solid var(--pop-ink); box-shadow: 3px 3px 0 var(--pop-ink); padding: 12px 14px; margin-bottom: 14px; }
.builder-pane .dg-pane-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; font-size: 13px; font-weight: 700; }
.builder-pane input, .builder-pane select { padding: 6px 10px; border: 2px solid var(--pop-ink); background: #fff; font-family: inherit; font-size: 13px; }
.builder-pane .dg-muted { color: #6b7280; font-size: 12px; font-weight: 700; }
.builder-pane table { width: 100%; border-collapse: collapse; font-size: 13px; }
.builder-pane th, .builder-pane td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #e5e7eb; }

/* #036: ワールド作成オプション・じぶんのワールド */
.dg-inline-label { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; }
.dg-inline-label select { padding: 2px 4px; border: 2px solid var(--pop-ink); background: #fff; font-family: inherit; font-size: 12px; font-weight: 900; }
.dash-section-sub { font-size: 16px; font-weight: 900; margin: 12px 0 8px; }
#dash-myworlds .dg-studio-form { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
#mc-world-select { width: 100%; margin-bottom: 6px; }
.mc-hint { font-size: 12px; opacity: 0.8; margin: 0 0 12px; }
.mc-grid-disabled { opacity: 0.35; pointer-events: none; }

/* #037追加: ディープリンク起動中はダッシュボードを見せず「起動しています」だけ表示 */
body.dg-deeplink.state-dashboard #student-dashboard { display: none !important; }
body.dg-deeplink.state-dashboard::after { content: '🎮 ワールドを 起動しています...'; position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--pop-paper, #fff); color: var(--pop-ink, #111); font-weight: 900; font-size: 20px; z-index: 9000; }

/* #038: スキン */
.dg-skin-section { margin: 4px 0 18px; }
.dg-skin-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.dg-skin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dg-skin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 10px; }
.dg-skin-card { background: #fff; border: 3px solid var(--pop-ink); box-shadow: 4px 4px 0 var(--pop-ink); padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.dg-skin-card.current { background: var(--pop-yellow-pale); border-color: var(--pop-ink); box-shadow: 4px 4px 0 var(--pop-magenta); }
.dg-skin-doll { width: 64px; height: 128px; image-rendering: pixelated; }
.dg-skin-title { font-weight: 900; font-size: 14px; }
.dg-skin-comment { font-size: 11px; color: #b91c1c; }
.dg-skin-btns { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.dg-skin-btns button { font-size: 12px; padding: 6px 8px; }
.dg-world-badge.ok { background: #dcfce7; } .dg-world-badge.ng { background: #fee2e2; }
.dg-skin-editor { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 10px; }
.dg-skin-editor-box { background: var(--pop-paper); border: 3px solid var(--pop-ink); box-shadow: 8px 8px 0 var(--pop-ink); width: min(1100px, 100%); max-height: 96vh; overflow: auto; display: flex; flex-direction: column; }
.dg-skin-editor-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 3px solid var(--pop-ink); }
.dg-skin-editor-head h2 { margin: 0; font-size: 18px; flex: 1; }
.dg-skin-name input { padding: 6px 8px; border: 2px solid var(--pop-ink); font-family: inherit; font-weight: 700; }
.dg-skin-editor-body { display: flex; gap: 14px; padding: 12px 14px; flex-wrap: wrap; }
.dg-se-left { flex: 1 1 420px; min-width: 0; }
.dg-se-canvas-wrap { width: 100%; }
#dg-se-canvas { max-width: 100%; touch-action: none; border: 2px solid var(--pop-ink); cursor: crosshair; image-rendering: pixelated; }
.dg-se-hint { font-size: 12px; opacity: .8; margin-top: 6px; }
.dg-se-right { flex: 0 1 300px; display: flex; flex-direction: column; gap: 10px; }
.dg-se-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.dg-se-tool { padding: 6px 10px; border: 2px solid var(--pop-ink); background: #fff; font-family: inherit; font-weight: 900; cursor: pointer; }
.dg-se-tool.active { background: var(--pop-yellow); }
.dg-se-color { display: flex; gap: 8px; align-items: flex-start; }
#dg-se-color { width: 44px; height: 44px; padding: 0; border: 2px solid var(--pop-ink); }
.dg-se-palette { display: grid; grid-template-columns: repeat(8, 24px); gap: 4px; }
.dg-se-swatch { width: 24px; height: 24px; border: 2px solid var(--pop-ink); cursor: pointer; padding: 0; }
.dg-se-preview { display: flex; gap: 10px; align-items: center; }
#dg-se-doll { image-rendering: pixelated; border: 2px dashed #bbb; background: #fafafa; }
.dg-se-load { display: flex; flex-wrap: wrap; gap: 6px; }
.dg-se-file { cursor: pointer; }
.dg-se-admin { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; background: var(--pop-cyan-pale); padding: 8px; border: 2px dashed var(--pop-ink); }
.dg-se-save { margin-top: auto; }