/* Shared article layout and card diagrams. Card styles match the in-game cards. */
:root{--h:72px}
body{font-family:system-ui,-apple-system,"Yu Gothic",Meiryo,sans-serif;max-width:820px;margin:0 auto;padding:24px;line-height:1.9;color:#17211c;background:#fafaf7}
a{color:#075c43}
h1{font-size:28px;line-height:1.4}
h2{margin-top:38px;font-size:21px;padding-bottom:6px;border-bottom:2px solid #d4af37}
h3{margin-top:24px;font-size:17px;color:#0b3d2c}
nav{margin:0 0 24px;padding:12px 0;border-bottom:1px solid #ddd}
nav a{margin-right:14px}
ul,ol{padding-left:1.4em}
li{margin-bottom:6px}
table{border-collapse:collapse;width:100%;margin:14px 0;background:#fff}
th,td{border:1px solid #dfe7e1;padding:8px 12px;text-align:left}
th{background:#eef3ee}
.breadcrumb{list-style:none;padding:0;margin:0 0 6px;font-size:13px;color:#5b6b63;display:flex;flex-wrap:wrap}
.breadcrumb li{margin:0}
.breadcrumb li+li::before{content:"\203A";margin:0 7px;color:#9aa8a1}
.note{background:#eef3ee;border-radius:8px;padding:12px 18px;margin:20px 0}
.box{background:#fff;border:1px solid #dfe7e1;border-radius:10px;padding:14px 18px 6px;margin:16px 0}
.box h3{margin-top:0}
.answer{background:#eef3ee;border-left:4px solid #075c43;border-radius:0 8px 8px 0;padding:10px 16px;margin:12px 0}
.answer p{margin:6px 0}
.play{display:inline-block;padding:10px 16px;background:#075c43;color:#fff;text-decoration:none;border-radius:7px;font-weight:700}
.play-row{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.back{display:inline-block;margin-top:22px}

.fig{margin:14px 0;text-align:center}
.fig figcaption{font-size:13px;color:#4d5a53;margin-top:8px;line-height:1.6}
figure{margin:0}
.scene{display:flex;gap:10px;justify-content:center;align-items:flex-start;padding:14px 8px 18px;border-radius:12px;background:radial-gradient(circle at 50% -10%,rgba(51,255,181,.18),rgba(0,0,0,0) 32%),linear-gradient(#073b2d,#021f19 78%,#01130f)}
.col{display:flex;flex-direction:column;flex:none;width:calc(var(--h)*.71)}
.lbl{display:block;color:#9fe3c4;font-size:11px;line-height:1.3;text-align:center;margin-bottom:6px;white-space:nowrap}
.mc{position:relative;display:block;box-sizing:border-box;overflow:hidden;flex:none;width:calc(var(--h)*.71);height:var(--h);border-radius:calc(var(--h)*.056);background:linear-gradient(160deg,#fff 0%,#f7f9f8 58%,#e7edeb 100%);border:1px solid rgba(18,37,32,.32);box-shadow:0 4px 10px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.9);color:#101716;font-style:normal;text-align:left}
.mc.r{color:#e12645}
.mc::before{content:attr(data-c);position:absolute;top:calc(var(--h)*.035);left:calc(var(--h)*.054);font:800 max(9px,calc(var(--h)*.18))/1 Arial,Helvetica,sans-serif;letter-spacing:-.04em;white-space:nowrap;text-shadow:0 1px rgba(255,255,255,.7)}
.mc::after{content:attr(data-s);position:absolute;left:50%;top:60.75%;transform:translate(-50%,calc(-50% - .054em));font:calc(var(--h)*.7)/1 Georgia,"Times New Roman",serif}
.mc.b{background:radial-gradient(circle at 50% 42%,rgba(128,241,189,.2),rgba(0,0,0,0) 32%),repeating-linear-gradient(45deg,#132e2a 0 5px,#0c211e 5px 10px);border:1px solid rgba(128,241,189,.55);box-shadow:0 4px 10px rgba(0,0,0,.36),inset 0 0 0 2px rgba(0,0,0,.22)}
.mc.b::before{content:"";top:max(2px,calc(var(--h)*.036));right:max(2px,calc(var(--h)*.036));bottom:max(2px,calc(var(--h)*.036));left:max(2px,calc(var(--h)*.036));border:1px solid rgba(128,241,189,.28);border-radius:calc(var(--h)*.045)}
.mc.b::after{content:none}
/* overlap steps used by the game: face-up 38%, face-down 11.5% of the card height */
.mc+.mc{margin-top:calc(var(--h)*-.62)}
.mc.b+.mc{margin-top:calc(var(--h)*-.885)}
/* a covered card only shows its index, as in the game */
.mc:has(+ .mc)::after{content:none}
.mc.hl{outline:2px solid #ffd15c;box-shadow:0 0 0 2px rgba(255,209,92,.24),0 0 14px rgba(255,209,92,.6)}
.slot{display:block;box-sizing:border-box;width:calc(var(--h)*.71);height:var(--h);border:1px dashed rgba(255,255,255,.35);border-radius:calc(var(--h)*.09)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:14px;margin:14px 0}
.steps .scene{--h:52px;gap:7px;padding:10px 6px 14px}
.steps figcaption{font-size:13px;color:#2c3a33;margin-top:7px;line-height:1.6;text-align:left}
.steps .scene .lbl{font-size:10px}
@media(max-width:620px){
  body{padding:16px}
  h1{font-size:24px}
  .scene{gap:7px}
}