/* AION 2 Hourly Driving configurator panel: in-game look, real game icons and art from the media library */
.d4pp-head:has(.a2h) [data-d4pp-terms]{display:none}
.a2h{--ink:#fff;--copy:#c9cfe0;--muted:#a5aec5;--cyan:#6fd9ee;--cyan2:#3fb6d3;--gold:#f6c94e;--line:rgba(160,185,255,.11);--line2:rgba(160,185,255,.22);--cell:rgba(255,255,255,.035);--ease:cubic-bezier(.16,1,.3,1);display:grid;gap:22px;color:var(--copy);font-size:14px;line-height:1.45}
.a2h>*{min-width:0}
.a2h b{color:var(--ink)}
.a2h button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left}
.a2h svg{display:block}
.a2h [hidden]{display:none!important}

.a2h-tile{display:block;inline-size:100%;block-size:100%;object-fit:contain}

.a2h-bar{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;background:var(--cell)}
/* the edge cells follow the bar's rounded corners, so their hover and pick glow do too; phones put Play method on its own row */
.a2h-bar>.a2h-cell:nth-child(1){border-radius:11px 0 0 11px}.a2h-bar>.a2h-cell:nth-child(3){border-radius:0 11px 11px 0}@media (max-width:640px){.a2h-bar>.a2h-cell:nth-child(1){border-radius:11px 11px 0 0}.a2h-bar>.a2h-cell:nth-child(2){border-radius:0 0 0 11px}.a2h-bar>.a2h-cell:nth-child(3){border-radius:0 0 11px 0}}
.a2h .a2h-cell{position:relative;display:flex;align-items:center;gap:10px;block-size:56px;padding-inline:14px;min-inline-size:0;transition:background .2s,box-shadow .25s}.a2h-cell::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(111,217,238,.55),0 0 18px rgba(111,217,238,.18);opacity:0;pointer-events:none}
.a2h-cell+.a2h-cell{border-inline-start:1px solid var(--line)}
@media (hover:hover){.a2h button.a2h-cell:hover{background:rgba(255,255,255,.03)}}
.a2h-cell__text{flex:1;min-inline-size:0}
.a2h-cell__text small{display:block;margin-block-end:5px;font-size:10px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}
.a2h-cell__text b{display:block;font-size:14px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.a2h-cell__text b.a2h-empty{color:var(--gold)}
.a2h .a2h-cell.a2h-need{box-shadow:inset 0 0 0 1px #e9464b;animation:a2h-shake .4s}
.a2h-cell.a2h-need b.a2h-empty{color:#ff6b6f}
@keyframes a2h-shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.a2h-cell>svg{inline-size:12px;block-size:12px;flex:none;color:var(--muted);transition:transform .25s var(--ease)}
.a2h-cell[aria-expanded=true]>svg{transform:rotate(180deg)}
.a2h-lock{display:grid;place-items:center;flex:none;inline-size:30px;block-size:30px;border-radius:50%;background:rgba(246,201,78,.08);color:var(--gold)}
.a2h-lock svg{inline-size:15px;block-size:15px}
.a2h-lock--globe{background:rgba(111,217,238,.08);color:var(--cyan)}
.a2h-emblem{position:relative;flex:none;inline-size:30px;block-size:30px;filter:drop-shadow(0 0 6px rgba(120,200,255,.25))}.a2h-emblem::after{content:"";position:absolute;inset:-6px;pointer-events:none;border-radius:50%;opacity:0;background:radial-gradient(closest-side,rgba(111,217,238,.7),transparent)}
.a2h-menu{position:absolute;z-index:30;inset-block-start:calc(100% + 6px);padding:8px;border-radius:12px;background:#171d2c;border:1px solid var(--line2);box-shadow:0 18px 40px rgba(0,0,0,.5);animation:a2h-drop .2s var(--ease)}
.a2h-menu--play{inset-inline-start:-1px;inline-size:min(340px,100%);display:grid;gap:4px}
.a2h-menu--list{inset-inline-start:33.33%;inline-size:33.33%;min-inline-size:180px}
.a2h-menu--class{inset-inline-end:-1px;inline-size:min(360px,100%);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.a2h .a2h-menu--play button{display:flex;gap:12px;align-items:center;inline-size:100%;padding:10px;border-radius:10px;border:1px solid transparent;outline:none}
.a2h-menu--play b{display:flex;gap:8px;align-items:baseline;font-size:14px}
.a2h-menu--play em{font-style:normal;font-size:11px;font-weight:700;color:var(--gold)}
.a2h-menu--play small{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.a2h .a2h-menu--play button[aria-selected=true]{border-color:var(--cyan2);background:rgba(111,217,238,.08)}
.a2h .a2h-menu--list button{display:flex;justify-content:space-between;inline-size:100%;padding:8px 10px;border-radius:8px;font-size:13px;outline:none}
.a2h .a2h-menu--class button{display:grid;justify-items:center;gap:4px;padding:8px 4px;border-radius:8px;border:1px solid transparent;font-size:11px;text-align:center;outline:none}
.a2h-menu--class .a2h-tile{inline-size:36px;block-size:36px}
.a2h-menu button:focus-visible{background:var(--cell);color:var(--ink)}
@media (hover:hover){.a2h-menu button:hover{background:var(--cell);color:var(--ink)}}
.a2h-menu button[aria-selected=true]{color:var(--ink);font-weight:700}
.a2h-menu--list button[aria-selected=true]::after{content:"";align-self:center;flex:none;inline-size:7px;block-size:7px;transform:rotate(45deg);background:var(--cyan);box-shadow:0 0 8px rgba(111,217,238,.45)}
.a2h .a2h-menu--class button[aria-selected=true]{border-color:var(--cyan2);background:rgba(111,217,238,.08)}
@keyframes a2h-drop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.a2h .a2h-cell.a2h-wanted{position:relative;overflow:hidden;background:linear-gradient(90deg,rgba(246,201,78,.07),rgba(246,201,78,0) 70%);box-shadow:inset 0 0 0 1px rgba(246,201,78,.35)}
.a2h .a2h-cell.a2h-wanted.a2h-need{box-shadow:inset 0 0 0 1px #e9464b}
.a2h-want{position:relative}
.a2h-want::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(246,201,78,.55);animation:a2h-spin 14s linear infinite}
.a2h-want::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(246,201,78,.45);opacity:0;animation:a2h-ping 2.4s cubic-bezier(.16,1,.3,1) infinite}
@keyframes a2h-spin{to{transform:rotate(360deg)}}
@keyframes a2h-ping{0%{opacity:1;transform:scale(.85)}70%,100%{opacity:0;transform:scale(1.35)}}

.a2h .a2h-hd{display:flex;align-items:center;gap:7px;inline-size:fit-content;margin:0 0 10px;padding:3px 44px 3px 7px;background:linear-gradient(90deg,rgba(66,98,150,.42),rgba(66,98,150,0));font-size:13px;font-weight:600;line-height:1.3;letter-spacing:.02em;text-transform:none;color:#9eeef2}.a2h-hd::before{content:"";flex:none;inline-size:11px;block-size:11px;background:#d8fbfb;clip-path:polygon(50% 0,57% 43%,100% 50%,57% 57%,50% 100%,43% 57%,0 50%,43% 43%);filter:drop-shadow(0 0 3px rgba(127,240,240,.9))}.a2h-book{--glide:.45s cubic-bezier(.22,1,.36,1);display:grid;gap:14px}

/* game item icons from the offer's sprite: 4 tiles, see item() in the script */
.a2h-item{display:block;flex:none;background:var(--a2h-sprite) no-repeat;background-size:400% 100%;background-position:calc(var(--i) * 100% / 3) 0}

/* hour tiles. Motion stays on transform and opacity */
.a2h-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.a2h .a2h-preset{position:relative;display:flex;align-items:center;gap:10px;block-size:84px;padding:0 12px 0 10px;border-radius:12px;overflow:hidden;background:#0a1016;isolation:isolate;transition:transform .25s var(--ease)}
.a2h-preset img{position:absolute;inset:0;z-index:-2;inline-size:100%;block-size:100%;object-fit:cover;opacity:.72;transition:transform .7s var(--ease),opacity .35s}
.a2h-preset::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(90deg,rgba(6,10,14,.8),rgba(6,10,14,.42) 62%,rgba(6,10,14,.12));box-shadow:inset 0 0 0 1px var(--line2)}
.a2h-preset::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--cyan2),inset 0 0 22px rgba(111,217,238,.22);opacity:0;transition:opacity .35s}
.a2h-preset .a2h-item{inline-size:46px;block-size:46px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.75));transition:transform .35s var(--ease)}
.a2h-preset span{display:grid;gap:1px;min-inline-size:0}
.a2h-preset b{font-size:21px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #000}
.a2h-preset small{font-size:12.5px;line-height:1.25;color:#e3e9ec;text-shadow:0 1px 3px #000}
@media (hover:hover){.a2h-preset:hover img{transform:scale(1.05);opacity:.95}}
@media (hover:hover){.a2h-preset:hover .a2h-item{transform:translateY(-2px) scale(1.04)}}
.a2h .a2h-preset:active{transform:scale(.985)}
.a2h .a2h-preset:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.a2h-preset[aria-pressed=true] img{opacity:1}
.a2h-preset[aria-pressed=true]::after{opacity:1}

.a2h-dial{isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:4px}
.a2h .a2h-step{display:grid;place-items:center;inline-size:34px;block-size:34px;margin-block-start:16px;border-radius:50%;color:var(--cyan);background:rgba(111,217,238,.08);transition:background .2s,color .2s,transform .25s var(--ease),opacity .2s;touch-action:manipulation}
.a2h-step svg{inline-size:14px;block-size:14px}
@media (hover:hover){.a2h .a2h-step:hover:not(:disabled){color:#fff;background:rgba(111,217,238,.2)}}
.a2h .a2h-step:active:not(:disabled){transform:scale(.9)}
.a2h .a2h-step:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.a2h .a2h-step:disabled{opacity:.35;cursor:default}
.a2h-track{position:relative;padding:28px 30px 26px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.a2h-track.is-drag{cursor:grabbing}
.a2h-range{position:absolute;inline-size:1px;block-size:1px;margin:0;padding:0;opacity:0;pointer-events:none}
.a2h-rail{position:relative;block-size:10px;container-type:inline-size}
.a2h-bed{position:absolute;inset:0;border-radius:6px;background:#0b0e16;box-shadow:inset 0 1px 3px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.05)}
.a2h-mana-clip{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
/* Bar and diamond move only with transform, so the glide stays on the compositor */
.a2h-mana{position:absolute;inset:0;background:linear-gradient(90deg,#2a9dbd,#6fd9ee);transform:translateX(calc((var(--f,0) - 1) * 100%));transition:transform var(--glide);will-change:transform}
.a2h-track.is-drag :is(.a2h-mana,.a2h-medal){transition:none}
.a2h-marks{position:absolute;inset:0}
.a2h-marks span{position:absolute;inset-block:0;inline-size:0}
.a2h-marks i{position:absolute;inset-block:2px;inset-inline-start:-.5px;inline-size:1px;background:rgba(255,255,255,.2)}
.a2h-marks span:first-child i{display:none}
.a2h-marks b{position:absolute;inset-block-start:calc(100% + 10px);transform:translateX(-50%);font-size:11.5px;font-weight:500;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums;transition:color .25s,opacity .2s}
.a2h-marks .is-on b{color:var(--cyan)}
.a2h-marks .is-under b{opacity:0}
.a2h-medal{position:absolute;z-index:2;inset-block-start:50%;inset-inline-start:0;inline-size:48px;block-size:48px;margin:-24px 0 0 -24px;transform:translateX(calc(var(--f,0) * 100cqw));transition:transform var(--glide);will-change:transform;contain:layout style;pointer-events:none}
.a2h-medal i{position:absolute;inset:7px;border-radius:7px;transform:rotate(45deg);background:linear-gradient(135deg,#232b3d,#121722);border:1.5px solid var(--gold);box-shadow:0 3px 8px rgba(0,0,0,.55);transition:transform .25s var(--ease)}
.a2h-medal b{position:absolute;inset:0;display:grid;place-items:center;font-size:15px;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* the glow is its own layer: fading it is smooth where animating a shadow is not */
.a2h-medal::before{content:"";position:absolute;inset:-4px;border-radius:50%;background:radial-gradient(closest-side,rgba(246,201,78,.42),rgba(246,201,78,0));opacity:0;transition:opacity .25s}
@media (hover:hover){.a2h-track:hover .a2h-medal::before{opacity:.7}}
.a2h-track.is-drag .a2h-medal::before{opacity:1}
.a2h-track.is-drag .a2h-medal i{transform:rotate(45deg) scale(1.07)}
.a2h-track:not(.by-pointer):has(.a2h-range:focus-visible) .a2h-medal i{outline:2px solid var(--cyan);outline-offset:2px}

.a2h-rate{contain:layout style;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:0 12px;margin-block:12px 2px;padding-block-end:14px;border-block-end:1px solid rgba(255,255,255,.07)}
.a2h-sandglass{display:block;inline-size:42px;block-size:50px}
.a2h-sandglass svg{display:block;inline-size:100%;block-size:100%}
.a2h-grain{transition:transform .7s cubic-bezier(.22,1,.36,1)}
.a2h-grain--up{transform:translateY(calc(var(--s,.1) * 17px))}
.a2h-grain--down{transform:translateY(calc((1 - var(--s,.1)) * 17px))}
.a2h-stream{opacity:0}
.a2h-rate__body{display:grid;gap:9px;min-inline-size:0}
.a2h-rate p{margin:0;font-size:15px;line-height:1.3;color:#c9cfe0;font-variant-numeric:tabular-nums}
.a2h-rate strong{font-weight:800;color:#fff}
.a2h-rate s{margin-inline-start:4px;font-size:13px;color:#a5aec5}
.a2h-drop{--f:0;position:relative;block-size:10px;margin-inline-end:6px}
.a2h-drop__clip{position:absolute;inset:0;overflow:hidden;border-radius:6px;background:#0b0e16;box-shadow:inset 0 1px 3px rgba(0,0,0,.7)}
.a2h-drop__fill{position:absolute;inset:0;background:linear-gradient(180deg,#fff0bd,#f6c94e 45%,#b9831b);transform:translateX(calc((var(--f) - 1) * 100%));transition:transform .55s cubic-bezier(.22,1,.36,1)}
.a2h-drop__sweep{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));opacity:0}
.a2h-drop__runes i{position:absolute;inset-block-start:50%;inline-size:8px;block-size:8px;margin:-4px 0 0 -4px;transform:rotate(45deg);background:#141a28;box-shadow:inset 0 0 0 1px rgba(246,201,78,.55);transition:background .3s,box-shadow .3s}
.a2h-drop__runes i:last-child{margin-inline-start:-8px}
.a2h-drop__runes .is-on{background:#fff0bd;box-shadow:0 0 6px rgba(246,201,78,.8)}
.d4pp-receipt .d4lp-lines>div :is(dt,dd){transition:color .3s}
.d4pp-receipt .d4lp-lines>.a2h-saved :is(dt,dd){color:#f6c94e;font-weight:700}
.d4pp-receipt .d4lp-lines>div .d4lp-item{display:inline-block;transform-origin:100% 50%}

@media (prefers-reduced-motion:reduce){.a2h *,.a2h *::before,.a2h *::after,.a2h-rate *{animation:none!important;transition-property:opacity,color,background-color,border-color,box-shadow!important}.a2h :is(.a2h-preset:is(:hover,:active),.a2h-preset:hover :is(img,.a2h-item),.a2h-step:active){transform:none!important}}

@media (max-width:640px){
  .a2h-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .a2h-bar>.a2h-cell:first-child{grid-column:1/-1;border-block-end:1px solid var(--line)}
  .a2h-bar>.a2h-cell:nth-child(2){border-inline-start:0}
  .a2h-menu--play{inline-size:100%}
  .a2h-menu--list{inset-inline-start:0;inline-size:50%}
  .a2h-menu--class{inline-size:100%}
  .a2h-lock--globe{display:none}
  .a2h [data-label="aion2-region"]{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .a2h-presets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .a2h .a2h-preset{block-size:72px;gap:8px;padding-inline:8px}
  .a2h-preset .a2h-item{inline-size:38px;block-size:38px}
  .a2h-preset b{font-size:18px}
  .a2h-preset small{font-size:12px}
  .a2h-dial{gap:0}
  .a2h .a2h-step{inline-size:32px;block-size:32px;margin-block-start:17px}
  .a2h-track{padding-inline:24px}
}

/* Receipt icons, as on Gear Score: the last two lines are Region and Play method, see lines() in the JS */
.d4pp-page:has(.a2h) .d4pp-receipt{--a2h-globe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6.25'/%3E%3Cpath d='M1.75 8h12.5M8 1.75c1.9 1.8 2.9 3.9 2.9 6.25S9.9 12.45 8 14.25M8 1.75C6.1 3.55 5.1 5.65 5.1 8s1 4.45 2.9 6.25'/%3E%3C/svg%3E") center/contain no-repeat;--a2h-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7' width='9' height='6.5' rx='1.5'/%3E%3Cpath d='M5.5 7V5a2.5 2.5 0 0 1 5 0v2'/%3E%3C/svg%3E") center/contain no-repeat;--a2h-party:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='5.5' r='2.2'/%3E%3Ccircle cx='11' cy='6' r='1.8'/%3E%3Cpath d='M1.75 13.5c.4-2.4 1.9-3.75 3.75-3.75s3.35 1.35 3.75 3.75M9.5 9.9c.45-.3 1-.45 1.5-.45 1.55 0 2.7 1.1 3.1 3.05'/%3E%3C/svg%3E") center/contain no-repeat}
.d4pp-page:has(.a2h) .d4pp-receipt .d4lp-lines>div:nth-last-child(-n+2)>dd::before{content:"";display:inline-block;inline-size:12px;block-size:12px;margin-inline-end:6px;vertical-align:-1px;background:var(--d4lp-tint);-webkit-mask:var(--a2h-icon);mask:var(--a2h-icon)}
.d4pp-page:has(.a2h) .d4pp-receipt .d4lp-lines>div:nth-last-child(2)>dd{--a2h-icon:var(--a2h-globe)}
.d4pp-page:has(.a2h) .d4pp-receipt .d4lp-lines>div:last-child>dd{--a2h-icon:var(--a2h-lock)}
.d4pp-page:has(.a2h--self) .d4pp-receipt .d4lp-lines>div:last-child>dd{--a2h-icon:var(--a2h-party)}
:is(.d4pp-layout,.product-detail-content:has(.mcui-v2)) .product-detail-description:has(.mcui-aion .mcui-prose)>.product-detail-description-title h2::before{content:"";flex:none;inline-size:28px;block-size:28px;background:var(--a2h-head) center/contain no-repeat}