:root {
  --ink: #17324d;
  --muted: #5e7184;
  --paper: #fffdfa;
  --panel: rgba(255,255,255,.92);
  --line: #d7e2ea;
  --blue: #2775c9;
  --blue-dark: #175394;
  --cyan: #21a8c7;
  --yellow: #f4c94f;
  --orange: #ef8b38;
  --red: #d94b4b;
  --green: #2c9b68;
  --violet: #7553b7;
  --u: #e755a0;
  --k: #c67924;
  --shadow: 0 12px 34px rgba(20,48,75,.16);
}
* { box-sizing: border-box; }
html { min-width: 320px; background: #eaf3f8; }
body {
  margin: 0;
  color: var(--ink);
  font-family: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif;
  background:
    radial-gradient(circle at 12% 5%, rgba(255,255,255,.95) 0 10%, transparent 35%),
    linear-gradient(145deg, #edf7fb 0%, #f7f4e9 52%, #edf6f2 100%);
  min-height: 100vh;
}
button { font: inherit; }
button:focus-visible { outline: 4px solid rgba(39,117,201,.32); outline-offset: 3px; }
[hidden] { display: none !important; }
.app-shell { width: min(1460px, 100%); margin: 0 auto; padding: 14px 18px 20px; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 12px;
}
.brand {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  border: 0; background: transparent; color: var(--ink); padding: 4px 6px; cursor: pointer; text-align: left;
}
.brand-icon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
  color: #fff; background: linear-gradient(145deg, var(--cyan), var(--blue));
  box-shadow: 0 7px 16px rgba(33,139,190,.28); font-size: 38px; font-weight: 900; line-height: 1;
}
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-text strong { font-size: clamp(20px, 2.25vw, 34px); line-height: 1.15; letter-spacing: .02em; }
.brand-text small { color: var(--muted); font-weight: 700; font-size: 12px; margin-top: 4px; }
.version { align-self: flex-start; margin: 2px 0 0 5px; background: var(--ink); color: #fff; border-radius: 999px; padding: 3px 9px; font-size: 12px; font-weight: 800; }
.header-actions { display: flex; gap: 8px; flex: none; }
.icon-button {
  border: 1px solid #b8cbd9; background: rgba(255,255,255,.82); color: var(--ink);
  border-radius: 10px; padding: 10px 15px; cursor: pointer; font-weight: 800;
}
.icon-button:hover { background: #fff; transform: translateY(-1px); }
.danger-outline { color: #a53b3b; border-color: #e0adad; }
.score-strip { display: grid; grid-template-columns: minmax(220px,1fr) minmax(230px, .85fr) minmax(220px,1fr); gap: 12px; margin-bottom: 12px; }
.score-card, .dice-panel {
  min-height: 76px; border: 1px solid rgba(164,188,204,.7); border-radius: 17px; background: var(--panel); box-shadow: 0 6px 18px rgba(31,68,91,.09);
}
.score-card { display: flex; align-items: center; gap: 11px; padding: 9px 12px; position: relative; overflow: hidden; }
.score-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--player-color); opacity: .25; }
.score-card.active { border-color: var(--player-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--player-color) 18%, transparent), 0 8px 20px rgba(31,68,91,.12); }
.score-card img { width: 57px; height: 57px; object-fit: contain; border-radius: 14px; }
.score-card div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.score-card strong { font-size: 17px; }
.score-card span:not(.turn-badge) { color: var(--muted); font-weight: 700; font-size: 13px; }
.player-u { --player-color: var(--u); }
.player-k { --player-color: var(--k); }
.turn-badge { margin-left: auto; white-space: nowrap; background: var(--player-color); color: #fff; border-radius: 999px; padding: 5px 9px; font-size: 12px; font-weight: 900; }
.dice-panel { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 14px; }
.dice { width: 54px; height: 54px; flex: none; position: relative; border-radius: 13px; background: #fff; border: 3px solid var(--ink); box-shadow: inset 0 -4px 0 rgba(0,0,0,.06), 0 5px 10px rgba(23,50,77,.12); }
.dice.rolling { animation: dice-roll .15s linear infinite; }
.dice.missing { opacity: .15; filter: grayscale(1); }
@keyframes dice-roll { 0%{transform:rotate(0) scale(1)} 50%{transform:rotate(10deg) scale(.93)} 100%{transform:rotate(0) scale(1)} }
.dot { display: none; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); transform: translate(-50%,-50%); }
.d1{left:25%;top:25%}.d2{left:75%;top:25%}.d3{left:25%;top:50%}.d4{left:50%;top:50%}.d5{left:75%;top:50%}.d6{left:25%;top:75%}.d7{left:75%;top:75%}
.dice[data-face="0"] .d4 {display:block; opacity:.25}
.dice[data-face="1"] .d4 {display:block}
.dice[data-face="2"] .d1,.dice[data-face="2"] .d7 {display:block}
.dice[data-face="3"] .d1,.dice[data-face="3"] .d4,.dice[data-face="3"] .d7 {display:block}
.dice[data-face="4"] .d1,.dice[data-face="4"] .d2,.dice[data-face="4"] .d6,.dice[data-face="4"] .d7 {display:block}
.dice[data-face="5"] .d1,.dice[data-face="5"] .d2,.dice[data-face="5"] .d4,.dice[data-face="5"] .d6,.dice[data-face="5"] .d7 {display:block}
.dice[data-face="6"] .d1,.dice[data-face="6"] .d2,.dice[data-face="6"] .d3,.dice[data-face="6"] .d5,.dice[data-face="6"] .d6,.dice[data-face="6"] .d7 {display:block}
.status-text { font-weight: 850; font-size: 14px; line-height: 1.4; max-width: 260px; }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 14px; align-items: start; }
.board-card { border: 1px solid rgba(158,184,201,.75); border-radius: 22px; background: var(--paper); overflow: hidden; box-shadow: var(--shadow); }
.board { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; background:
  linear-gradient(rgba(255,255,255,.18),rgba(255,255,255,.18)),
  radial-gradient(circle at 32% 35%, #fff 0 17%, transparent 17.5%),
  radial-gradient(circle at 72% 48%, #fff 0 17%, transparent 17.5%),
  linear-gradient(145deg,#fefcf3,#eef7f2);
}
.board::before { content:""; position:absolute; inset:0; opacity:.32; pointer-events:none; background-image: linear-gradient(90deg,rgba(31,97,135,.08) 1px,transparent 1px),linear-gradient(rgba(31,97,135,.08) 1px,transparent 1px); background-size:32px 32px; }
.board-path { position:absolute; inset:5% 3% 3%; width:94%; height:92%; filter:drop-shadow(0 5px 1px rgba(102,126,40,.12)); }
.board-path path { fill:none; stroke:#d6df73; stroke-width:118; stroke-linecap:round; stroke-linejoin:round; }
.cells { position:absolute; inset:0; }
.cell {
  --cell-color:#fff8cd;
  position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  width:clamp(40px,6.2vw,73px); aspect-ratio:1; border-radius:20px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--cell-color); border:3px solid rgba(104,124,51,.44); box-shadow:0 4px 0 rgba(89,107,43,.18);
  text-align:center; padding:3px; z-index:2;
}
.cell .number { font-weight:950; font-size:clamp(13px,1.5vw,20px); line-height:1; }
.cell .cell-label { margin-top:3px; font-weight:900; font-size:clamp(7px,.82vw,11px); line-height:1.05; color:#304a5c; }
.cell.start { --cell-color:#ffd58e; border-color:#e18a3a; }
.cell.goal { --cell-color:#cdbcf7; border-color:#7453b5; }
.cell.card { --cell-color:#f8d5ef; border-color:#b85498; }
.cell.back { --cell-color:#ffe3dc; border-color:#dc6b59; }
.cell.skip { --cell-color:#d9f1ff; border-color:#4f9bc7; }
.cell.boost { --cell-color:#d8f4dc; border-color:#4c9e61; }
.cell.reset { --cell-color:#fff0ac; border-color:#c99b2d; }
.cell.event { --cell-color:#d7f4f1; border-color:#3b9f98; }
.player-token {
  --offset-x:0px; --offset-y:0px; --ring:#333;
  position:absolute; left:var(--x); top:var(--y); transform:translate(calc(-50% + var(--offset-x)),calc(-50% + var(--offset-y)));
  width:clamp(46px,6.4vw,76px); height:clamp(51px,7vw,84px); z-index:8; padding:0; border:0; background:transparent; cursor:pointer;
  transition:left .38s ease, top .38s ease, transform .2s ease, filter .2s ease;
}
.player-token img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 5px 3px rgba(18,42,59,.25)); }
.player-token span { position:absolute; right:-2px; bottom:1px; display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:var(--ring); color:#fff; font-size:12px; font-weight:950; border:2px solid #fff; }
.player-token.active { animation: active-token 1.15s ease-in-out infinite; }
.player-token.disabled { cursor:not-allowed; filter:grayscale(.55) opacity(.72); animation:none; }
.token-u { --offset-x:-12px; --offset-y:-5px; --ring:var(--u); }
.token-k { --offset-x:12px; --offset-y:8px; --ring:var(--k); }
@keyframes active-token { 0%,100%{transform:translate(calc(-50% + var(--offset-x)),calc(-50% + var(--offset-y))) scale(1)} 50%{transform:translate(calc(-50% + var(--offset-x)),calc(-50% + var(--offset-y) - 5px)) scale(1.07)} }
.board-center-message { position:absolute; left:50%; top:47%; transform:translate(-50%,-50%); z-index:1; text-align:center; color:#466171; font-size:clamp(10px,1.1vw,15px); font-weight:800; line-height:1.45; }
.board-center-message strong { display:block; color:var(--blue-dark); font-size:clamp(12px,1.5vw,20px); margin-top:4px; }
.legend { display:flex; flex-wrap:wrap; gap:9px 15px; align-items:center; padding:10px 14px 12px; color:#526b7b; font-size:12px; font-weight:800; }
.legend span { display:flex; align-items:center; gap:5px; }
.legend i { width:14px; height:14px; border-radius:4px; border:2px solid; }
.legend-card{background:#f8d5ef;border-color:#b85498!important}.legend-back{background:#ffe3dc;border-color:#dc6b59!important}.legend-skip{background:#d9f1ff;border-color:#4f9bc7!important}.legend-boost{background:#d8f4dc;border-color:#4c9e61!important}.legend-reset{background:#fff0ac;border-color:#c99b2d!important}
.side-panel { display:flex; flex-direction:column; gap:12px; }
.panel-section { border:1px solid rgba(158,184,201,.75); border-radius:17px; background:var(--panel); padding:15px; box-shadow:0 6px 18px rgba(31,68,91,.08); }
.panel-section h2 { font-size:16px; margin:0 0 11px; }
.status-list { margin:0; display:grid; gap:8px; }
.status-list div { display:flex; justify-content:space-between; gap:12px; border-bottom:1px dashed #d4e0e7; padding-bottom:7px; }
.status-list div:last-child { border-bottom:0; padding-bottom:0; }
.status-list dt { color:var(--muted); font-weight:700; }
.status-list dd { margin:0; font-weight:900; }
.panel-section ol { margin:0; padding-left:22px; color:#4f6473; font-size:13px; line-height:1.65; font-weight:700; }
.finish-button { border:0; border-radius:14px; background:linear-gradient(145deg,var(--ink),#275a78); color:#fff; padding:15px 13px; font-weight:900; cursor:pointer; box-shadow:0 7px 14px rgba(23,50,77,.18); }
.finish-button:hover { transform:translateY(-1px); }
footer { display:flex; justify-content:space-between; gap:12px; margin-top:12px; color:#65798a; font-size:11px; font-weight:700; }
.modal-backdrop { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:16px; background:rgba(13,35,52,.58); backdrop-filter:blur(4px); }
.modal { width:min(720px,100%); max-height:min(90vh,820px); overflow:auto; border-radius:23px; background:#fff; box-shadow:0 24px 70px rgba(0,0,0,.32); border:1px solid rgba(255,255,255,.55); }
.modal-header { padding:22px 24px 14px; border-bottom:1px solid #e4ebef; background:linear-gradient(145deg,#f4fbff,#fffaf0); }
.modal-kicker { color:var(--blue); font-size:12px; font-weight:900; letter-spacing:.08em; }
.modal-header h2 { margin:6px 0 0; font-size:clamp(22px,3.5vw,32px); line-height:1.25; }
.modal-body { padding:21px 24px; color:#334e61; line-height:1.7; }
.modal-body p:first-child { margin-top:0; }
.modal-body p:last-child { margin-bottom:0; }
.modal-actions { padding:14px 24px 22px; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px; }
.modal-actions button { border:0; border-radius:12px; padding:11px 18px; font-weight:900; cursor:pointer; }
.primary-button { background:var(--blue); color:#fff; }
.primary-button:hover { background:var(--blue-dark); }
.secondary-button { background:#e9f0f4; color:var(--ink); }
.danger-button { background:var(--red); color:#fff; }
.intro-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0; }
.intro-card { border:1px solid #d9e5ec; border-radius:14px; padding:13px; background:#f9fcfd; }
.intro-card strong { display:block; margin-bottom:5px; color:var(--ink); }
.rule-list { padding-left:22px; margin:10px 0 0; }
.question-meta { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:13px; }
.chip { border-radius:999px; background:#eaf4fb; color:var(--blue-dark); padding:4px 10px; font-size:12px; font-weight:900; }
.question-text { font-size:clamp(18px,2.5vw,24px); line-height:1.55; font-weight:900; color:var(--ink); margin:0 0 16px; }
.choice-list { display:grid; gap:10px; }
.choice-button { width:100%; display:flex; align-items:flex-start; gap:11px; border:2px solid #d3e0e8; border-radius:14px; background:#fff; padding:13px 15px; text-align:left; color:var(--ink); font-weight:800; cursor:pointer; }
.choice-button:hover { border-color:var(--blue); background:#f3f9fd; }
.choice-letter { display:grid; place-items:center; flex:none; width:29px; height:29px; border-radius:9px; background:#e7f1f8; color:var(--blue-dark); text-transform:uppercase; font-weight:950; }
.choice-button.correct { border-color:var(--green); background:#eefaf4; }
.choice-button.wrong { border-color:var(--red); background:#fff1f1; }
.choice-button:disabled { cursor:default; opacity:1; }
.feedback { margin-top:17px; border-radius:15px; padding:14px 16px; font-weight:750; }
.feedback.correct { background:#e9f8ef; border-left:6px solid var(--green); }
.feedback.wrong { background:#fff0f0; border-left:6px solid var(--red); }
.feedback strong { display:block; color:var(--ink); font-size:18px; margin-bottom:4px; }
.related-box { margin-top:11px; padding:11px 13px; border-radius:12px; background:#f4f7fa; color:#526878; font-size:14px; }
.mission-card { border:3px solid var(--violet); border-radius:18px; background:linear-gradient(150deg,#fcf8ff,#f0eaff); padding:19px; text-align:center; }
.mission-card .mission-icon { font-size:48px; line-height:1; }
.mission-card h3 { color:#533593; margin:8px 0; font-size:23px; }
.mission-card p { margin:7px 0; }
.result-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:15px; }
.result-card { border-radius:15px; padding:15px; background:#f4f8fa; border:1px solid #dce6eb; }
.result-card strong { display:block; font-size:19px; color:var(--ink); }
.result-score { font-size:27px; font-weight:950; margin-top:5px; }
.wrong-review { max-height:240px; overflow:auto; display:grid; gap:8px; margin-top:10px; }
.wrong-item { border:1px solid #e0e6ea; border-radius:11px; padding:10px 12px; background:#fcfcfc; font-size:13px; }
.wrong-item strong { color:var(--ink); }
.toast { position:fixed; z-index:80; left:50%; bottom:24px; transform:translateX(-50%); min-width:min(440px,calc(100% - 32px)); max-width:700px; border-radius:14px; padding:13px 18px; background:rgba(23,50,77,.95); color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.25); text-align:center; font-weight:900; }
.toast.show { animation:toast-in .25s ease-out; }
@keyframes toast-in { from{opacity:0;transform:translate(-50%,12px)} to{opacity:1;transform:translate(-50%,0)} }
@media (max-width:980px) {
  .game-layout { grid-template-columns:1fr; }
  .side-panel { display:grid; grid-template-columns:1fr 1fr; }
  .finish-button { grid-column:1/-1; }
}
@media (max-width:720px) {
  .app-shell { padding:9px; }
  .topbar { align-items:flex-start; }
  .brand-text small { display:none; }
  .brand-icon { width:42px; height:42px; border-radius:13px; font-size:31px; }
  .version { display:none; }
  .header-actions { flex-direction:column; gap:5px; }
  .icon-button { padding:7px 10px; font-size:12px; }
  .score-strip { grid-template-columns:1fr 1fr; }
  .dice-panel { grid-column:1/-1; grid-row:2; min-height:64px; }
  .score-card { min-height:65px; padding:7px; }
  .score-card img { width:45px; height:45px; }
  .turn-badge { font-size:10px; padding:4px 6px; }
  .board { aspect-ratio:4/3; }
  .cell { width:clamp(28px,7.3vw,52px); border-width:2px; border-radius:12px; }
  .player-token { width:clamp(38px,9vw,62px); height:clamp(43px,10vw,69px); }
  .token-u { --offset-x:-8px; }
  .token-k { --offset-x:8px; }
  .legend { font-size:10px; gap:6px 10px; padding:8px; }
  .side-panel { grid-template-columns:1fr; }
  .intro-grid,.result-grid { grid-template-columns:1fr; }
  .modal-header,.modal-body,.modal-actions { padding-left:17px; padding-right:17px; }
  footer { flex-direction:column; gap:3px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}
/* V0.1 layout refinements */
.board-center-message { display: none; }
@media (max-width:720px) {
  .brand-text strong { font-size:17px; white-space:nowrap; letter-spacing:0; }
  .score-card strong { font-size:15px; white-space:nowrap; }
  .turn-badge { display:none!important; }
}

/* --- V0.1 visual revision: reflect original Scratch background/components more closely --- */
.brand {
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(183, 196, 209, .75);
  border-radius: 18px;
  padding: 10px 14px;
  box-shadow: 0 8px 18px rgba(31,68,91,.08);
}
.brand-original-title {
  width: min(46vw, 360px);
  max-width: 360px;
  min-width: 160px;
  height: auto;
  display: block;
}
.brand-text small { font-size: 11px; }
.board-card {
  background: #f8f5ef;
  border-radius: 22px;
  border: 1px solid rgba(173, 181, 173, .8);
}
.board-notice {
  padding: 8px 14px 0;
  color: #6c6a56;
  font-size: 12px;
  font-weight: 800;
}
.board {
  background-image: url('assets/board-itpassport.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.board::before,
.board-path { display: none; }
.board::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.08);
  pointer-events: none;
}
.board-title-overlay {
  position: absolute;
  top: 2.2%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 5;
  background: rgba(255,255,255,.78);
  border-radius: 999px;
  padding: 6px 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.board-title-main,
.board-title-sub {
  font-weight: 900;
  color: #8b2f88;
  text-shadow: 0 2px 0 rgba(255,255,255,.95);
}
.board-title-main { font-size: clamp(18px, 2vw, 28px); }
.board-title-sub { font-size: clamp(16px, 1.8vw, 24px); }
.cells { z-index: 3; }
.cell {
  width: clamp(28px, 4vw, 46px);
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
}
.cell .number {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.92);
  border: 2px solid rgba(210, 173, 34, .95);
  border-radius: 999px;
  color: #6b5a17;
  box-shadow: 0 2px 0 rgba(154,131,33,.15);
  font-size: clamp(11px,1.15vw,14px);
}
.cell .cell-label { display: none; }
.cell.start,
.cell.goal,
.cell.card,
.cell.back,
.cell.skip,
.cell.boost,
.cell.reset,
.cell.event {
  width: clamp(44px, 6vw, 66px);
  background: rgba(255,255,255,.92);
  border-radius: 12px;
  border: 2px solid rgba(0,0,0,.08);
  box-shadow: 0 3px 0 rgba(0,0,0,.06);
  padding: 5px 4px;
}
.cell.start .number,
.cell.goal .number,
.cell.card .number,
.cell.back .number,
.cell.skip .number,
.cell.boost .number,
.cell.reset .number,
.cell.event .number {
  width: auto;
  height: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #5f5f5f;
  font-size: 10px;
}
.cell.start .cell-label,
.cell.goal .cell-label,
.cell.card .cell-label,
.cell.back .cell-label,
.cell.skip .cell-label,
.cell.boost .cell-label,
.cell.reset .cell-label,
.cell.event .cell-label { display: block; }
.cell.start { background: rgba(255, 210, 180, .96); }
.cell.goal { background: rgba(195, 181, 244, .96); }
.cell.card { background: rgba(248, 217, 236, .98); }
.cell.back { background: rgba(255, 239, 239, .98); }
.cell.skip { background: rgba(220, 244, 255, .98); }
.cell.boost { background: rgba(225, 250, 222, .98); }
.cell.reset { background: rgba(255, 237, 177, .98); }
.cell.event { background: rgba(231, 250, 248, .98); }
.cell.start .cell-label,
.cell.goal .cell-label,
.cell.card .cell-label,
.cell.back .cell-label,
.cell.skip .cell-label,
.cell.boost .cell-label,
.cell.reset .cell-label,
.cell.event .cell-label {
  font-size: clamp(8px,.8vw,12px);
  font-weight: 900;
}
.token-u { --offset-x:-10px; --offset-y:-4px; }
.token-k { --offset-x:10px; --offset-y:8px; }
.player-token img { filter: drop-shadow(0 5px 4px rgba(18,42,59,.28)); }
.legend {
  background: rgba(255,255,255,.68);
  border-top: 1px dashed rgba(140, 153, 161, .6);
}
.side-panel {
  gap: 12px;
}
.original-ref-panel ul {
  margin: 8px 0 0 18px;
  padding: 0;
  color: #5d6f7d;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 700;
}
.dice {
  width: 68px;
  height: 68px;
  border: 0;
  border-radius: 16px;
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: none;
}
.dice[data-face="0"] { background-image: url('assets/dice-0.png'); }
.dice[data-face="1"] { background-image: url('assets/dice-1.png'); }
.dice[data-face="2"] { background-image: url('assets/dice-2.png'); }
.dice[data-face="3"] { background-image: url('assets/dice-3.png'); }
.dice[data-face="4"] { background-image: url('assets/dice-4.png'); }
.dice[data-face="5"] { background-image: url('assets/dice-5.png'); }
.dice[data-face="6"] { background-image: url('assets/dice-6.png'); }
.dice.rolling {
  animation: dice-roll .15s linear infinite;
}
.modal {
  border: 2px solid rgba(121, 146, 176, .55);
}
.modal-header {
  background: linear-gradient(180deg, #ecf2fc, #dce9fa);
}
.finish-button {
  background: linear-gradient(180deg, #2280b4, #0c628d);
}
@media (max-width: 900px) {
  .brand { flex-wrap: wrap; }
  .brand-original-title { width: min(72vw, 320px); }
  .board-title-overlay {
    top: 1.5%;
    padding: 4px 10px;
  }
  .board-title-main { font-size: 14px; }
  .board-title-sub { font-size: 13px; }
}

/* V0.1 fix: cell descriptions are hidden; the original board artwork already contains its own labels. */
.cell .cell-label,
.cell.start .cell-label,
.cell.goal .cell-label,
.cell.card .cell-label,
.cell.back .cell-label,
.cell.skip .cell-label,
.cell.boost .cell-label,
.cell.reset .cell-label,
.cell.event .cell-label { display: none !important; }

/* V0.1 complete cell-text removal: only the cell number is overlaid. */
.cell,
.cell.start,
.cell.goal,
.cell.card,
.cell.back,
.cell.skip,
.cell.boost,
.cell.reset,
.cell.event {
  width: clamp(28px, 4vw, 46px) !important;
  aspect-ratio: 1 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.cell .cell-label,
.cell.start .cell-label,
.cell.goal .cell-label,
.cell.card .cell-label,
.cell.back .cell-label,
.cell.skip .cell-label,
.cell.boost .cell-label,
.cell.reset .cell-label,
.cell.event .cell-label {
  display: none !important;
  visibility: hidden !important;
  font-size: 0 !important;
}
.cell .number,
.cell.start .number,
.cell.goal .number,
.cell.card .number,
.cell.back .number,
.cell.skip .number,
.cell.boost .number,
.cell.reset .number,
.cell.event .number {
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.94) !important;
  border: 2px solid rgba(210,173,34,.95) !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 0 rgba(154,131,33,.15) !important;
  color: #6b5a17 !important;
  font-size: clamp(11px,1.15vw,14px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

/* V0.1 revision: hide all overlaid cell markers and numbers. The original board artwork should be shown as-is. */
.cells,
.cell,
.cell * {
  display: none !important;
}


/* V0.1 exact-original-board revision */
.board {
  background-image: url('assets/board-itpassport.png') !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.board::before,
.board::after,
.board-path,
.board-title-overlay,
.board-center-message,
.cells,
.cell,
.cell * {
  display: none !important;
}
.board-notice { display: none !important; }

/* =========================================================
   V0.1 再構成版：ITタイトル／先攻決定／クリック停止サイコロ
   ========================================================= */
.brand-it {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 7px 10px;
}
.brand-it .brand-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 18px;
  background: linear-gradient(145deg, #b03a9e, #7b2885);
  color: #fff;
  font-size: 39px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 7px 15px rgba(126, 36, 132, .25);
}
.brand-it .brand-text strong {
  color: #8d2787;
  font-size: clamp(20px, 2.15vw, 33px);
}
.brand-it .version {
  background: #7c277f;
}

.dice-panel {
  min-height: 92px;
  justify-content: flex-start;
  padding: 9px 18px;
}
.dice-instruction {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dice-instruction > strong {
  font-size: 13px;
  color: #8d2787;
}
.dice {
  width: 78px !important;
  height: 78px !important;
  padding: 0 !important;
  border: 0 !important;
  cursor: pointer;
  flex: none;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.dice:disabled {
  cursor: default;
  opacity: .78;
}
.dice.ready:not(:disabled) {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(37, 142, 207, .7));
  box-shadow: 0 0 0 5px rgba(38, 151, 213, .18) !important;
  border-radius: 18px !important;
}
.dice.ready:not(:disabled):hover {
  transform: scale(1.06);
}
.dice.rolling {
  animation: dice-click-roll .22s linear infinite !important;
}
@keyframes dice-click-roll {
  0% { transform: rotate(-4deg) scale(.96); }
  50% { transform: rotate(5deg) scale(1.04); }
  100% { transform: rotate(-4deg) scale(.96); }
}
.status-text {
  font-size: 13px;
  line-height: 1.4;
}

.board {
  position: relative;
  background-image: url('assets/board-itpassport.png') !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.board-it-title {
  position: absolute;
  z-index: 7;
  left: 13.3%;
  right: 13.3%;
  top: 0;
  height: 12.7%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.7vw, 26px);
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.65), transparent 36%),
    linear-gradient(180deg, #fbf8f2 0%, #f9f6ef 78%, rgba(249,246,239,.96) 100%);
  color: #962b8f;
  text-align: center;
  pointer-events: none;
}
.board-it-title span,
.board-it-title small {
  display: block;
  font-family: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  text-shadow:
    0 3px 0 rgba(255,255,255,.95),
    0 7px 4px rgba(157, 44, 145, .16);
}
.board-it-title span { font-size: clamp(20px, 3.2vw, 47px); }
.board-it-title small { font-size: clamp(17px, 2.7vw, 39px); }

/* オリジナル盤面の文字・カード束は背景画像のまま保持し、後付けマス表示は出さない */
.cells, .cell, .cell * { display: none !important; }
.board-center-message, .board-notice, .board-title-overlay { display: none !important; }

.player-token:disabled {
  opacity: 1;
  cursor: default;
}
.player-token.active {
  animation: active-token 1.05s ease-in-out infinite;
}

.status-list > div:nth-child(1),
.status-list > div:nth-child(2) {
  background: rgba(246, 232, 248, .64);
}

.order-roll-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  margin: 18px 0;
}
.order-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: 2px solid #d9e3eb;
  border-radius: 18px;
  padding: 16px;
  background: #fff;
}
.player-u-order { border-color: rgba(231, 85, 160, .5); }
.player-k-order { border-color: rgba(198, 121, 36, .5); }
.order-die {
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 4px solid #17324d;
  border-radius: 17px;
  background: #fff;
  font-size: 42px;
  font-weight: 950;
  box-shadow: 0 7px 0 rgba(23,50,77,.12);
}
.order-vs {
  font-weight: 950;
  color: #8d2787;
  font-size: 22px;
}
.order-result {
  min-height: 30px;
  text-align: center;
  font-size: 18px;
  color: #526b7b;
}
.order-result strong {
  color: #8d2787;
  font-size: 22px;
}

@media (max-width: 760px) {
  .board-it-title {
    left: 10%;
    right: 10%;
    gap: 6px;
  }
  .board-it-title span { font-size: clamp(14px, 4vw, 26px); }
  .board-it-title small { font-size: clamp(12px, 3.4vw, 22px); }
  .dice { width: 66px !important; height: 66px !important; }
  .order-roll-grid { gap: 8px; }
  .order-player { padding: 10px; }
  .order-die { width: 62px; height: 62px; font-size: 34px; }
}

.board-it-title { display: none !important; }

/* Keep both player pieces readable when they occupy the same square. */
.token-u { --offset-x:-30px !important; --offset-y:-7px !important; }
.token-k { --offset-x:30px !important; --offset-y:9px !important; }

/* =========================================================
   V0.1 盤面中央レイアウト改訂
   左の∞穴：クリック停止サイコロ／右の∞穴：カードデッキ
   ========================================================= */
.status-panel {
  justify-content: center !important;
  text-align: center;
}
.status-panel .dice-instruction { align-items: center; }
.board-hole {
  position: absolute;
  z-index: 6;
  top: 48.5%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.board-hole-left { left: 25.5%; }
.board-hole-right { left: 74.2%; }
.board-hole .dice { pointer-events: auto; }
.board-dice {
  width: clamp(82px, 9vw, 128px) !important;
  height: clamp(82px, 9vw, 128px) !important;
  background-color: transparent !important;
  border-radius: 22px !important;
}
.board-dice.ready:not(:disabled) {
  box-shadow: 0 0 0 7px rgba(38,151,213,.20), 0 8px 20px rgba(17,74,107,.16) !important;
}
.dice-result-message {
  min-width: 126px;
  margin-top: 12px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.93);
  border: 2px solid rgba(141,39,135,.28);
  color: #7c277f;
  font-size: clamp(14px, 1.45vw, 21px);
  line-height: 1.1;
  font-weight: 950;
  text-align: center;
  box-shadow: 0 5px 14px rgba(52,49,54,.13);
  transition: transform .18s ease, opacity .18s ease, background .18s ease;
}
.dice-result-message.result {
  background: #fff5c8;
  border-color: #e4a725;
  color: #b14e00;
  transform: scale(1.12);
  animation: dice-result-pop .45s ease-out;
}
@keyframes dice-result-pop {
  0% { transform: scale(.72); opacity: .1; }
  70% { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1.12); opacity: 1; }
}
.card-deck-image {
  width: clamp(64px, 8vw, 113px);
  height: auto;
  filter: drop-shadow(0 10px 7px rgba(52,31,45,.28));
}
.card-deck-label {
  margin-top: 5px;
  padding: 5px 11px;
  border-radius: 12px;
  background: rgba(255,255,255,.90);
  color: #7c277f;
  text-align: center;
  font-size: clamp(11px, 1vw, 15px);
  line-height: 1.2;
  font-weight: 950;
  box-shadow: 0 4px 10px rgba(52,49,54,.10);
}
@media (max-width: 760px) {
  .board-hole { top: 49%; }
  .board-hole-left { left: 25.8%; }
  .board-hole-right { left: 74%; }
  .board-dice {
    width: clamp(62px, 14vw, 88px) !important;
    height: clamp(62px, 14vw, 88px) !important;
  }
  .dice-result-message {
    min-width: 88px;
    margin-top: 5px;
    padding: 4px 7px;
    font-size: clamp(10px, 2.6vw, 14px);
  }
  .card-deck-image { width: clamp(47px, 11.3vw, 72px); }
  .card-deck-label { font-size: clamp(8px, 2vw, 11px); padding: 3px 6px; }
}


/* =========================================================
   V0.1 サイコロ操作・途中終了 改訂
   - 手番開始時は「1」で静止
   - クリック後に盤面内を転がって停止
   - 終了したプレイヤーを明示
   ========================================================= */
.board { overflow: hidden !important; }
.board-hole-left { z-index: 18 !important; }
.board-dice.board-rolling {
  z-index: 30 !important;
  animation: none !important;
  transition: none !important;
  cursor: wait !important;
  opacity: 1 !important;
  filter: drop-shadow(0 12px 8px rgba(31,44,62,.38)) !important;
  box-shadow: none !important;
  will-change: transform;
}
.board-dice.ready:not(:disabled) {
  animation: dice-ready-pulse 1.25s ease-in-out infinite !important;
}
@keyframes dice-ready-pulse {
  0%,100% { filter: drop-shadow(0 0 4px rgba(37,142,207,.45)); }
  50% { filter: drop-shadow(0 0 12px rgba(37,142,207,.9)); }
}
.score-card.ended {
  opacity: .58;
  filter: grayscale(.75);
  box-shadow: none !important;
}
.score-card.ended::after {
  content: "終了";
  position: absolute;
  right: 12px;
  top: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #596875;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
}
.player-token.ended {
  opacity: .45;
  filter: grayscale(1);
}


/* V0.1 イベント自動処理表示 */
.auto-event-note {
  margin: 22px 0 0;
  color: #60758a;
  font-size: 14px;
  font-weight: 800;
  text-align: right;
}


/* V0.1 adjustment: display transparent PNG dice without a translucent rectangular backing. */
.board-dice {
  background-color: transparent !important;
  box-shadow: none !important;
}
.board-dice.ready:not(:disabled) {
  box-shadow: none !important;
  filter: drop-shadow(0 0 9px rgba(38,151,213,.55));
}


/* V0.1: 100問ランダム出題・強制終了 */
.question-limit-notice,
.question-limit-summary {
  margin-top: 14px;
  padding: 12px 14px;
  border: 2px solid #df9b21;
  border-radius: 13px;
  background: #fff5cf;
  color: #7a4500;
  line-height: 1.55;
}
.question-limit-summary {
  margin: 0 0 16px;
  text-align: center;
  font-size: 15px;
}


/* ゴール祝福3画面 */
.goal-screen-wrap {
  display: flex;
  justify-content: center;
}
.goal-screen-image {
  width: min(100%, 620px);
  height: auto;
  display: block;
  border-radius: 16px;
  border: 3px solid #efc34f;
  box-shadow: 0 12px 28px rgba(161, 112, 0, .24);
  background: #fff7de;
}