:root{color-scheme:dark;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;background:#0b1220;color:#edf2ff}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(circle at 16% 5%,#23395a 0,transparent 27rem),radial-gradient(circle at 87% 19%,#35304c 0,transparent 24rem),#0b1220;min-height:100vh}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:#bdd2ff}
.app-shell{max-width:1180px;margin:auto;padding:0 24px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:25px 0 14px}
.brand{display:flex;min-width:0;gap:11px;align-items:center}
.brand-mark{display:grid;place-items:center;width:43px;height:43px;border:1px solid #bfa77d;border-radius:13px;color:#e8d3a6;background:#9d824728;font-size:28px}
.brand small,.brand strong{display:block}
.brand small{letter-spacing:.2em;color:#b8c3d7;font-size:10px}
.brand strong{font-family:Georgia,"Yu Mincho",serif;font-size:clamp(15px,2.4vw,22px);letter-spacing:.04em}
.topbar>.button{flex-shrink:0}
.hero{padding:12px 0 22px}
.eyebrow{margin:0 0 10px;color:#d9bc87;font-size:11px;font-weight:700;letter-spacing:.2em}
.hero h1{margin:0 0 13px;font-family:Georgia,"Yu Mincho",serif;font-size:clamp(31px,4.4vw,52px);font-weight:600;letter-spacing:.04em}
.hero>p:not(.eyebrow){margin:0;color:#bfc9dc;line-height:1.7}
.game-switch{display:inline-flex;max-width:100%;gap:5px;margin-top:16px;padding:5px;background:#111d31;border:1px solid #35435d;border-radius:14px}
.game-tab{min-width:0;border:0;border-radius:10px;padding:12px 19px;color:#b7c3d9;background:transparent;font-weight:700}
.game-tab span{font-size:12px;font-weight:400;margin-left:5px}
.game-tab.is-active{color:#fff;background:#344c72;box-shadow:0 3px 12px #0003}
.dashboard{display:grid;grid-template-columns:minmax(0,1.13fr) minmax(0,.87fr);gap:18px}
.panel{background:#141f32e8;border:1px solid #33435d;border-radius:20px;padding:25px;box-shadow:0 16px 48px #0002}
.panel-heading{display:flex;align-items:start;justify-content:space-between;gap:12px}
.panel h2,.notes h2{margin:0;font-size:20px;letter-spacing:.03em}
.pill{border:1px solid #ccad77;border-radius:999px;padding:6px 11px;color:#eed9ad;font-size:12px;white-space:nowrap}
.pill-muted{border-color:#465572;color:#bdc8db}
.featured-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;justify-content:center;min-height:190px;padding:25px;margin-top:19px;border:1px solid #c6a26980;border-radius:17px;background:linear-gradient(118deg,#66503755,#26395a),radial-gradient(circle at 83% 26%,#b79959 0,transparent 46%)}
.featured-card:after{content:"✦";position:absolute;right:15px;top:0;color:#f0d8a938;font-size:157px;line-height:1}
.featured-card>*{position:relative;z-index:1}
.featured-card .stars{color:#ffe2a8;letter-spacing:.13em}
.featured-card strong{font-family:Georgia,"Yu Mincho",serif;font-size:clamp(25px,3vw,34px)}
.featured-card #featuredType{color:#e0d8c9;font-size:13px}
.featured-card .featured-count{align-self:flex-start;margin-top:9px;padding:7px 11px;border:1px solid #dfc0898c;border-radius:999px;background:#101a2e99;color:#ffe1a5;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.four-line{min-height:44px;color:#c7d2e6;font-size:13px;line-height:1.6}
.action-row{display:flex;gap:12px}
.button{border:1px solid #576986;border-radius:11px;padding:11px 17px;min-height:44px;color:#edf2ff;background:#24334c;font-weight:700;transition:transform .15s,filter .15s}
.button:hover{filter:brightness(1.14);transform:translateY(-1px)}
.button:focus-visible,.game-tab:focus-visible,.icon-button:focus-visible,a:focus-visible{outline:3px solid #f1cb83;outline-offset:3px}
.button-primary{background:#4265a0;border-color:#6788c1}
.button-gold{background:#a77e43;border-color:#d3ab6b;color:#fff}
.button-quiet{background:#1d2b42;border-color:#465672}
.button-danger{background:#3d2731;border-color:#9b5967;color:#ffd6dc}
.action-row .button{flex:1;font-size:16px}
.subtle{color:#aebbd1;font-size:12px;line-height:1.65}
.banner-panel>.subtle{margin:14px 0 0}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px;margin:21px 0 23px}
.stat{min-height:92px;padding:15px;background:#1d2b41;border:1px solid #34445f;border-radius:13px}
.stat span{display:block;color:#b5c1d7;font-size:12px}
.stat strong{display:inline-block;margin-top:9px;font-size:26px;font-variant-numeric:tabular-nums}
.stat small{color:#aebbd1}
.progress-label{display:flex;justify-content:space-between;font-size:13px;color:#cbd5e5}
.progress-track{height:10px;overflow:hidden;margin:11px 0 13px;border-radius:99px;background:#2a3a56}
.progress-fill{width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7895ce,#e5bf82);transition:width .25s}
.results-panel,.history-panel{margin-top:18px}
.result-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px;margin-top:19px}
.result-card{min-height:123px;padding:14px;border-radius:14px;border:1px solid #465675;background:#223149;display:flex;flex-direction:column;justify-content:space-between;gap:7px;min-width:0}
.result-card.rarity-5{border-color:#d9af68;background:linear-gradient(150deg,#76552f,#2b3449)}
.result-card.rarity-4{border-color:#9d8ad2;background:linear-gradient(150deg,#4e4179,#263349)}
.result-card .stars{color:#f3d19a;letter-spacing:.03em;white-space:nowrap;font-size:13px}
.result-card.rarity-4 .stars{color:#d5c5ff}
.result-card strong{overflow-wrap:anywhere;font-size:14px}
.result-card small{color:#d1d9e8;font-size:11px}
.empty-state{grid-column:1/-1;padding:32px;text-align:center;border:1px dashed #4b5a73;border-radius:13px;color:#aebbd1}
.history-controls{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
label{display:block;color:#c8d3e5;font-size:12px;font-weight:700}
input,select,textarea{display:block;width:100%;margin-top:7px;padding:11px 12px;border:1px solid #52617a;border-radius:10px;color:#f4f7ff;background:#202e45;outline:none}
input:focus,select:focus,textarea:focus{border-color:#dcb981;box-shadow:0 0 0 2px #caa8723b}
textarea{resize:vertical;line-height:1.55}
.history-count{color:#aebbd1;font-size:12px;margin:19px 0 10px}
.history-list{display:grid;gap:7px}
.history-row{display:grid;grid-template-columns:70px minmax(0,1fr) 110px 120px;gap:10px;align-items:center;padding:11px 14px;border:1px solid #35445e;border-radius:11px;background:#1c293d}
.history-row .rarity{font-weight:800;color:#cfdbed}
.history-row.rarity-5 .rarity{color:#f6d297}
.history-row.rarity-4 .rarity{color:#d2b8ff}
.history-row strong{overflow-wrap:anywhere}
.history-row small{color:#9eafc7;text-align:right;font-size:11px}
.history-row .meta{font-size:12px;color:#bbc8db}
.pagination{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:17px}
.pagination button{min-width:35px;padding:7px 10px;border:1px solid #43536e;border-radius:8px;color:#edf2ff;background:#263650}
.pagination button[aria-current="page"]{background:#a77e43;border-color:#d3ab6b}
.pagination button:disabled{opacity:.43;cursor:default}
.notes{padding:29px 3px 14px;color:#aebbd1;font-size:13px;line-height:1.8}
.notes h2{color:#edf2ff;font-size:16px}
footer{padding:9px 0 31px;color:#8192ad;font-size:11px}
dialog{color:#edf2ff;background:#17233a;border:1px solid #60718e;border-radius:19px;box-shadow:0 24px 90px #0009}
dialog::backdrop{background:#060b16bd}
.settings-dialog{width:min(620px,calc(100vw - 24px));max-height:min(90vh,900px);overflow:auto;padding:26px}
.settings-dialog form>label{margin-top:17px}
.dialog-heading{display:flex;justify-content:space-between;gap:12px}
.dialog-heading h2,.confirm-dialog h2{margin:0;font-size:23px}
.icon-button{width:36px;height:36px;border:1px solid #4b5d79;border-radius:9px;color:#fff;background:#24354e;font-size:22px}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:23px}
.form-error{min-height:1em;color:#ffb7c2;font-size:12px}
.confirm-dialog{width:min(430px,calc(100vw - 24px));padding:26px}
.confirm-dialog p{line-height:1.7;color:#c5d0e1}
@media(max-width:850px){.dashboard{grid-template-columns:1fr}.result-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:580px){.app-shell{padding:0 15px}.topbar{padding-top:16px}.brand{gap:7px}.brand-mark{width:36px;height:36px;flex-shrink:0}.brand strong{font-size:13px;letter-spacing:0}.topbar>.button{padding:8px 10px}.hero{padding:8px 0 17px}.game-switch{display:flex}.game-tab{flex:1;padding:11px 5px;font-size:11px}.game-tab span{display:block;margin:3px 0 0}.panel{padding:18px;border-radius:16px}.result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.history-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.history-controls label:first-child{grid-column:1/-1}.history-row{grid-template-columns:50px minmax(0,1fr);gap:5px}.history-row .meta,.history-row small{text-align:left;grid-column:2}.panel-heading{align-items:center}.history-panel .panel-heading{align-items:start}.history-panel .button-danger{font-size:11px;padding:8px;min-height:38px}.stat strong{font-size:23px}}