:root{color-scheme:dark;--bg:#0c0e14;--panel:#141720;--muted:#a3a8ba;--lime:#d0ff71;--line:#2b2e3b}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f5f5fb;font-family:Inter,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-size:16px;line-height:1.7}header{height:84px;max-width:1280px;margin:auto;padding:0 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}a{color:inherit}.brand{font-size:20px;font-weight:800;text-decoration:none;letter-spacing:.04em}.brandmark{color:var(--lime);font-size:30px;margin-right:10px}.edition,.eyebrow{font-family:monospace;letter-spacing:.12em;font-size:12px;color:var(--muted)}main{max-width:1184px;margin:auto;padding:36px 0 28px}.intro{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}.eyebrow{margin:0 0 10px}h1{font-size:30px;line-height:1.5;letter-spacing:.01em;margin:0}h1 span{color:var(--muted);margin-left:14px}.intro-note{font-size:14px;color:var(--muted);margin:0 0 3px}.mobile{display:none}.workspace{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:20px;overflow:hidden}.draw-area{background:radial-gradient(ellipse at 50% 40%,#282d44 0%,#151923 60%,#12151c 100%);padding:24px 34px}.stage-top{display:flex;justify-content:space-between;font-size:12px;color:#b3b9ca;gap:14px}#count{font-family:monospace;white-space:nowrap}.card-stage{position:relative;perspective:1000px;max-width:380px;margin:24px auto}.chip-card{position:relative;min-height:405px;border-radius:17px;overflow:hidden;padding:22px 24px 0;border:1px solid #9883ec;background:linear-gradient(145deg,#322753 0%,#1a1930 43%,#151d2b 100%);box-shadow:0 14px 45px #0006,inset 0 0 0 5px #ffffff06;transition:box-shadow .3s}.chip-card.r{border-color:#8cacb0;background:linear-gradient(140deg,#263b41,#151d28 70%)}.chip-card.ssr{border-color:#f4dea9;background:linear-gradient(135deg,#404430aa,#182b3e 35%,#322441 65%,#442d2a);box-shadow:0 0 35px #c38fff30,0 0 70px #6dffff15,inset 0 0 0 5px #ffffff09}.ssr .card-top strong{background:linear-gradient(90deg,#d8ff85,#87f9ff,#eeacff,#ffd48b);color:transparent;background-clip:text}.card-top{display:flex;justify-content:space-between;align-items:center}.card-top strong{font-size:28px;line-height:1;color:#ddc5ff;font-style:italic}.r .card-top strong{color:#bddfe8}.card-top>span{font-size:11px;letter-spacing:.09em;color:#bdc0d3}.card-title{margin-top:24px}.card-title p{margin:0;color:#c8bfd8;font-size:12px}.card-title h2{font-size:23px;line-height:1.45;margin:6px 0;overflow-wrap:anywhere}.card-title #english{font-size:10px;font-family:monospace;letter-spacing:.11em}.diagram{margin:12px -5px 0;height:158px;display:flex;align-items:center}.diagram svg{width:100%;height:100%;overflow:visible}.schematic{text-align:center;color:#a5acc0;font-size:10px;margin:0 0 16px}.card-bottom{border-top:1px solid #ffffff25;display:flex;justify-content:space-between;align-items:center;padding:15px 0;font-size:13px;color:#ece2ff;gap:8px}.card-bottom>span:last-child{font-size:20px}.draw-button{width:100%;border:0;border-radius:10px;background:var(--lime);color:#162400;font:700 19px inherit;font-size:19px;font-weight:800;display:flex;align-items:center;justify-content:space-between;padding:15px 23px;cursor:pointer;box-shadow:0 4px 0 #7c9c3d;transition:transform .15s,background .15s}.draw-button:hover{background:#deff9e;transform:translateY(-2px)}.draw-button:active{transform:translateY(2px)}.draw-button:disabled{cursor:wait;background:#91a272;transform:none}.draw-button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:5px}.draw-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:15px}.reading{padding:34px 36px;background:#12141c}.reading>.eyebrow{color:#bba6f0}.reading>h2{font-size:27px;line-height:1.6;margin:14px 0}.summary{font-size:16px;color:#d2d3df;line-height:1.9;margin:0 0 23px}.explanation{border-top:1px solid var(--line);display:flex;gap:15px;padding:19px 0}.section-index{font-family:monospace;color:#6b7288;font-size:12px;padding-top:3px}.explanation h3{font-size:14px;margin:0 0 7px;color:#f3f2fa}.explanation p{font-size:15px;color:#b6b9cb;margin:0;line-height:1.85}.trivia{border-left:2px solid var(--lime);background:#c6ff6806;padding:12px 16px;margin:5px 0 20px}.trivia span{color:var(--lime);font-size:12px;font-weight:700}.trivia p{font-size:14px;line-height:1.8;margin:6px 0;color:#dadce6}#source{font-size:12px;color:#b0b7ca;text-underline-offset:4px}footer{padding-top:24px}.rarities{display:flex;gap:30px;flex-wrap:wrap;font-size:13px}.rarities b{margin-right:7px}.rarities small{color:#8f97ac;margin-left:8px}.r-dot{color:#aad7e4}.sr-dot{color:#c9adff}.ssr-dot{color:#efffa4}footer p{font-size:11px;color:#888ea1;margin:14px 0 0;line-height:1.8}.rolling{animation:shuffle .18s 5}.revealed{animation:reveal .6s ease-out}.scan{pointer-events:none;position:absolute;inset:0;opacity:0;background:linear-gradient(110deg,transparent 25%,#ffffff38 49%,transparent 70%);border-radius:17px}.rolling+.scan{opacity:1;animation:sweep .7s infinite}@keyframes shuffle{0%,100%{transform:rotate(-2deg) scale(.98)}50%{transform:rotate(2deg) scale(.96)}}@keyframes reveal{0%{transform:rotateY(80deg) scale(.94);filter:brightness(2)}100%{transform:rotateY(0) scale(1);filter:brightness(1)}}@keyframes sweep{from{transform:translateX(-25%)}to{transform:translateX(25%)}}@media(min-width:1450px){main{padding-top:50px}.intro{margin-bottom:36px}}@media(max-width:1240px){main{margin:0 30px}h1{font-size:25px}.intro-note{font-size:12px}.reading{padding:28px}.draw-area{padding:24px}}@media(max-width:850px){.intro{display:block}.intro-note{margin-top:12px}.workspace{grid-template-columns:1fr 1fr}.reading{padding:24px 20px}.reading>h2{font-size:23px}.draw-area{padding:20px 16px}.chip-card{padding:20px 18px 0}.card-title h2{font-size:20px}.card-top>span{font-size:10px}.stage-top{font-size:11px}}@media(max-width:650px){header{height:70px;padding:0 20px}.brand{font-size:17px}.edition{font-size:10px}main{margin:0 16px;padding-top:25px}.intro{margin-bottom:23px}h1{font-size:25px}h1 span{display:block;margin-left:0}.intro-note{font-size:12px}.workspace{grid-template-columns:1fr;border-radius:16px}.draw-area{padding:22px}.card-stage{margin:22px auto;max-width:340px}.reading{padding:27px 24px;border-top:1px solid var(--line)}.reading>h2{font-size:25px}.rarities{gap:12px 22px}.chip-card{min-height:395px}.card-title h2{font-size:23px}.edition{letter-spacing:0}.summary{font-size:16px}.explanation p{font-size:16px}.trivia p{font-size:15px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* The machine is an interactive image, with a movable knob and capsule sprites. */
.workspace{align-items:start;background:#12141c;overflow:visible}.draw-area{border-radius:20px 0 0 20px;position:sticky;top:16px;align-self:start}.reading{border-radius:0 20px 20px 0}.machine{position:relative;width:min(100%,400px);aspect-ratio:1145/1374;margin:12px auto 4px;user-select:none;-webkit-user-select:none}.machine-shell{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.reservoir{position:absolute;left:19.65%;top:17.83%;width:60.7%;height:33.12%;border-radius:40% 40% 22% 22%;overflow:hidden;pointer-events:none}.inner-capsule{position:absolute;width:26%;height:auto;will-change:transform,left,top;pointer-events:none;filter:drop-shadow(0 4px 3px #0003)}.knob-wrap{position:absolute;left:50.05%;top:67.47%;width:23%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%}.knob-progress{position:absolute;inset:-6px;border-radius:50%;padding:4px;mask:radial-gradient(circle,transparent 62%,#000 65%);pointer-events:none}#knob{display:block;position:relative;width:100%;height:100%;border:0;padding:0;border-radius:50%;background:transparent;cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent}#knob:active{cursor:grabbing}#knob:focus-visible{outline:4px solid white;outline-offset:10px}#knob:disabled{cursor:wait}.grip{display:block;position:absolute;inset:0;border-radius:50%;background-image:url('machine.png');background-size:435% auto;background-position:50% 71.5%;background-repeat:no-repeat;will-change:transform;pointer-events:none}.grip span{position:absolute;top:10%;left:0;right:0;color:#1b2937;font-size:20px;line-height:1}.turn-guide{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;margin:12px 0 18px;color:#d7dbe5;font-size:14px}.turn-guide strong{color:var(--lime);font:14px monospace;letter-spacing:.08em}.draw-button{font-family:inherit;font-size:16px;padding:13px 20px}.pop-capsule{position:absolute;width:26%;aspect-ratio:1;left:50%;top:84%;opacity:0;transform:translate(-50%,-50%) scale(.25);pointer-events:none;z-index:5}.capsule-half{position:absolute;inset:0;background:url('capsule.png') center/contain no-repeat;transition:transform .4s,opacity .4s}.top-half{clip-path:inset(0 0 48% 0)}.bottom-half{clip-path:inset(52% 0 0 0)}.pop-capsule.popping{opacity:1;animation:capsule-pop .7s cubic-bezier(.2,.8,.2,1) forwards}.pop-capsule.opening .top-half{transform:translate(-15%,-70%) rotate(-25deg);opacity:0}.pop-capsule.opening .bottom-half{transform:translate(15%,55%) rotate(18deg);opacity:0}.pop-capsule.ssr{filter:drop-shadow(0 0 13px #d1ff9b) drop-shadow(0 0 25px #be8cff)}.pop-word{position:absolute;top:72%;left:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;color:white;font-size:28px;white-space:nowrap;font-weight:900;letter-spacing:.05em;text-shadow:0 2px 0 #50661c,0 0 18px #d0ff71;pointer-events:none;z-index:6}.pop-word.visible{animation:pop-word 1s ease-out forwards}.reading .card-stage{max-width:355px;margin:0 auto 27px}.reading .chip-card{min-height:0;padding:18px 22px 0}.reading .card-title{margin-top:15px}.reading .diagram{height:125px;margin-top:8px}.reading .card-bottom{padding:10px 0}.reading .schematic{margin-bottom:10px}.chip-card.n{border-color:#82929e;background:linear-gradient(140deg,#303c46,#171d27 70%)}.n .card-top strong,.n-dot{color:#cad4dd}.ssr.revealed{animation:ssr-reveal .8s ease-out,ssr-glow 3s ease-in-out infinite}.ssr .card-top strong{background-size:200% 100%;animation:rainbow-flow 4s linear infinite}.chip-card.ssr{background-size:180% 180%}.reading>.eyebrow{font-size:12px}.rarities{gap:15px 23px}.schematic{font-size:11px}.card-top>span{font-size:11px}.card-title #english{font-size:11px}#source{font-size:13px}.explanation p{font-size:16px}.trivia p{font-size:15px}.trivia span{font-size:14px}footer p{font-size:12px}
@keyframes capsule-pop{0%{opacity:0;transform:translate(-50%,-30%) scale(.2) rotate(-35deg)}25%{opacity:1}65%{transform:translate(-50%,-170%) scale(1.8) rotate(15deg)}100%{opacity:1;transform:translate(-50%,-115%) scale(1.65) rotate(0)}}@keyframes pop-word{0%,15%{opacity:0;transform:translate(-50%,-50%) scale(.6)}45%,85%{opacity:1;transform:translate(-50%,-160%) scale(1)}100%{opacity:0;transform:translate(-50%,-180%) scale(1.1)}}@keyframes ssr-glow{0%,100%{box-shadow:0 0 20px #b8ff9940,0 0 45px #b282ff25}50%{box-shadow:0 0 24px #a0eaff70,0 0 55px #ffb0e545}}@keyframes ssr-reveal{0%{transform:rotateY(75deg) scale(.92);filter:brightness(2.5)}100%{transform:rotateY(0) scale(1);filter:brightness(1)}}@keyframes rainbow-flow{to{background-position:200% 0}}
@media(max-width:850px) and (min-width:651px){.workspace{grid-template-columns:1fr 1.05fr}.turn-guide{font-size:12px}.grip span{font-size:15px}.stage-top{flex-wrap:wrap;gap:2px}.card-title h2{font-size:20px}}
@media(max-width:650px){.draw-area{position:relative;top:auto;border-radius:16px 16px 0 0;padding:20px}.reading{border-radius:0 0 16px 16px}.machine{max-width:340px;margin-top:12px}.turn-guide{font-size:13px}.pop-word{font-size:25px}.reading .card-stage{margin-bottom:24px}.reading .diagram{height:145px}.stage-top{font-size:12px}.grip span{font-size:18px}.reading .chip-card{padding:22px 24px 0}.reading .card-title{margin-top:20px}.rarities{font-size:12px;gap:10px 20px}}
@media(prefers-reduced-motion:reduce){.pop-capsule.popping{opacity:1;transform:translate(-50%,-110%) scale(1.4)}.pop-word.visible{opacity:1}.inner-capsule{will-change:auto}}

#card{scroll-margin-top:22px}
/* One draw, four distinct scenes. */
[hidden]{display:none!important}body[data-screen="suspense"],body[data-screen="reveal"]{overflow:hidden}main.game{max-width:none;margin:0;padding:0}.play-screen{min-height:100svh;display:grid;place-items:center;padding:18px;background:radial-gradient(ellipse at 50% 43%,#272e46 0,#111620 43%,#0b0d13 78%)}.play-screen .draw-area{position:relative;top:auto;align-self:auto;width:min(100%,440px);padding:0 22px;background:none;border:0;border-radius:0}.play-screen .stage-top{font-size:12px;align-items:center;justify-content:center;color:#bcc6d6}.play-screen #count{display:none}.play-screen .machine{width:min(100%,370px,calc((100svh - 210px)*.8333));min-width:190px;margin:12px auto 4px}.play-screen .turn-guide{margin:8px 0 15px;gap:3px}.play-screen .draw-meta{justify-content:center;gap:18px;font-size:11px;color:#8f99ab;margin-top:12px}.play-screen .draw-button{max-width:340px;margin:auto}.play-screen .grip span{font-size:clamp(14px,2.5vh,20px)}.result-screen{max-width:1080px;margin:0 auto;padding:26px 28px 40px;animation:lesson-in .45s ease-out}.result-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px;font-size:14px;color:#9ba6bd}.back-button{font:inherit;color:#d8e0ec;background:none;border:1px solid #303b4e;padding:10px 15px;border-radius:8px;cursor:pointer}.back-button:hover{border-color:#c7ff74;color:#c7ff74}.back-button:focus-visible{outline:2px solid white;outline-offset:4px}.result-screen .reading{padding:34px;display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr);gap:38px;background:#131720;border:1px solid #2c3546;border-radius:20px;align-items:start}.result-screen .card-stage{width:100%;max-width:390px;position:sticky;top:34px;margin:0}.result-screen .chip-card{padding:25px 25px 0}.result-screen .card-title{margin-top:25px}.result-screen .diagram{height:170px;margin-top:16px}.result-screen .card-bottom{padding:15px 0}.lesson-copy>.eyebrow{color:#b9c4db;font-size:12px}.lesson-copy>h2{font-size:27px;line-height:1.6;margin:12px 0 16px;outline:none}.lesson-copy .summary{margin-bottom:24px}.again-button{max-width:390px;margin:25px auto 0}.result-screen footer{padding-top:28px}.cinematic{position:fixed;inset:0;z-index:100;display:grid;place-items:center;isolation:isolate;overflow:hidden;background:#edf2ff;color:#293047;padding:28px}.light-field{position:absolute;inset:-15%;z-index:-1;background:radial-gradient(ellipse at center,#fff 10%,#e5edff 55%,#c3cbe0 100%)}.suspense .light-field{animation:white-bloom 1.3s ease-in-out both}.suspense.ssr .light-field{background:conic-gradient(from 20deg at 50% 50%,#ffb8db,#ffe7a3,#c5ffbb,#acfff7,#b8caff,#e2b8ff,#ffb8db);animation:rainbow-bloom 1.3s ease-in-out both}.suspense-content{text-align:center;animation:suspense-arrive .3s ease-out}.suspense-content p{font-size:clamp(20px,4vw,30px);font-weight:800;letter-spacing:.08em;margin:18px 0}.suspense-mark{font-size:75px;line-height:1;text-shadow:0 0 20px #fff}.reveal{background:#0b0e19;color:#f4f7ff}.reveal .light-field{background:radial-gradient(ellipse at center,#56648570,transparent 65%),#0c101a;animation:none}.reveal.sr .light-field{background:radial-gradient(ellipse at center,#805fc67a,transparent 67%),#10121f}.reveal.r .light-field{background:radial-gradient(ellipse at center,#77bdc955,transparent 67%),#0c1721}.reveal.ssr .light-field{background:conic-gradient(from 0deg at 50% 50%,#c971ba55,#cfc17255,#86d49e55,#73c6c755,#9180ce55,#c971ba55),radial-gradient(ellipse at center,#383c5c,#0b0d17 75%);animation:rainbow-drift 2s ease-in-out both;filter:blur(30px)}.reveal-content{text-align:center;width:min(100%,960px);animation:title-burst .5s cubic-bezier(.15,.75,.2,1.15) both}.reveal-stars{font-size:clamp(25px,5vw,45px);color:#edf5ff;letter-spacing:.35em;line-height:1.4;text-shadow:0 0 20px #c5d4ff;margin-bottom:8px}#reveal-rarity{font-family:Arial,sans-serif;font-weight:900;font-style:italic;font-size:clamp(70px,16vw,150px);line-height:1.1;letter-spacing:-.04em;margin:0 0 18px;color:#c9d7e9;text-shadow:0 0 45px #a0b6ff55}.sr #reveal-rarity{color:#dcc2ff}.r #reveal-rarity{color:#a4e7f3}.ssr #reveal-rarity{color:transparent;background:linear-gradient(110deg,#ffdda0,#e8ffbd,#a0fff3,#ceb1ff,#ffbadd,#ffdda0);background-size:180% 100%;background-clip:text;text-shadow:none;filter:drop-shadow(0 0 24px #d6baff85);animation:rainbow-flow 3s linear infinite}#reveal-name{font-size:clamp(30px,6.5vw,64px);line-height:1.45;font-weight:900;letter-spacing:.02em;overflow-wrap:anywhere;text-wrap:balance;margin:0 auto;max-width:18em;text-shadow:0 3px 3px #0006,0 0 35px #b1c1ff45}#reveal-tag{color:#d1d7e8;font-size:clamp(14px,2.5vw,18px);margin:24px 0 0}.ssr .reveal-stars{color:#fff1b3;text-shadow:0 0 24px #f1c5ff}
@keyframes white-bloom{0%{opacity:.3;transform:scale(.8)}65%{opacity:1;transform:scale(1.12)}100%{opacity:.85;transform:scale(1.04)}}@keyframes rainbow-bloom{0%{opacity:.4;transform:rotate(-15deg) scale(.95);filter:blur(15px)}65%{opacity:1;transform:rotate(20deg) scale(1.15);filter:blur(25px)}100%{opacity:.9;transform:rotate(35deg) scale(1.1);filter:blur(20px)}}@keyframes rainbow-drift{from{transform:rotate(0) scale(1.1)}to{transform:rotate(35deg) scale(1.25)}}@keyframes title-burst{0%{opacity:0;transform:scale(1.55);filter:blur(10px)}45%{opacity:1;transform:scale(.96);filter:blur(0)}100%{opacity:1;transform:scale(1)}}@keyframes suspense-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes lesson-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.result-screen{padding:18px 16px 30px}.result-screen .reading{display:block;padding:24px 20px}.result-screen .card-stage{position:relative;top:auto;max-width:340px;margin:0 auto 28px}.result-screen .diagram{height:145px}.result-screen .card-title h2{font-size:23px}.lesson-copy>h2{font-size:25px}.result-nav{margin-bottom:18px}.play-screen{padding:12px}.play-screen .draw-area{padding:0 14px}.play-screen .machine{max-width:335px}.cinematic{padding:24px 20px}#reveal-name{font-size:clamp(30px,7.5vw,46px)}.result-screen footer .rarities{gap:12px 16px}}
@media(prefers-reduced-motion:reduce){.cinematic *,.result-screen{animation:none!important;transition:none!important}.suspense .light-field{opacity:.65}.reveal-content{opacity:1;transform:none;filter:none}}

.announcements{margin:22px auto 0;max-width:360px;border-top:1px solid #40516b;padding-top:4px;text-align:left}.announcements article{padding:13px 0;border-bottom:1px solid #2a3547}.announcements strong{display:block;color:#d6ff94;font-size:15px;overflow-wrap:anywhere}.announcements time{display:block;color:#b9c8df;font-size:13px;margin-top:4px}.announcements p{font-size:14px;white-space:pre-wrap;color:#d2dae8;margin:6px 0 0;overflow-wrap:anywhere}.admin-entry{display:block;width:fit-content;margin:20px auto 0;font-size:12px;color:#899ab4;text-underline-offset:4px}#catalog-error{margin-top:15px;font-size:14px;color:#ffcecd;text-align:center}.part-photo{width:100%;height:100%;object-fit:contain;border-radius:8px}.play-screen .machine{min-width:150px}.play-screen .draw-meta{font-size:12px}.card-title #english{overflow-wrap:anywhere}#number{overflow-wrap:anywhere;max-width:50%;text-align:right}#tagline{overflow-wrap:anywhere}

/* Keep advertising separate from game actions; never overlay the machine. */
.ad-placement{max-width:728px;width:100%;margin:160px auto 0;padding:0;min-height:120px}.ad-label{font-size:12px;letter-spacing:.08em;text-align:center;color:#9aaabd;margin:0 0 12px}.ad-placement .adsbygoogle{min-height:90px;width:100%}.privacy-link{display:block;text-align:center;font-size:12px;color:#93a4bc;margin:26px auto 0;width:fit-content;text-underline-offset:4px}.play-links{display:flex;justify-content:center;gap:20px;margin-top:20px}.play-links .admin-entry,.play-links .privacy-link{margin:0;font-size:12px}.ad-placement[hidden]{display:none!important}