/* 第2版：みみのしゃらしゃら推し色UI。デザイン見本専用。 */
:root {--mimi-accent:#9c426f;--mimi-deep:#84355f;--mimi-pale:#ffeaf2;--mimi-white:#fff9fc;--mimi-edge:#e6b0cc;--mimi-glow:rgba(196,85,138,.24);--mimi-letter:#6b3d56;--mimi-glitter-alpha:.8}
html{scroll-behavior:smooth}
body{background:radial-gradient(ellipse 65% 38% at 15% 8%, var(--mimi-pale), transparent),radial-gradient(ellipse 45% 40% at 95% 54%,var(--mimi-pale),transparent),#fffafd;color:var(--mimi-letter);transition:background-color .3s ease}
main{position:relative;z-index:2}
header{background:linear-gradient(105deg,var(--mimi-pale),#fff,var(--mimi-pale))!important;border-bottom:1px solid var(--mimi-edge)!important}
.brand-bow{filter:drop-shadow(0 3px 4px var(--mimi-glow))}
.brandmark h1,.brandmark p,.mimi-section-head h2,.mimi-section-head>span,h2,h3,.mimi-daily-heading{color:var(--mimi-deep)!important}
header .brand-heart,.header-stars,.mimi-section-head p{color:var(--mimi-accent)!important}
.panel,.customizer{border-color:var(--mimi-edge)!important;box-shadow:0 9px 28px var(--mimi-glow)!important}
.panel{background:linear-gradient(145deg,#fff 42%,var(--mimi-white))!important}
.hero{background:linear-gradient(140deg,var(--mimi-pale) 0%,#fff 76%)!important;border-color:var(--mimi-edge)!important}
.mimi-daily-note,.my-intro{background:linear-gradient(135deg,var(--mimi-white),var(--mimi-pale),#fff)!important}
.tabbar{background:color-mix(in srgb,var(--mimi-pale) 55%,white 45%)!important;border-color:var(--mimi-edge)!important}
.tabbtn{background:linear-gradient(140deg,#fff,var(--mimi-pale))!important;color:var(--mimi-deep)!important;border-color:var(--mimi-edge)!important}
.tabbtn.active{background:linear-gradient(135deg,var(--mimi-accent),var(--mimi-deep))!important;color:white!important;border-color:transparent!important;box-shadow:0 6px 16px var(--mimi-glow)!important}
button:not(.theme-option):not(.tabbtn):not(.mimi-inner):not(.mimi-coltab):not(.secondary):not(.mimi-text-link){background:linear-gradient(135deg,var(--mimi-accent),var(--mimi-deep))!important;box-shadow:0 5px 12px var(--mimi-glow)!important;color:white}
button.secondary,.mimi-inner,.mimi-coltab{background:var(--mimi-pale)!important;color:var(--mimi-deep)!important;border-color:var(--mimi-edge)!important}
.mimi-inner.active,.mimi-coltab.active{background:var(--mimi-accent)!important;color:white!important}
.count,.mini strong,.mimi-summary-num,.mimi-daily-note p{color:var(--mimi-deep)!important}
.dot.filled{background:linear-gradient(140deg,var(--mimi-accent),var(--mimi-deep))!important;color:white!important;border-color:var(--mimi-accent)!important}
.dot:not(.filled){background:linear-gradient(145deg,#fff,var(--mimi-white));border-color:var(--mimi-edge)!important;color:var(--mimi-deep)!important}
.dot:nth-child(15),.dot:nth-child(30){background:#fff8db!important;color:#947331!important;outline-color:#edc066}
.mimi-card-summary,.reward,.mini,.gacha-card,.collection-card{border-color:var(--mimi-edge)!important}
.mini,.reward,.gacha-card{background:linear-gradient(120deg,#fff,var(--mimi-white))!important}
.mimi-go{box-shadow:0 7px 16px var(--mimi-glow)!important}
/* ドロップダウン：現在の色が常に見える */
.customizer{background:linear-gradient(130deg,#fff,var(--mimi-white))!important}
.theme-pick-details{border-color:var(--mimi-edge)!important;overflow:hidden}
.theme-pick-details summary{display:flex;gap:10px;align-items:center;background:linear-gradient(120deg,#fff,var(--mimi-white));font-size:14px!important}
.theme-pick-details summary::after{content:'▾';margin-left:auto;float:none}
.theme-pick-details[open] summary::after{content:'▴'}
#selectedThemeSwatch{width:26px;height:26px;border-radius:50%;flex:0 0 26px;background:var(--mimi-accent);border:2px solid white;box-shadow:0 0 0 1px var(--mimi-edge),0 3px 7px var(--mimi-glow)}
#selectedThemeName{flex:1;color:var(--mimi-deep);text-align:left}
.theme-choices .theme-option{background:white!important;transition:transform .2s ease,border-color .2s ease}
.theme-option[aria-pressed=true]{border-color:var(--mimi-accent)!important;box-shadow:0 0 0 2px var(--mimi-glow)!important}
.theme-swatch{box-shadow:inset 0 0 0 2px #ffffffa0,0 1px 5px #0001}
.color-restored-note{display:block;margin:8px 3px;color:var(--mimi-deep);font-size:12px}
.fx-tip{display:block;margin:8px 0 0;color:var(--mimi-deep);font-size:12px}
/* 背景グリッター：独立したレイヤーで画面全体をしゃらしゃら流れる */
.mimi-glitter-field{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;isolation:isolate;opacity:var(--mimi-glitter-alpha)}
.glitter-piece{position:absolute;top:-13vh;left:var(--left);font-size:var(--size);color:var(--mimi-accent);text-shadow:0 0 7px white,0 0 11px var(--mimi-accent);filter:drop-shadow(0 0 2px #fff);animation:mimiShara var(--duration) linear var(--delay) infinite;will-change:transform,opacity}
.glitter-piece:nth-child(5n){color:#eabb62}.glitter-piece:nth-child(7n){color:#aa9be3}
@keyframes mimiShara {0%{transform:translate3d(0,-12vh,0) rotate(-20deg) scale(.72);opacity:0}12%{opacity:.95}85%{opacity:.72}100%{transform:translate3d(var(--drift),118vh,0) rotate(390deg) scale(1.14);opacity:0}}
.mimi-glitter-off .mimi-glitter-field{display:none!important}
.mimi-glitter-static .glitter-piece{animation:none!important;top:var(--static-top);opacity:.6;transform:rotate(20deg)}
/* ガチャ機はCSSで描画し、透明な切り抜き画像を重ねない */
#trialGacha{border:2px solid var(--mimi-edge)!important;background:linear-gradient(160deg,#fff,var(--mimi-white))!important}
.mimi-gacha-stage{padding:19px!important;overflow:hidden;background:radial-gradient(ellipse at 42% 42%,#fffde8 0,transparent 38%),radial-gradient(ellipse at 76% 10%,var(--mimi-pale),transparent 55%),linear-gradient(140deg,var(--mimi-white),#fff,var(--mimi-pale))!important;border:2px solid var(--mimi-edge)!important;box-shadow:inset 0 4px 25px #fff,0 9px 24px var(--mimi-glow);isolation:isolate}
.mimi-gacha-stage:before{content:'✦　✧　♡　✦　☆　✧'!important;inset:34px 0 auto 0!important;animation:mimiTwinkle 4s ease-in-out infinite alternate;opacity:.4!important;color:var(--mimi-accent)!important;letter-spacing:1.8vw}
.mimi-gacha-stage:after{content:'';background:radial-gradient(circle at 20% 18%,#fff9 0 2px,transparent 4px),radial-gradient(circle at 85% 29%,#fff 0 3px,transparent 7px),radial-gradient(circle at 12% 83%,#fff 0 2px,transparent 5px);position:absolute;inset:0;pointer-events:none;z-index:0;animation:mimiTwinkle 3s ease-in-out infinite alternate}
.mimi-stage-flex{z-index:2;gap:16px!important}
.gacha-stage-caption{color:var(--mimi-deep)!important}
.mimi-machine-wrap{width:49%;height:352px;display:flex;align-items:center;justify-content:center;position:relative}
.mimi-css-machine{position:relative;width:260px;height:320px;filter:drop-shadow(0 15px 12px var(--mimi-glow));z-index:1;transform-origin:center bottom}
.mimi-css-machine .machine-globe{position:absolute;top:11px;left:24px;width:214px;height:190px;border:10px solid #ef92b7;border-radius:49% 49% 42% 42%;background:linear-gradient(132deg,#ffffffd9 0%,#ffffff24 20%,#ffb8df15 41%,#fff8fd50 74%),linear-gradient(to bottom,transparent 60%,#e87eaa35);box-shadow:inset -9px -12px 15px #df78a34d,inset 11px 14px 14px #fff,0 4px 0 #fff8fe,0 0 0 3px #b85c8e80;overflow:hidden;z-index:3}
.machine-globe .machine-shine{position:absolute;top:8px;left:21px;width:53px;height:91px;border-radius:50%;transform:rotate(37deg);background:linear-gradient(90deg,#fff9,#fff3);filter:blur(1px);z-index:5;pointer-events:none}
.machine-globe .machine-ball{position:absolute;width:70px;height:70px;border-radius:50%;background:linear-gradient(166deg,#fff 3%,#fff8 8%,transparent 32%),linear-gradient(177deg,var(--balltop) 0 49%,#fff 50% 53%,var(--ballbottom) 55% 100%);box-shadow:inset -9px -9px 12px #833c6840,inset 7px 8px 8px #fff9,0 4px 7px #aa5b8950;border:2px solid #ffffff90}
.machine-ball:nth-child(1){left:8px;bottom:-7px;transform:rotate(15deg)}.machine-ball:nth-child(2){left:63px;bottom:9px;transform:rotate(-15deg)}.machine-ball:nth-child(3){left:119px;bottom:-5px;transform:rotate(30deg)}.machine-ball:nth-child(4){left:5px;bottom:55px;transform:rotate(-16deg)}.machine-ball:nth-child(5){left:70px;bottom:74px;transform:rotate(14deg)}.machine-ball:nth-child(6){left:127px;bottom:64px;transform:rotate(-9deg)}
.mimi-css-machine .machine-neck{position:absolute;left:15px;top:182px;width:229px;height:20px;border-radius:12px;background:linear-gradient(#ffe1ef,#d85d96,#ffcde4);border:3px solid #f8bfd6;z-index:5}
.mimi-css-machine .machine-body{position:absolute;left:27px;top:195px;width:204px;height:118px;border-radius:13px 13px 23px 23px;background:linear-gradient(110deg,#ffd6e5,#e77ca9 41%,#ce5388 70%,#f8a5c5);border:4px solid #f5b3cf;box-shadow:inset 10px 0 8px #ffffff9f,inset -9px 0 10px #922a6b35;z-index:4}
.machine-brand{position:absolute;left:0;right:0;top:8px;color:#fff;font-size:11px;font-weight:900;letter-spacing:3px;text-shadow:0 1px 4px #9d466f;text-align:center}
.mimi-css-machine .machine-knob{position:absolute;left:29px;top:36px;width:72px;height:68px;border:8px solid #ffe5f0;border-radius:50%;background:radial-gradient(circle at 28% 24%,#fff,#ffbed8 55%,#b84f86);box-shadow:0 4px 1px #9a4979,0 0 0 3px #c46095;display:grid;place-items:center;color:#a9477b;font-size:28px;text-shadow:0 1px 2px #fff}
.machine-knob span{display:inline-block;transform:rotate(24deg)}
.mimi-css-machine .machine-slot{position:absolute;right:13px;bottom:4px;width:81px;height:68px;background:linear-gradient(145deg,#8c2f61,#e48eb3);border:7px solid #ffd8e8;box-shadow:inset 3px 5px 8px #772a57,0 2px 3px #8c3153;border-radius:23px 23px 11px 11px;overflow:hidden}
.machine-slot::after{content:'';position:absolute;inset:10px 9px 5px;border:2px solid #ffdef0;border-radius:50%;opacity:.48}
.machine-feet{position:absolute;left:13px;right:12px;bottom:0;height:21px;border-radius:8px 8px 16px 16px;background:linear-gradient(#ed91ba,#be427d);z-index:5}
.machine-capsule-out{position:absolute;right:-10px;bottom:0;width:77px;height:75px;border-radius:50%;z-index:7;opacity:0;transform:translateY(-35px) scale(.65);background:linear-gradient(172deg,#fff9 0 8%,transparent 28%),linear-gradient(178deg,#ff96bc 0 48%,white 49% 53%,#d47ac9 55% 100%);border:3px solid #ffe5f1;box-shadow:inset -8px -8px 13px #9b548159,0 9px 12px #ae528050}
.machine-capsule-out::after{content:'✦';position:absolute;left:25px;top:18px;color:#fff;font-size:21px}
.mimi-gacha-stage.spinning .mimi-css-machine{animation:mimiMachineRock .48s ease-in-out 2}
.mimi-gacha-stage.spinning .machine-ball{animation:mimiBallsWobble .38s ease-in-out 3}
.mimi-gacha-stage.spinning .machine-knob span{animation:mimiKnobRotate .75s ease-in-out}
.mimi-gacha-stage.spinning .machine-capsule-out{animation:mimiCapsuleRoll 1.1s ease-in forwards}
.mimi-gacha-stage.revealed .machine-capsule-out{opacity:1;transform:translateY(0) scale(1)}
@keyframes mimiMachineRock{0%,100%{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}
@keyframes mimiBallsWobble{0%,100%{translate:0 0}50%{translate:7px -6px}}
@keyframes mimiKnobRotate{to{transform:rotate(360deg)}}
@keyframes mimiCapsuleRoll{0%{opacity:0;transform:translate(-40px,-60px) scale(.6)}40%{opacity:1;transform:translate(-9px,-6px) rotate(-30deg)}70%{transform:translate(8px,8px) rotate(15deg)}100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}}
@keyframes mimiTwinkle{to{opacity:.95;filter:brightness(1.25)}}
/* カード：読みやすい本文と、縁で揺れるホログラム風の光 */
.mimi-example-card,.trial-card{overflow:hidden;isolation:isolate;position:relative}
.mimi-example-card{border:4px solid var(--mimi-edge)!important;transform:rotate(0deg)!important;background:linear-gradient(135deg,#fff,var(--mimi-pale),#fff)!important;box-shadow:0 0 0 6px #ffffff99,0 16px 35px var(--mimi-glow)!important}
.mimi-example-card::before{content:'✧　♡　✦';position:absolute;inset:18% 0 auto!important;font-size:35px;color:var(--mimi-accent);opacity:.16;pointer-events:none;z-index:0}
.mimi-example-card::after,.trial-card::after{content:'';position:absolute;inset:-90% -110%;pointer-events:none;background:linear-gradient(110deg,transparent 43%,#ffffff12 47%,#ffffffc9 51%,#ffffff10 55%,transparent 62%);transform:translateX(-55%) rotate(8deg);animation:mimiFoilSweep 5.4s ease-in-out infinite;z-index:1}
.mimi-example-card h3,.mimi-example-card p,.mimi-card-sign{position:relative;z-index:2;color:var(--mimi-deep)!important}
.mimi-example-card h3{font-size:21px;line-height:1.7}
.mimi-ribbon{background:linear-gradient(135deg,#d6a63f,#ffe5a2,#b8802b)!important;border:2px solid #fff1c1!important;z-index:3}
.mimi-example-card.card-r{border-color:#bca5ed!important;background:linear-gradient(135deg,#f4ecff,#fff,#eaf6ff)!important;box-shadow:0 0 22px #aa97ef80,0 13px 27px #b6a6da70!important}
.mimi-example-card.card-sr{border-color:#e5b14e!important;background:linear-gradient(135deg,#fff4c9,#fff,#ffedce)!important;box-shadow:0 0 28px #f1bd60af,0 13px 27px #d5ac72a0!important}
.mimi-example-card.card-sr::before{content:'✦　👑　✦';opacity:.3}
.trial-card{border-width:3px!important;box-shadow:0 3px 6px #fff inset,0 5px 12px #b66c9433!important;min-height:162px}
.trial-card.rarity-N{background:linear-gradient(145deg,#fff,#ffdeed,#fff)!important;border-color:#db94b7!important}
.trial-card.rarity-R{background:linear-gradient(145deg,#efeaff,#fff,#e1edff)!important;border-color:#a49ce6!important}
.trial-card.rarity-SR{background:linear-gradient(140deg,#ffecbb,#fff9e3,#ffdf96)!important;border-color:#daa745!important;box-shadow:0 0 15px #f1be628c!important}
.trial-card strong,.trial-card span,.trial-card small{position:relative;z-index:2}
.trial-card span{font-weight:700;color:#674156!important;line-height:1.7}
.trial-card::before{content:'✦　✧';position:absolute;top:14%;left:4px;right:4px;text-align:center;color:#fff;font-size:18px;opacity:.75;pointer-events:none}
@keyframes mimiFoilSweep{0%,18%{transform:translateX(-70%) rotate(8deg)}52%,100%{transform:translateX(70%) rotate(8deg)}}
@media(max-width:700px){.mimi-machine-wrap{height:300px}.mimi-css-machine{transform:scale(.88);transform-origin:center center}.mimi-gacha-stage.spinning .mimi-css-machine{animation:mimiMachineRock .48s ease-in-out 2}.mimi-gacha-stage{padding:12px!important}.mimi-result-side{max-width:300px!important;margin:2px auto 10px!important}.mimi-stage-flex{gap:0!important}.mimi-example-card{min-height:188px}}
@media(prefers-reduced-motion:reduce){.glitter-piece,.mimi-gacha-stage::after,.mimi-gacha-stage::before,.mimi-example-card::after,.trial-card::after,.mimi-gacha-stage.spinning .mimi-css-machine,.mimi-gacha-stage.spinning .machine-ball,.mimi-gacha-stage.spinning .machine-knob span,.mimi-gacha-stage.spinning .machine-capsule-out{animation:none!important}.glitter-piece{opacity:.3!important}.mimi-gacha-stage.spinning .machine-capsule-out{opacity:1;transform:none}}

.mimi-preview-alert{padding:12px 16px!important;text-align:center!important;background:linear-gradient(120deg,#fff9ee,#fff,var(--mimi-pale))!important;border:1px dashed #e7bc6b!important;border-radius:16px!important;box-shadow:0 4px 15px #bd96531c!important}
.mimi-preview-alert p{margin:4px 0 0;font-size:12px}