@import url('navigation.css');
*{box-sizing:border-box}body{margin:0;background:#0b131b;color:#eaf7f5;font:15px system-ui,sans-serif}main{max-width:720px;margin:auto;padding:16px 16px 40px}a{color:#a3e4da}button{font:inherit;min-height:48px;border:1px solid #8ee7d744;border-radius:12px;background:#a3e4da;color:#102d30;cursor:pointer}button:disabled{opacity:.45;cursor:default}[hidden]{display:none!important}.page-heading{display:flex;align-items:center;gap:16px;margin:4px 0 24px}.page-heading h1{font-size:23px;margin:0}.page-back{display:grid;place-items:center;width:44px;height:44px;text-decoration:none;font-size:24px;border-radius:50%;background:#203039}#cStatus:empty,#cAvailability:empty{display:none}#cStatus,#cAvailability{text-align:center}.gacha-card,#cResult{border:1px solid #65bdbb35;background:linear-gradient(145deg,#1a2c36,#101d28);padding:22px 16px;border-radius:22px;text-align:center;margin:18px 0}.gacha-card h2{font-size:20px;margin:0 0 8px}.gacha-name{color:#b5c9cf;margin:0}.gacha-machine{width:150px;margin:22px auto;filter:drop-shadow(0 10px 16px #0005)}.gacha-globe{height:114px;border:4px solid #99e7e2;border-radius:70px 70px 30px 30px;background:radial-gradient(ellipse at 30% 18%,#e3ffff99,transparent 36%),#3a788666;position:relative;overflow:hidden}.gacha-globe i{position:absolute;width:34px;height:34px;border-radius:50%;background:linear-gradient(#fed47f 50%,#fff 51%);bottom:8px;left:16px;transform:rotate(24deg);border:1px solid #ffffff66}.gacha-globe i:nth-child(2){left:52px;bottom:4px;background:linear-gradient(#a8a3ff 50%,#fff 51%);transform:rotate(-27deg)}.gacha-globe i:nth-child(3){left:92px;bottom:10px;background:linear-gradient(#91e9dd 50%,#fff 51%)}.gacha-globe i:nth-child(4){left:35px;bottom:40px;background:linear-gradient(#ff9bba 50%,#fff 51%)}.gacha-globe i:nth-child(5){left:76px;bottom:43px;background:linear-gradient(#80c6ff 50%,#fff 51%)}.gacha-base{height:87px;background:linear-gradient(120deg,#97e4d8,#3b9297);border-radius:9px 9px 22px 22px;position:relative;color:#123139;display:flex;justify-content:space-around;padding:12px}.gacha-base span{font-size:25px}.gacha-base em{position:absolute;bottom:12px;width:53px;height:18px;background:#153c48;border-radius:12px 12px 6px 6px}.draw-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.draw-actions button{padding:10px 4px;display:grid;gap:6px;min-height:76px}.draw-actions button span{font-size:13px}.draw-actions button strong{font-size:15px}.coin{color:#9c6b13;text-shadow:0 1px #fff8}.item-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.item-card{min-width:0;display:flex;flex-direction:column;gap:10px;text-align:center;border:1px solid #729b9f55;border-radius:14px;background:#182934;padding:14px;overflow-wrap:anywhere}.item-card small{font-size:11px;color:#bed0d8}.item-card button{margin-top:auto;padding:8px}.item-art{width:76px;height:76px;margin:auto;display:grid;place-items:center;font-size:28px;color:#a8eee3;border-radius:50%;background:#213b45}.item-art svg{width:100%;height:100%}.rarity-UR{border-color:#e7bc57}.rarity-SR{border-color:#af86e4}.rarity-R{border-color:#56c2e1}#cResult{scroll-margin-top:80px}#cResume,#cMore{width:100%;padding:8px;margin:12px 0}dialog:not(.pg-menu){width:min(360px,calc(100vw - 32px));border:1px solid #6bd9ce55;border-radius:18px;padding:22px;background:#18303b;color:#ecffff}dialog::backdrop{background:#0009}.confirm-actions{display:flex;gap:10px}.confirm-actions button{flex:1}button:focus-visible,a:focus-visible{outline:3px solid #f4dd83;outline-offset:3px}@media(min-width:600px){.item-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.item-price{margin:0 0 2px;color:#f0dda6;font-weight:700;font-size:16px}.item-price .coin{color:#e3bf69}.frame-example{position:relative;width:96px;height:96px;background:transparent}.frame-example>svg{position:absolute;inset:0}.sample-frame{position:absolute;inset:0;pointer-events:none}.sample-frame svg{width:100%;height:100%}.shop-frame-help{text-align:center;line-height:1.7;color:#b9cfd3;font-size:12px;margin:0 0 20px}
.frame-example>svg{width:70%;height:70%;inset:15%}.shop-category{border:1px solid #729b9f55;border-radius:16px;margin:14px 0;background:#12212c}.shop-category>summary{font-size:18px;font-weight:700;padding:18px;cursor:pointer;min-height:60px}.shop-category>.item-grid{padding:0 12px 14px}.shop-category>summary:focus-visible{outline:3px solid #f4dd83;outline-offset:2px}
/* Gacha and shop headings stay centered independently of the back button. */
body:is([data-collection-page="gacha"],[data-collection-page="shop"]) .page-heading{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:10px;align-items:center}
body:is([data-collection-page="gacha"],[data-collection-page="shop"]) .page-heading h1{text-align:center;grid-column:2}
body[data-collection-page="gacha"] .gacha-card{--machine-light:#a3e4da;--machine-main:#48a4a5;--machine-dark:#205763;--machine-glass:#367e8a55;text-align:center}
body[data-collection-page="gacha"] .gacha-suffix{--machine-light:#ff929b;--machine-main:#ce293f;--machine-dark:#6e263c;--machine-glass:#bd506455;border-color:#d776854a;background:linear-gradient(145deg,#30222e,#171c29)}
body[data-collection-page="gacha"] .gacha-frame{--machine-light:#b0edbf;--machine-main:#4aaa77;--machine-dark:#205743;--machine-glass:#429a7055;border-color:#77c99b45;background:linear-gradient(145deg,#1c302b,#111f26)}
body[data-collection-page="gacha"] .gacha-machine{position:relative;margin:24px auto 28px;filter:drop-shadow(0 12px 14px #0006)}
body[data-collection-page="gacha"] .gacha-globe{border-color:var(--machine-light);background:radial-gradient(ellipse at 30% 18%,#efffff99,transparent 38%),var(--machine-glass);box-shadow:inset -9px -5px 16px #0002,inset 3px 2px 5px #fff2}
body[data-collection-page="gacha"] .gacha-globe i{box-shadow:0 3px 5px #0003}
body[data-collection-page="gacha"] .gacha-base{height:98px;border-top:5px solid var(--machine-light);background:linear-gradient(120deg,var(--machine-light),var(--machine-main));box-shadow:inset -6px 0 0 #00000012,inset 0 -5px 0 #0002;border-radius:9px 9px 20px 20px;padding:12px}
body[data-collection-page="gacha"] .gacha-base b{height:23px;padding:4px 7px;font:800 11px/15px system-ui;letter-spacing:.06em;border-radius:5px;background:var(--machine-dark);color:#effffa;box-shadow:0 1px 0 #fff4}
body[data-collection-page="gacha"] .gacha-base span{position:relative;display:grid;place-items:center;width:37px;height:37px;border-radius:50%;border:3px solid #efffffbb;background:var(--machine-dark);font-size:0;box-shadow:0 3px 0 #0003}
body[data-collection-page="gacha"] .gacha-base span::after{content:"";width:23px;height:7px;border-radius:4px;background:#edf5ed;transform:rotate(-30deg);box-shadow:0 2px 0 #0003}
body[data-collection-page="gacha"] .gacha-base em{bottom:12px;width:61px;height:19px;background:var(--machine-dark);box-shadow:inset 0 4px 3px #0005;border-bottom:2px solid #ffffff48}
body[data-collection-page="gacha"] .gacha-machine::after{content:"";display:block;height:8px;margin:0 9px;border-radius:0 0 6px 6px;background:var(--machine-dark)}
body[data-collection-page="gacha"] .gacha-suffix .gacha-globe{border-radius:76px 76px 22px 22px}
body[data-collection-page="gacha"] .gacha-frame .gacha-globe{border-radius:20px 20px 10px 10px}
body[data-collection-page="gacha"] .gacha-frame .gacha-base{border-radius:6px 6px 14px 14px}
body[data-collection-page="gacha"] .draw-actions button{background:var(--machine-light);color:#152d2d;border-color:transparent}

body[data-collection-page="inventory"] .page-heading{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;align-items:center;position:relative;padding-bottom:25px}body[data-collection-page="inventory"] .page-heading h1{grid-column:2;text-align:center}body[data-collection-page="inventory"] .inventory-edit-link{position:absolute;right:0;bottom:0;font-size:12px;color:#73b9ff;text-decoration:none;min-height:24px;display:flex;align-items:center}.inventory-category>summary{text-align:center}

@media(min-width:360px){body[data-collection-page="inventory"] .page-heading{padding-bottom:0}body[data-collection-page="inventory"] .inventory-edit-link{bottom:auto;top:50%;transform:translateY(-50%);font-size:10px}body[data-collection-page="inventory"] .page-heading h1{font-size:21px}}
