:root{color-scheme:dark;--bg:#101010;--surface:#222;--blue:#007bff;--muted:#aaa}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#fff;font:16px Arial,Helvetica,sans-serif;min-height:100vh;display:flex;flex-direction:column}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #8cceff;outline-offset:4px}button:disabled{cursor:not-allowed;opacity:.6}.brand{width:760px;max-width:calc(100% - 36px);position:relative;display:flex;align-items:center;flex-direction:column;margin:76px auto 52px;gap:12px}.brand #home{background:none;padding:0;width:100px;height:100px}.brand svg{width:100%;height:100%;filter:drop-shadow(0 3px 3px #000)}.ip{background:#222;border-radius:5px;box-shadow:0 5px #000;padding:8px 16px;font-weight:800;font-size:17px}.basket-pill{position:absolute;right:0;bottom:0;padding:9px 13px;background:#222;border-radius:7px;color:#aaa;font-size:13px}.basket-pill:hover{color:#fff}main{width:760px;max-width:calc(100% - 36px);margin:0 auto 100px;flex:1}.rank{display:block;position:relative;width:100%;text-align:left;background:linear-gradient(#0077ff,#14a6f7);border-radius:28px;padding:22px 24px;box-shadow:0 7px #078bbd,0 12px 22px #0002;min-height:245px;overflow:visible;margin:0 0 62px;transition:transform .15s}.rank:hover{transform:translateY(-3px)}.rank h1{margin:0 0 2px;font-size:32px;display:flex;align-items:center;gap:9px;letter-spacing:-.6px}.rank h1 svg{width:32px;height:32px}.rank .term{font-size:14px}.rank ul{list-style:none;margin:20px 0 8px;padding:0;font-size:14px;line-height:1.32}.rank li:before{content:'+'}.character{position:absolute;right:12px;bottom:-1px;height:271px;width:240px;filter:drop-shadow(4px 5px 0 #00579c55)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:46px 38px}.product{position:relative;text-align:center;background:var(--surface);border-radius:28px;padding:58px 15px 14px;box-shadow:0 7px #000;min-width:0}.key-art{position:absolute;width:85px;height:91px;top:-24px;left:50%;transform:translateX(-50%);filter:drop-shadow(0 3px 2px #0007)}.product h2{font-size:23px;letter-spacing:-.4px;margin:3px 0 4px}.price{font-size:14px;color:#bfbfbf;font-weight:700;margin:0 0 12px}.quantities{display:flex;gap:7px;margin-bottom:7px}.quantities button{background:#101010;border-radius:7px;flex:1;min-height:42px;font-weight:bold;font-size:13px;padding:0}.quantities button.selected{background:var(--blue)}.blue{background:var(--blue);font-weight:bold;border-radius:6px;padding:12px 20px;box-shadow:0 2px #0051ad}.add{width:100%;padding:9px 4px;font-size:14px}.popular{position:absolute;right:12px;top:10px;font-size:9px;font-weight:800;background:#dd6b12;padding:3px 6px;border-radius:9px}.panel{background:var(--surface);border-radius:28px;box-shadow:0 8px #000;margin:78px auto 0;overflow:hidden}.panel h1{margin:0;padding:24px;text-align:center;border-bottom:2px solid #292929;font-size:23px}.login-body{text-align:center;padding:24px 18px 34px}.editions{display:flex;justify-content:center;gap:9px;margin-bottom:26px}.editions button{background:#111;border-radius:6px;padding:14px 20px;font-weight:800;font-size:12px}.editions button.selected{background:var(--blue)}.username-form{display:flex;justify-content:center;max-width:360px;margin:0 auto}.username-form input{min-width:0;flex:1;width:190px;background:#eef0ff;color:#444;border:0;border-radius:5px 0 0 5px;padding:11px 12px;font-size:14px}.username-form .blue{border-radius:0 5px 5px 0;padding:11px 14px}.login-note{color:#aaa;font-size:12px;margin:20px auto 0;max-width:420px;line-height:1.6}.basket-panel{max-width:620px;margin-top:65px}.basket-heading{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:2px solid #292929}.basket-heading h1{padding:0;border:0;text-align:left;font-size:23px}.basket-heading small{display:block;font-size:11px;color:#aaa}.currency{background:var(--blue);border:0;border-radius:4px;padding:7px;font-size:12px;color:white}.basket-body{padding:22px}.account{background:#1d1d1d;display:flex;align-items:center;gap:12px;padding:14px;border-radius:7px}.avatar{background:#654d37;font-size:26px;border-radius:4px;padding:4px}.account small{display:block;color:#aaa;font-size:11px}.account strong{font-size:17px}.switch{margin-left:auto;background:none;font-size:11px;font-weight:bold}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:12px;margin:22px 0}th{text-align:left;color:#999;padding:18px 9px;border-top:1px solid #303030}td{padding:17px 9px;background:#1e1e1e}td:first-child{font-weight:bold}td input{width:48px;background:var(--blue);border:0;border-radius:3px;padding:6px;color:white}.remove-item{background:#ee4848;border-radius:3px;width:26px;height:26px;font-weight:bold}.checkout-action{display:block;min-width:240px;margin:24px auto 0}.checkout-note{color:#aaa;font-size:12px;line-height:1.6;text-align:center}.back{display:block;margin:24px auto 0;background:none;color:#aaa;font-size:13px}.empty{text-align:center;padding:40px 10px;color:#aaa}.total{display:flex;justify-content:space-between;border-top:1px solid #333;padding-top:20px;font-weight:bold}footer{background:#202020;text-align:center;padding:32px 12px 55px;margin-top:80px}footer strong{font-size:18px}footer small{display:block;font-size:9px;color:#777;margin:3px 0 8px}footer nav{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}footer nav button{font-size:9px;padding:0;color:#2687ff;background:none;font-weight:bold}.mini-donut{font-size:17px}.preview-label{position:fixed;bottom:0;left:0;right:0;background:#151515ed;border-top:1px solid #333;padding:9px 15px;text-align:center;font-size:9px;letter-spacing:1px;color:#9dc8ff;z-index:10}.preview-label span{color:#aaa;letter-spacing:0;margin-left:14px}#toast{position:fixed;bottom:55px;left:50%;transform:translateX(-50%);background:#303030;color:#fff;padding:12px 18px;border-radius:8px;font-size:13px;display:none;z-index:20;max-width:90vw}dialog{background:#222;color:white;border:1px solid #333;max-width:460px;border-radius:18px;padding:30px;line-height:1.6}dialog::backdrop{background:#000b}#close-policy{float:right;background:none;font-size:24px}.rank-price{position:absolute;right:24px;bottom:15px;font-size:11px;opacity:0}.rank:hover .rank-price{opacity:1}@media(min-width:1600px){.brand{margin-top:90px}}@media(max-width:650px){.brand{margin-top:42px;margin-bottom:48px}.brand #home{width:82px;height:82px}.ip{font-size:14px}.basket-pill{font-size:11px;bottom:-40px}.rank{padding:20px 18px;min-height:235px;border-radius:20px}.rank h1{font-size:26px}.rank ul{font-size:12px;max-width:62%;line-height:1.45}.rank .term{font-size:12px}.character{right:-8px;width:175px;height:215px}.grid{grid-template-columns:repeat(2,1fr);gap:43px 20px}.product{padding:56px 11px 12px;border-radius:22px}.product h2{font-size:21px}.quantities{gap:4px}.quantities button{min-height:37px;font-size:11px}.add{font-size:12px}.popular{font-size:8px;right:7px;top:13px}.panel{margin-top:55px;border-radius:22px}.panel h1{font-size:20px}.basket-body{padding:15px}.basket-heading{padding:20px}.preview-label{font-size:8px;padding:9px 5px}.preview-label span{margin-left:7px}main{margin-bottom:40px}footer{margin-top:45px}.rank-price{display:none}}
@media(max-width:450px){.character{height:180px;width:150px;right:-3px;bottom:5px}.rank h1{font-size:24px}.rank ul{max-width:66%;font-size:11px}.rank h1 svg{width:29px;height:29px}}
/* Reference-matched proportions and original OG branding. */
.donut-logo{display:block;width:100%;height:100%;object-fit:contain}.brand #home{width:100px;height:100px}.brand .donut-logo{filter:drop-shadow(0 3px 3px #000)}.rank h1 .donut-logo{width:32px;height:32px;flex:0 0 32px}.rank{background:linear-gradient(180deg,#007bff 0%,#12a8fa 100%);padding:16px 20px;min-height:245px;margin-bottom:62px;border-radius:28px;box-shadow:0 7px #0b8ec4}.rank h1{font-size:34px;letter-spacing:-.7px}.rank ul{margin-top:18px;line-height:1.31}.product{background:#222;padding-top:59px;box-shadow:0 7px #000}.product h2{font-size:23px}.grid{gap:46px 38px}.footer-logo{width:19px;height:19px;object-fit:contain;vertical-align:-3px;margin-right:4px}.cart-icon{height:15px;width:15px;vertical-align:-2px;margin-right:8px}.basket-heading h1{display:flex;align-items:center;gap:10px}.basket-heading .donut-logo{width:34px;height:34px}.basket-pill{background:#161616;color:#bbb;opacity:0;transition:opacity .2s}.brand:hover .basket-pill,.basket-pill:focus-visible{opacity:1}.login-body{padding-top:22px}.panel{box-shadow:0 8px #000}.panel h1{font-weight:800}.blue,.quantities button.selected{background:#007bff}.ip{background:#222;padding:7px 15px;font-size:17px;border-radius:4px}.preview-label{background:#101010ed}.rank-price{display:none}
@media(max-width:650px){.rank h1{font-size:26px}.rank{padding:20px 18px;min-height:235px;border-radius:23px}.rank ul{font-size:12px;line-height:1.45}.grid{gap:43px 20px}.basket-pill{opacity:1}.rank h1 .donut-logo{width:28px;height:28px;flex-basis:28px}}
@media(max-width:450px){.rank h1{font-size:23px}.rank ul{font-size:11px;max-width:65%}.rank h1 .donut-logo{width:27px;height:27px;flex-basis:27px}}
.character{object-fit:contain;object-position:center bottom;width:245px;height:270px;right:9px;bottom:-1px;filter:none}
@media(max-width:650px){.character{width:185px;height:220px;right:-4px}}
@media(max-width:450px){.character{width:150px;height:190px;right:-4px;bottom:0}}
.character{width:280px;height:280px;object-fit:fill;right:-9px;bottom:-3px}
@media(max-width:650px){.character{width:205px;height:230px;right:-12px}}
@media(max-width:450px){.character{width:165px;height:190px;right:-10px}}
.key-art{width:85px;height:91px;object-fit:fill;filter:hue-rotate(var(--key-hue,0deg)) saturate(.8) drop-shadow(0 2px 2px #0006);top:-24px}
@media(min-width:1600px){.brand{margin-top:82px}.character{height:272px}}
.og-cart{display:inline-block;width:17px;height:17px;vertical-align:-3px;margin-right:7px;flex-shrink:0}.basket-pill .og-cart{width:20px;height:20px;vertical-align:-5px;color:#fff}.basket-pill{opacity:1;background:#202020;color:#fff;display:flex;align-items:center;gap:2px}.add .og-cart{width:14px;height:14px;vertical-align:-2px}
#global-currency{position:absolute;left:0;bottom:0;max-width:180px;background:#222;color:white;border:1px solid #333;border-radius:5px;padding:9px 8px;font-size:12px}.currency{max-width:135px}#rates-note{margin:18px 0 4px;font-size:10px;color:#888}.rates-credit{font-size:9px;color:#777;text-decoration:none}.rates-credit:hover{text-decoration:underline}@media(max-width:650px){#global-currency{bottom:-40px;max-width:160px;font-size:11px;padding:8px}.basket-heading .currency{max-width:120px}}
/* One reversible transition system for pointer, focus and press feedback. */
:root{--motion-ease:cubic-bezier(.22,.68,.2,1);--motion-time:240ms}
button,.rank,.ip,.basket-pill,.brand #home{transition:transform var(--motion-time) var(--motion-ease),filter var(--motion-time) ease,background-color var(--motion-time) ease,box-shadow var(--motion-time) ease,color var(--motion-time) ease,opacity var(--motion-time) ease}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #8cceff;outline-offset:3px}
.key-art{transform:translate(-50%,0) rotate(0deg) scale(1);transform-origin:50% 65%;filter:hue-rotate(var(--key-hue,0deg)) saturate(.8) drop-shadow(0 2px 2px #0006);transition:transform 460ms var(--motion-ease),filter 460ms ease;pointer-events:auto}
.product:has(:focus-visible) .key-art{transform:translate(-50%,-9px) rotate(-5deg) scale(1.09);filter:hue-rotate(var(--key-hue,0deg)) saturate(1) drop-shadow(0 0 8px #5acd3b70)}
.og-cart,.edition-block,.chevron{transition:transform var(--motion-time) var(--motion-ease)}
.chevron{display:block;width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.checkout-action,.back{display:flex;align-items:center;justify-content:center;gap:8px;line-height:1.2}
.back{padding:8px 10px;border-radius:6px}
.editions button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px}
.edition-block{width:25px;height:29px;object-fit:contain;filter:drop-shadow(0 2px 1px #0007)}
.account .avatar{display:block;width:38px;height:38px;object-fit:cover;image-rendering:pixelated;border-radius:5px;background:#362819;padding:0}
.checkout-action:disabled{opacity:.75;cursor:wait;transform:none}
/* Keep the username field and Continue button inside one rounded, focusable group. */
.username-form{max-width:380px;width:100%;min-height:46px;align-items:stretch;border-radius:8px;background:#eef0ff;overflow:hidden;isolation:isolate;box-shadow:0 2px 0 #0051ad;transition:transform var(--motion-time) var(--motion-ease),box-shadow var(--motion-time) ease}
.username-form:focus-within{box-shadow:0 0 0 3px #8cceff,0 5px 18px #007bff24}
.username-form input{border-radius:0;background:transparent;line-height:1.25;padding:13px 15px;width:0;min-height:46px}
.username-form input:focus,.username-form button:focus-visible{outline:none}
.username-form .blue{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 auto;border-radius:0;box-shadow:none;padding:13px 16px;line-height:1.25;transform:none;filter:none}
.username-form button:focus-visible{box-shadow:inset 0 0 0 2px #b8deff}
.username-form:has(button:active){transform:scale(.99)}
/* Custom, centered chevrons leave equal breathing room in both currency controls. */
#global-currency,.currency{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='m5 7.5 5 5 5-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;background-size:18px 18px;padding:9px 37px 9px 12px;min-height:38px;line-height:18px;border-radius:7px;transition:background-color var(--motion-time) ease,box-shadow var(--motion-time) ease,border-color var(--motion-time) ease}
#global-currency{width:190px;max-width:190px;background-color:#222;border:1px solid #363636}
.currency{width:180px;max-width:180px;background-color:var(--blue);border:1px solid transparent}
#global-currency option,.currency option{background:#222;color:#fff}
@media(hover:hover) and (pointer:fine){
 button:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.07)}
 .product:hover .key-art{transform:translate(-50%,-9px) rotate(-5deg) scale(1.09);filter:hue-rotate(var(--key-hue,0deg)) saturate(1) drop-shadow(0 0 8px #5acd3b70)}
 .add:not(:disabled):hover,.checkout-action:not(:disabled):hover{background:#1387ff;box-shadow:0 2px #0051ad,0 5px 15px #007bff30}
 .quantities button:not(:disabled):hover{background:#183554;box-shadow:inset 0 0 0 1px #398bdf55}
 .quantities button.selected:hover{background:#168aff}
 .ip:hover{box-shadow:0 5px #000,0 0 12px #007bff22}
 .brand #home:hover{transform:translateY(-2px) rotate(-3deg) scale(1.03)}
 .add:hover .og-cart{transform:translateX(1px)}
 .editions button:hover .edition-block{transform:translateY(-1px) rotate(-3deg)}
 .checkout-action:hover .chevron{transform:translateX(2px)}
 .back:hover{background:#ffffff08;color:#fff}
 .back:hover .chevron{transform:translateX(-2px)}
 footer nav button:hover{color:#8bc9ff;filter:none}
 .username-form:hover{transform:scale(1.025)}
 .username-form .blue:hover{transform:none;filter:none;background:#1387ff}
 #global-currency:hover{background-color:#292929;border-color:#555}
 .currency:hover{background-color:#1387ff;box-shadow:0 3px 12px #007bff25}
}
button:not(:disabled):active{transform:translateY(0) scale(.98);filter:brightness(.97)}
.username-form .blue:active{transform:none;filter:none;background:#006fe5}
@media(max-width:650px){#global-currency{max-width:170px;width:170px;padding:9px 34px 9px 11px}.basket-heading .currency{max-width:150px;width:150px;font-size:11px}.basket-heading{gap:12px}.basket-heading h1{font-size:20px}.username-form .blue{padding:13px 12px}}
@media(max-width:380px){.basket-heading{padding:16px;gap:8px}.basket-heading .currency{max-width:125px}.basket-heading h1{font-size:18px}.basket-heading .donut-logo{width:27px;height:27px}.username-form .blue{gap:4px;padding:13px 10px}.username-form input{padding:13px 11px}}
@media(prefers-reduced-motion:reduce){button,select,.username-form,.key-art,.og-cart,.edition-block,.chevron{transition:none!important;animation:none!important}button:hover,button:active,.username-form:hover,.username-form:has(button:active),.product:hover .key-art,.product:has(:focus-visible) .key-art,.add:hover .og-cart,.editions button:hover .edition-block,.back:hover .chevron,.checkout-action:hover .chevron{transform:none!important}.product .key-art,.product:hover .key-art,.product:has(:focus-visible) .key-art{transform:translateX(-50%)!important}}

/* Every displayed amount uses the product base price, excluding checkout tax. */
.tax-note{display:block;margin-top:3px;color:#aaa;font-size:10px;font-weight:400;line-height:1.25;white-space:nowrap}
.price .tax-note{margin-top:2px}
.rank-base-price{display:block;margin-top:8px;font-size:14px;font-weight:700;line-height:1.3}
.rank-base-price small{font-size:11px;font-weight:400;margin-left:5px}
.rank ul{margin-top:12px}
@media(max-width:650px){.rank-base-price{font-size:12px}.rank-base-price small{font-size:10px}.rank ul{margin-top:10px}}

.checkout-error{color:#ffd7d7;background:#ee484815;border:1px solid #ee48484d;padding:12px 14px;border-radius:8px;font-size:12px;line-height:1.6;text-align:center;overflow-wrap:anywhere}

.checkout-error button{display:block;margin:10px auto 0;background:#1d1d1d;color:#fff;font-weight:700;border-radius:6px;padding:8px 12px}