:root{
  --ink:#10221b;
  --ink-2:#173328;
  --paper:#fbf4e7;
  --paper-2:#eee2cb;
  --gold:#f2c94e;
  --gold-deep:#9c6d17;
  --line:rgba(255,248,232,.17);
  --soft:#cad7cf;
  --muted:#aebeb4;
  --max:640px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#0d1714;color:#fff8e8;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif}
body{overflow-x:hidden;background:
  radial-gradient(100% 54% at 50% -14%,#3b6856 0%,#1b3228 44%,#0d1714 76%) fixed}
button,input{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #f2c94e;outline-offset:3px}
.portrait-ambient{pointer-events:none;position:fixed;inset:0;z-index:0;overflow:hidden;background:
  linear-gradient(90deg,rgba(8,18,15,.94),rgba(8,18,15,.67) 48%,rgba(8,18,15,.32)),
  linear-gradient(180deg,rgba(13,23,20,.05),rgba(13,23,20,.62) 72%,rgba(13,23,20,.96));
}
.portrait-ambient:before{content:"";position:absolute;right:-85px;top:80px;width:min(88vw,505px);height:calc(min(88vw,505px)*1.38);background:url("./assets/honda-portrait-bg.jpg") top center / cover no-repeat;opacity:.22;filter:grayscale(.4) saturate(.5);mix-blend-mode:screen}
.app{position:relative;z-index:1;width:min(100%,var(--max));min-height:100dvh;margin:0 auto;padding:calc(env(safe-area-inset-top) + 18px) 20px calc(env(safe-area-inset-bottom) + 112px)}
.boot{display:grid;place-items:center;min-height:70dvh;color:var(--soft);font-size:14px;letter-spacing:.04em}
.top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:27px}
.logo{border:0;background:transparent;padding:0;color:#fff8e8;text-align:left;font-size:29px;line-height:.77;font-weight:1000;letter-spacing:-.115em}
.logo small{display:block;margin-top:10px;color:#d0dbd4;font-size:8px;letter-spacing:.17em;font-weight:900}
.counter{border:1px solid rgba(255,248,232,.28);background:rgba(255,255,255,.06);color:#fff8e8;border-radius:17px;min-width:66px;padding:13px 10px;font-size:12px;font-weight:1000}
.ey{margin:0;color:#f0d77d;font-size:10px;line-height:1.3;font-weight:1000;letter-spacing:.16em}
.title{margin:11px 0 12px;color:#fff8e8;font-size:47px;line-height:1.04;letter-spacing:-.105em}
.title em{font-style:normal;color:var(--gold)}
.lead{margin:0;color:#d0dbd4;font-size:13px;line-height:1.55}
.tabs{display:flex;gap:8px;overflow:auto;margin:21px -2px 0;padding:0 2px 2px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:0 0 auto;border:1px solid rgba(238,246,239,.34);border-radius:999px;background:rgba(255,255,255,.07);color:#e8f0ea;padding:12px 16px;font-size:12px;font-weight:1000;white-space:nowrap}
.tabs button.on{background:var(--gold);border-color:var(--gold);color:#1b2b23}
.gacha-home{position:relative;isolation:isolate;overflow:hidden;margin-top:26px;min-height:270px;border:1px solid rgba(255,248,232,.26);border-radius:27px;padding:24px;background:linear-gradient(135deg,#346650,#183a2e 61%,#10241c);box-shadow:0 18px 37px rgba(0,0,0,.33)}
.gacha-home:after{content:"";position:absolute;z-index:-1;right:-78px;bottom:-96px;width:276px;height:276px;border:1px solid rgba(255,245,215,.18);border-radius:50%;background:radial-gradient(circle at 34% 26%,#fff6dfd8,#cad7ce80 34%,#6f968483 35%,#244b3c 63%,#112b22 64%);box-shadow:inset -20px -17px 27px rgba(8,27,20,.37)}
.gh-copywrap{max-width:67%}
.gh-ey{margin:0;color:#f0d77d;font-size:10px;font-weight:1000;letter-spacing:.14em}
.gacha-home h2{margin:12px 0 8px;font-size:31px;line-height:1.08;letter-spacing:-.1em}
.gacha-home h2 em{font-style:normal;color:var(--gold)}
.gh-copy{margin:0;color:#d9e4dc;font-size:12px;line-height:1.56}
.gh-draw{margin-top:20px;border:0;border-radius:15px;background:var(--gold);color:#17271e;padding:14px 16px;font-size:14px;font-weight:1000;box-shadow:0 6px 0 var(--gold-deep)}
.gh-draw span{margin-left:13px;font-size:18px}
.gh-orb{position:absolute;right:24px;bottom:30px;width:89px;height:89px;display:grid;place-items:center;border:4px solid #fff8e8;border-radius:50%;background:radial-gradient(circle at 34% 25%,#fff,#e1e5df 31%,#b8c9bd 32%,#557768 58%,#18392c 59%);box-shadow:inset -8px -8px 14px rgba(18,55,42,.5),0 10px 22px rgba(0,0,0,.45);color:#17392b;font-size:22px;font-weight:1000}
.section{margin-top:29px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:12px}
.section-head h2{margin:6px 0 0;font-size:28px;line-height:1.1;letter-spacing:-.08em}
.link{border:0;background:transparent;padding:5px 0;color:#f3d878;font-size:12px;font-weight:1000}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.match{min-height:130px;border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:14px;text-align:left;color:#fff8e8;box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.match i{display:block;font-size:26px;font-style:normal}.match small{display:block;margin-top:12px;color:#e6eee8;font-size:9px;font-weight:900}.match b{display:block;margin-top:5px;font-size:18px;letter-spacing:-.06em}.match span{display:block;margin-top:12px;color:#f3df95;font-size:11px;font-weight:900}
.match.O{background:linear-gradient(135deg,#d76826,#8e2f19)}.match.S{background:linear-gradient(135deg,#2c80d8,#164982)}.match.T{background:linear-gradient(135deg,#d64134,#7c211e)}.match.B{background:linear-gradient(135deg,#d3a02e,#68531c)}
.match.DE{background:linear-gradient(135deg,#3b4957,#19212c)}.match.CR{background:linear-gradient(135deg,#cf4736,#661e1d)}.match.ES{background:linear-gradient(135deg,#cf3d32,#6f1817)}.match.HR{background:linear-gradient(135deg,#3577b5,#1c3660)}.match.PA{background:linear-gradient(135deg,#235744,#11332a)}.match.MV{background:linear-gradient(135deg,#3467a6,#172d55)}.match.AV{background:linear-gradient(135deg,#54466d,#292140)}
.bottom-nav{position:fixed;z-index:6;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,var(--max));display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,#0d1714 38%)}
.bottom-nav button{min-height:55px;border:1px solid rgba(255,255,255,.12);border-radius:15px;background:rgba(255,255,255,.06);color:#c9d4cd;padding:7px 4px;font-size:10px;font-weight:1000}
.bottom-nav button i{display:block;font-size:18px;font-style:normal;margin-bottom:3px}
.bottom-nav button.on{background:var(--gold);border-color:var(--gold);color:#17271e}
.back{border:0;background:transparent;padding:0;color:#f1d477;font-size:13px;font-weight:1000}
.gacha{position:relative;overflow:hidden;margin-top:18px;border:1px solid rgba(255,255,255,.22);border-radius:27px;padding:23px 18px 19px;text-align:center;background:radial-gradient(circle at 50% 18%,#5d8774,#203f33 48%,#0e2018 90%);box-shadow:0 20px 44px rgba(0,0,0,.42)}
.gacha:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 39%,transparent 0 18%,rgba(255,255,255,.06) 18.5% 19%,transparent 19.5% 30%,rgba(255,255,255,.05) 30.5% 31%,transparent 31.5%)}
.gacha>*{position:relative}.gacha h1{margin:12px 0 7px;font-size:40px;line-height:1;letter-spacing:-.11em}.gacha-copy{margin:0;color:#d4e1d9;font-size:12px;line-height:1.56}
.ball{width:185px;height:185px;margin:28px auto 20px;display:grid;place-items:center;border:8px solid #fff9e8;border-radius:50%;background:radial-gradient(circle at 34% 25%,#fff,#e2e5de 31%,#b8c8bc 32%,#557666 58%,#18362b 59%);box-shadow:inset -12px -13px 20px rgba(18,55,42,.5),0 18px 34px rgba(0,0,0,.58);color:#183b2d;font-size:38px;font-weight:1000}
.ball.shake{animation:shake .58s ease-in-out 2}@keyframes shake{25%{transform:rotate(-12deg) translateX(-9px)}75%{transform:rotate(12deg) translateX(9px)}}
.draw{width:100%;border:0;border-radius:17px;background:var(--gold);color:#18271f;padding:16px;font-size:17px;font-weight:1000;box-shadow:0 7px 0 var(--gold-deep)}
.rate{margin:14px 0 0;color:#c9d9cf;font-size:10px;font-weight:900;letter-spacing:.055em}
.result{margin-top:18px;text-align:left}.drawcard{border:2px solid var(--r);border-radius:21px;background:var(--paper);color:var(--ink);padding:18px;box-shadow:0 10px 20px rgba(0,0,0,.22)}.drawcard h2{margin:10px 0 8px;font-size:27px;line-height:1.4;letter-spacing:-.075em}.drawcard p{margin:0;color:#66736b;font-size:11px;line-height:1.55}.rare{font-size:10px;font-weight:1000;letter-spacing:.1em}.rare.L{color:#b77d0a}.rare.E{color:#8f48c5}.rare.R{color:#2a7da8}.result-actions{display:grid;grid-template-columns:1.1fr 1fr;gap:8px;margin-top:10px}.result-actions button{border:0;border-radius:14px;padding:14px 9px;font-size:13px;font-weight:1000}.again{background:var(--gold);color:#17271e}.detail-button{background:#e9dfcb;color:#23352c}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px}.stats div{border:1px solid rgba(255,255,255,.16);border-radius:15px;background:rgba(255,255,255,.06);padding:11px;text-align:left}.stats strong{display:block;color:#f5d66d;font-size:21px;line-height:1;letter-spacing:-.07em}.stats span{display:block;margin-top:4px;color:#cbd8d1;font-size:10px;font-weight:900}
.search{display:flex;align-items:center;gap:9px;margin-top:16px;border:1px solid rgba(255,255,255,.28);border-radius:15px;background:rgba(255,255,255,.07);padding:0 13px;color:#d8e3dc}.search input{width:100%;border:0;outline:0;background:transparent;color:#fff8e8;padding:14px 0;font-size:14px}.search input::placeholder{color:#aebeb4}
.list{display:grid;gap:10px;margin-top:15px}.quote{border:1px solid #e4d8c2;border-radius:19px;background:var(--paper);color:var(--ink);padding:15px;text-align:left;box-shadow:0 8px 18px rgba(0,0,0,.15)}.qtop{display:flex;justify-content:space-between;align-items:center;gap:8px;color:#657168;font-size:10px;font-weight:1000}.qmeta{max-width:76%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quote h3{margin:10px 0 8px;font-size:21px;line-height:1.4;letter-spacing:-.07em}.quote p{margin:0;color:#657168;font-size:11px;line-height:1.56}.tag{display:inline-block;margin-top:10px;border-radius:999px;background:#eee3ce;color:#5d695f;padding:4px 7px;font-size:9px;font-style:normal;font-weight:900}
.empty{padding:46px 10px;text-align:center;color:#c7d5cc;line-height:1.7}.chapter{margin-top:16px;border:1px solid rgba(255,255,255,.18);border-radius:20px;background:rgba(255,255,255,.08);padding:17px}.chapter h2{margin:7px 0;color:#f1d376;font-size:31px;letter-spacing:-.08em}.chapter p:last-child{margin:0;color:#d5e2da;font-size:12px}
.modal{position:fixed;z-index:20;inset:0;display:none;align-items:flex-end;padding:14px;background:rgba(0,0,0,.68)}.modal.open{display:flex}.sheet{position:relative;width:min(100%,var(--max));max-height:86dvh;overflow:auto;margin:auto;border-radius:27px 27px 17px 17px;background:var(--paper);color:var(--ink);padding:18px 20px 20px;box-shadow:0 -16px 45px rgba(0,0,0,.5)}.drag{width:44px;height:5px;margin:0 auto 15px;border-radius:999px;background:#d8cbb4}.close{float:right;width:42px;height:42px;border:0;border-radius:50%;background:#e9dfca;color:#1d362a;font-size:27px;line-height:1}.sheet h1{clear:both;margin:0;padding-top:18px;font-size:32px;line-height:1.42;letter-spacing:-.085em}.sheet p{color:#56625a;font-size:13px;line-height:1.7}.detail-meta{padding:12px 0;border-top:1px solid #ded1bc;border-bottom:1px solid #ded1bc;color:#627067;font-size:12px;font-weight:900}.detail-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}.detail-actions button{border:0;border-radius:15px;padding:14px;font-size:14px;font-weight:1000}.save{background:#214435;color:#fff8e7}.share{background:#e9dfcb;color:#23352c}.toast{position:fixed;z-index:30;left:50%;bottom:95px;transform:translate(-50%,20px);opacity:0;white-space:nowrap;border-radius:999px;background:#fff7e5;color:#1c2b22;padding:10px 14px;font-size:12px;font-weight:1000;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:380px){.title{font-size:42px}.gacha-home h2{font-size:28px}.gh-copywrap{max-width:70%}.app{padding-left:16px;padding-right:16px}.bottom-nav{padding-left:16px;padding-right:16px}.gacha h1{font-size:36px}}