/* Common gift inbox, prototype only. The entrance follows the Dex daily entry. */
.album-overview{position:relative;min-height:77px;padding-right:82px}
.album-overview>div:first-child{padding-top:8px}
.mock-surface .album-gift-entry{position:absolute;right:0;top:0;width:64px;height:64px;min-width:64px;min-height:64px;border:0;border-radius:12px;background:none;padding:0;cursor:pointer;touch-action:manipulation;--notification-surface:var(--bg)}
.mock-surface .album-gift-entry:active{scale:.92}
.album-gift-entry .gift-art{width:64px;height:64px}
.album-gift-entry .pixel-notification-dot{top:1px;right:1px}
.gift-art{position:relative;display:block;flex:none;width:64px;height:72px;pointer-events:none}
.gift-art img{position:absolute;display:block;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:contain;image-rendering:pixelated}
.album-gifts{--kanji-card-height:280px}
/* Dialogs fill the artwork surface, but controls stay clear of native bars. */
.mock-surface .album-gifts .album-detail-header{height:calc(66px + var(--pixelingo-safe-area-top,env(safe-area-inset-top,0px)));padding-top:var(--pixelingo-safe-area-top,env(safe-area-inset-top,0px));box-sizing:border-box}
.mock-surface .album-gifts .minimal-close{top:calc(11px + var(--pixelingo-safe-area-top,env(safe-area-inset-top,0px)));left:max(12px,var(--pixelingo-safe-area-left,env(safe-area-inset-left,0px)))}
.mock-surface .album-gifts .album-detail-footer{padding-bottom:max(16px,var(--pixelingo-safe-area-bottom,env(safe-area-inset-bottom,0px)))}
.gift-art-large{width:96px;height:108px}
.gift-art-kanji{height:64px}
.gift-scroll{display:flex;flex-direction:column;gap:16px;padding-top:22px}
.gift-viewport{position:relative;flex:1;min-height:0;overflow:hidden;isolation:isolate}
.gift-track{position:absolute;inset:0;display:flex;will-change:transform}
.gift-pane{position:relative;display:flex;flex:0 0 100%;width:100%;flex-direction:column;min-height:0;min-width:0;background:var(--bg) var(--album-pattern) repeat}
.gift-pane-outgoing{pointer-events:none}
.gift-pane .gift-scroll{flex:1;min-height:0}
.gift-bonus-footer{position:relative;top:16px;flex:none;width:min(100%,354px);height:96px;margin-top:16px;padding:0;box-sizing:border-box}
.gift-bonus-choice{display:grid;gap:4px}
.gift-bonus-choice[hidden],.gift-ad-preview[hidden]{display:none!important}
html body .gift-bonus-choice button.style-button{width:100%;min-height:52px;padding:6px 14px;font-size:24px}
.gift-ad-content{display:flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap}
.gift-ad-icon{display:block;width:28px;height:24px;flex:none;pointer-events:none}
.mock-surface .gift-skip{min-height:36px;border:0;padding:6px 8px;background:transparent;color:var(--muted);font:20px/1.1 UniversityActions,sans-serif;cursor:pointer;touch-action:manipulation}
.mock-surface .gift-skip:active{transform:translateY(2px)}
.gift-skip:focus-visible{outline:2px solid var(--mint);outline-offset:0}
.gift-ad-preview{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px;background:var(--bg);color:var(--ink);text-align:center;font:22px/1.2 UniversityActions,sans-serif}
.gift-ad-preview p{margin:0;color:var(--muted)}
.gift-ad-preview strong{font:30px/1.1 UniversityActions,sans-serif}
.gift-ad-preview progress{width:min(220px,100%);height:12px;accent-color:var(--mint)}
.gift-ad-preview .gift-ad-count{font-variant-numeric:tabular-nums}
.gift-ad-preview button{margin-top:16px}
.gift-back svg{width:28px;height:28px;pointer-events:none}
.gift-card-wrap{position:relative;flex:none}
.gift-card-wrap:has([data-gift-kind^=kanji]){display:grid;place-items:center;height:320px}
.gift-sparkles{position:absolute;inset:-22px;width:calc(100% + 44px);height:calc(100% + 44px);pointer-events:none;z-index:3;image-rendering:pixelated}
.gift-sparkles[hidden]{display:none!important}
.mock-surface:has(.album-gifts[open])>.mock-toast{visibility:hidden}

.gift-list{display:grid;gap:12px}
.mock-surface .gift-row{display:grid;grid-template-columns:64px minmax(0,1fr) 32px;align-items:center;gap:16px;width:100%;min-height:104px;padding:14px 20px;border:2px solid var(--edge);border-radius:5px;background:var(--paper);box-shadow:0 2px 0 var(--shadow);text-align:left;touch-action:manipulation}
.mock-surface .gift-row{transition:translate 90ms ease-out,scale 90ms ease-out;user-select:none}
.mock-surface .gift-row:is(:active,.is-held):not(:disabled){translate:0 3px;scale:.975}
.gift-quantity{font:30px/1 UniversityActions,sans-serif}
.gift-open-label{font:32px/1 UniversityActions,sans-serif;color:var(--album-done-ink);text-align:center}
.gift-card-stage,.gift-empty{position:relative;display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:0;padding:0 0 56px}
.gift-sequence{margin:0 0 24px;color:var(--muted);font:20px/1 PixelUI,monospace;font-variant-numeric:tabular-nums}
.gift-remaining{position:absolute;bottom:12px;left:0;right:0;margin:0;color:var(--muted);font:18px/1.2 PixelUI,sans-serif;pointer-events:none}
/* Same saved Aseprite face and dimensions as Kanji du jour; no invented lid animation. */
.mock-surface .gift-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;flex:none;width:224px;height:320px;margin:0;padding:28px 18px;border:0;border-radius:0;box-shadow:none;background:transparent;image-rendering:pixelated;touch-action:manipulation;opacity:1;color:var(--ink)}
.mock-surface .gift-card:disabled{opacity:1;cursor:default}
.mock-surface .gift-card{transition:scale 90ms ease-out;user-select:none;-webkit-user-select:none}
.mock-surface .gift-card.is-held:not(:disabled):not([aria-disabled=true]){scale:.94}
.mock-surface .gift-card:is(:disabled,[aria-disabled=true]){scale:1;transition:none}
.gift-card .gift-art{width:160px;height:180px}
.gift-card:focus-visible{outline:3px solid var(--mint);outline-offset:6px}
.gift-item-name{font:22px/1 UniversityActions,sans-serif;pointer-events:none}
.gift-empty h3{margin:0;font:28px/1.1 UniversityActions,sans-serif;font-weight:400}
.gift-empty>.gift-art{margin-bottom:24px;filter:grayscale(1);opacity:.65}
html .mock-surface .gift-card[data-gift-kind^=kanji]{width:var(--kanji-card-height,280px);height:var(--kanji-card-height,280px);padding:0;border-radius:0;background:none;outline:0}
.gift-card[data-gift-kind^=kanji] .gift-art{position:absolute;inset:0;width:100%;height:100%}
html .mock-surface .gift-card[data-gift-kind^=kanji]:focus-visible{outline:3px solid var(--mint);outline-offset:6px}
/* Same Japanese typeface as the KanjiDex, scaled with the square card. */
.gift-kanji{position:absolute;inset:0;display:grid;place-items:center;font:500 calc(var(--kanji-card-height,280px)*.5)/1 'Yu Gothic',Meiryo,system-ui,sans-serif;letter-spacing:normal;-webkit-text-stroke:0;text-shadow:none;color:#352844;pointer-events:none}
html[data-ui-theme=dark] .gift-kanji{color:#fffdf5}
.gift-load-error{margin:0;color:var(--ink);font:14px/1.3 PixelUI,sans-serif}
@media(max-height:680px){.album-gifts{--kanji-card-height:224px}}
@media(max-height:480px){.album-gifts{--kanji-card-height:168px}}
.workbench .gift-demo-note{display:block;text-align:center;font:11px/1.2 PixelUI,monospace;color:inherit;margin:0 0 6px}
@media(max-height:680px){.album-overview{min-height:71px}.gift-scroll{padding-top:16px;gap:12px}.gift-card-stage{padding-bottom:12px}.gift-sequence{margin-bottom:18px}.mock-surface .gift-card{width:196px;height:280px}.gift-card .gift-art{width:128px;height:144px}}
@media(max-height:480px){.mock-surface .gift-card{width:140px;height:200px;gap:8px;padding:16px}.gift-card .gift-art{width:96px;height:108px}.gift-sequence{margin-bottom:12px}}
/* Only sealed boxes grow to the card's visual stage. Gift rewards stay compact. */
.mock-surface .gift-card:is([data-gift-kind=daily],[data-gift-kind=pass]):not(.is-revealed){width:var(--kanji-card-height);padding-inline:0}
.gift-card:is([data-gift-kind=daily],[data-gift-kind=pass]):not(.is-revealed)>.gift-art{width:var(--kanji-card-height);height:var(--kanji-card-height)}
/* One visual stage and one text hierarchy for every revealed gift item. */
.gift-result{--gift-reward-size:160px;display:grid;grid-template-rows:var(--gift-reward-size) 26px 22px;align-items:center;justify-items:center;gap:8px;width:100%;pointer-events:none}
.gift-card .gift-result .gift-art{width:var(--gift-reward-size);height:var(--gift-reward-size)}
.gift-result-note{font:20px/1 UniversityActions,sans-serif;color:var(--muted);pointer-events:none}
@media(max-height:680px){.gift-result{--gift-reward-size:128px}}
@media(max-height:480px){.gift-result{--gift-reward-size:96px;grid-template-rows:var(--gift-reward-size) 22px 20px;gap:6px}.gift-item-name{font-size:20px}.gift-result-note{font-size:18px}}
/* Keep both actions directly below the reward, reserving their space before
   they appear so the card never jumps when the reading guard ends. */
.gift-scroll{scrollbar-width:none}
.gift-scroll::-webkit-scrollbar{display:none}
@media(max-height:680px){
 .gift-pane:has(.gift-bonus-footer) .gift-card-stage{padding-bottom:0}
 .gift-pane:has(.gift-bonus-footer) .gift-sequence{margin-bottom:6px;font-size:18px}
 .mock-surface .gift-pane:has(.gift-bonus-footer) .gift-card:not([data-gift-kind^=kanji]){height:208px;padding:8px 18px}
 .mock-surface .gift-pane:has(.gift-bonus-footer) .gift-card:not([data-gift-kind^=kanji]):not(.is-revealed){height:224px;padding:0}
 .gift-card-wrap:has([data-gift-kind^=kanji]){height:224px}
}
@media(max-height:480px){
 .mock-surface .gift-pane:has(.gift-bonus-footer) .gift-card:not([data-gift-kind^=kanji]){height:160px;padding:4px 10px}
 .mock-surface .gift-pane:has(.gift-bonus-footer) .gift-card:not([data-gift-kind^=kanji]):not(.is-revealed){height:168px}
 .gift-card-wrap:has([data-gift-kind^=kanji]){height:168px}
}
.gift-card-veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:#fff;opacity:0;border-radius:12px}
.gift-card-veil[hidden],.gift-remaining[hidden],.gift-sequence[hidden]{display:none!important}
.gift-creature{position:absolute;left:18%;top:18%;width:64%;height:64%;image-rendering:pixelated;pointer-events:none}
/* Center the name alone; the element icon sits outside its left edge. */
.gift-creature-heading{position:absolute;left:50%;bottom:8%;width:max-content;min-height:calc(var(--kanji-card-height)/10);transform:translateX(-50%);display:flex;align-items:center;justify-content:center;color:var(--ink);pointer-events:none}
.gift-creature-name{font:calc(var(--kanji-card-height)*.085)/1 UniversityActions,sans-serif;white-space:nowrap}
.gift-creature-type{position:absolute;right:calc(100% + 6px);top:50%;transform:translateY(-50%);width:calc(var(--kanji-card-height)/10);height:calc(var(--kanji-card-height)/10);object-fit:contain;image-rendering:pixelated}
.gift-kanji-meanings{position:absolute;inset:auto 12% 9%;max-height:15%;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font:calc(var(--kanji-card-height)*.065)/1.1 UniversityActions,sans-serif;color:var(--ink);pointer-events:none}
/* Same badge as discovery-ui / interface-confort and the dark Dex remaster.
   Only its overlay position changes on the large revealed card. */
.gift-card .dex-new-badge{position:absolute;z-index:2;top:-16px;bottom:auto;right:8%;padding:4px 8px;font:26px/1 PixelUI,sans-serif;color:#38654d;background:#d6efdb;border:2px solid #86ac92;border-radius:0;white-space:nowrap;pointer-events:none;text-transform:none;text-shadow:none;-webkit-text-stroke:0;box-shadow:none}
html[data-ui-theme=dark] .gift-card .dex-new-badge{padding:6px 12px;border:2px solid #625a70;border-radius:12px;background:#303139;color:#d5b8ff!important}
/* A single card-only anchor for sealed cards, boxes and reward drawings.
   Labels, counters and actions never participate in centering. */
.album-gifts .gift-pane .gift-card-stage{--gift-card-center-offset:-28px;padding-bottom:56px}
.gift-card-stage .gift-card-wrap{display:flex;align-items:center;justify-content:center;height:var(--kanji-card-height)}
.gift-card-stage .gift-bonus-footer{position:absolute;top:calc(50% + var(--gift-card-center-offset) + var(--kanji-card-height)/2 + 48px);margin-top:0}
.gift-pane .gift-card-stage .gift-sequence{position:absolute;bottom:calc(50% - var(--gift-card-center-offset) + var(--kanji-card-height)/2 + 20px);margin:0}
/* The image itself shares the card center; its description sits below it. */
.gift-card .gift-result{position:absolute;top:calc(50% - var(--gift-reward-size)/2);left:0}
/* Compact only the revealed gift frame. Keep the drawing and actions on their
   existing anchors; the asymmetric frame trims the empty space above the art. */
.gift-card-stage:has(.gift-card[data-rounded-frame]){--gift-result-frame-height:272px;--gift-result-frame-shift:24px}
.mock-surface .gift-pane .gift-card-stage .gift-card[data-rounded-frame]{height:var(--gift-result-frame-height);top:var(--gift-result-frame-shift)}
.gift-card[data-rounded-frame] .gift-result{top:calc(50% - var(--gift-result-frame-shift) - var(--gift-reward-size)/2)}
.gift-pane .gift-card-stage:has(.gift-card[data-rounded-frame]) .gift-sequence{bottom:calc(50% - var(--gift-card-center-offset) + var(--gift-result-frame-height)/2 - var(--gift-result-frame-shift) + 24px)}
@media(max-height:680px){.gift-card-stage:has(.gift-card[data-rounded-frame]){--gift-result-frame-height:232px;--gift-result-frame-shift:28px}}
@media(max-height:480px){.gift-card-stage:has(.gift-card[data-rounded-frame]){--gift-result-frame-height:182px;--gift-result-frame-shift:23px}}
.gift-bonus-choice{grid-template-rows:52px 36px;transform-origin:center top}
.gift-bonus-choice [data-gift-ad]{grid-row:1}
.gift-bonus-choice [data-gift-skip]{grid-row:2}
.gift-bonus-choice [hidden]{display:none!important}
@media(max-height:680px){.album-gifts .gift-pane .gift-card-stage{--gift-card-center-offset:-6px;padding-bottom:12px}}
@media(prefers-reduced-motion:reduce){.mock-surface .gift-card,.mock-surface .gift-row{transition:none}}
/* Rarity and three taps are overlays; never enter the card centering layout. */
.gift-rarity-heading{position:absolute;left:0;right:0;bottom:calc(50% - var(--gift-card-center-offset) + var(--kanji-card-height)/2 + 22px);display:grid;justify-items:center;gap:12px;pointer-events:none;color:var(--gift-rarity-ink)}
.gift-rarity-heading[hidden],.gift-tap-progress[hidden]{display:none!important}
.gift-rarity-name{font:28px/1 UniversityActions,sans-serif;text-transform:uppercase;white-space:nowrap}
.gift-tap-progress{position:absolute;left:0;right:0;top:calc(50% + var(--gift-card-center-offset) + var(--kanji-card-height)/2 + 22px);display:flex;justify-content:center;gap:10px;color:var(--gift-rarity-ink);pointer-events:none}
.gift-tap-progress i{position:relative;box-sizing:border-box;display:block;flex:none;width:32px;height:32px}
.gift-tap-progress i>span{position:absolute;display:block;width:28px;height:28px;left:2px;top:2px;background:center/100% 100% no-repeat;image-rendering:pixelated}
.gift-tap-progress i.is-future>span{width:21px;height:21px;left:6px;top:6px;background-image:url('/assets/cadeaux-boost-2026-10-19/future-light.png')}
.gift-tap-progress i.is-done>span{background-image:url('/assets/cadeaux-boost-2026-10-19/used-light.png')}
html[data-ui-theme=dark] .gift-tap-progress i.is-future>span{background-image:url('/assets/cadeaux-boost-2026-10-19/future-dark.png')}
html[data-ui-theme=dark] .gift-tap-progress i.is-done>span{background-image:url('/assets/cadeaux-boost-2026-10-19/used-dark.png')}
.gift-tap-progress[data-box-rarity=common] i.is-current>span{background-image:url('/assets/cadeaux-boost-2026-10-19/current-common.png')}
.gift-tap-progress[data-box-rarity=rare] i.is-current>span{background-image:url('/assets/cadeaux-boost-2026-10-19/current-rare.png')}
.gift-tap-progress[data-box-rarity=epic] i.is-current>span{background-image:url('/assets/cadeaux-boost-2026-10-19/current-epic.png')}
.gift-tap-progress[data-box-rarity=legendary] i.is-current>span{background-image:url('/assets/cadeaux-boost-2026-10-19/current-legendary.png')}
.gift-tap-progress[data-box-rarity=divine] i.is-current>span{background-image:url('/assets/cadeaux-boost-2026-10-19/current-divine.png')}
.gift-tap-progress[data-box-rarity=demonic] i.is-current>span{background-image:url('/assets/cadeaux-boost-2026-10-19/current-demonic.png')}
.gift-card-stage:has(.gift-tap-progress:not([hidden])) .gift-remaining{bottom:auto;top:max(calc(100% - 32px),calc(50% + var(--gift-card-center-offset) + var(--kanji-card-height)/2 + 66px))}
:is(.gift-rarity-heading,.gift-tap-progress)[data-box-rarity=common]{--gift-rarity-ink:var(--muted)}
:is(.gift-rarity-heading,.gift-tap-progress)[data-box-rarity=rare]{--gift-rarity-ink:#3970af}
:is(.gift-rarity-heading,.gift-tap-progress)[data-box-rarity=epic]{--gift-rarity-ink:#7950a7}
:is(.gift-rarity-heading,.gift-tap-progress)[data-box-rarity=legendary]{--gift-rarity-ink:#94620b}
:is(.gift-rarity-heading,.gift-tap-progress)[data-box-rarity=divine]{--gift-rarity-ink:#826b3a}
:is(.gift-rarity-heading,.gift-tap-progress)[data-box-rarity=demonic]{--gift-rarity-ink:#b3304c}
html[data-ui-theme=dark] :is(.gift-rarity-heading,.gift-tap-progress)[data-box-rarity=rare]{--gift-rarity-ink:#9ac6f6}
html[data-ui-theme=dark] :is(.gift-rarity-heading,.gift-tap-progress)[data-box-rarity=epic]{--gift-rarity-ink:#c8a2fa}
html[data-ui-theme=dark] :is(.gift-rarity-heading,.gift-tap-progress)[data-box-rarity=legendary]{--gift-rarity-ink:#ffd02b}
html[data-ui-theme=dark] :is(.gift-rarity-heading,.gift-tap-progress)[data-box-rarity=divine]{--gift-rarity-ink:#fff5d9}
html[data-ui-theme=dark] :is(.gift-rarity-heading,.gift-tap-progress)[data-box-rarity=demonic]{--gift-rarity-ink:#ff758d}
@media(max-height:680px){.gift-rarity-heading{gap:8px;bottom:calc(50% - var(--gift-card-center-offset) + var(--kanji-card-height)/2 + 16px)}.gift-rarity-name{font-size:24px}}
/* Sealed-box effects use independent overlays, leaving the native sprite intact. */
.gift-art img.gift-chroma{opacity:0;mix-blend-mode:screen;pointer-events:none}
.gift-chroma-cyan{filter:brightness(0) saturate(100%) invert(84%) sepia(90%) saturate(2000%) hue-rotate(120deg);clip-path:inset(26% 0 62%)}
.gift-chroma-magenta{filter:brightness(0) saturate(100%) invert(38%) sepia(98%) saturate(1800%) hue-rotate(280deg);clip-path:inset(66% 0 26%)}
.gift-card-wrap>.gift-card{z-index:1}
.gift-divine-halo,.gift-demonic-seal{position:absolute;z-index:0;pointer-events:none;left:50%;top:50%;width:calc(var(--kanji-card-height)*1.22);height:calc(var(--kanji-card-height)*1.22);transform:translate(-50%,-50%);opacity:0}
.gift-divine-halo{background:radial-gradient(circle,#fff9d677 0%,#ffe6a54d 34%,#f5dba223 52%,transparent 72%);border-radius:50%}
.gift-demonic-seal{width:calc(var(--kanji-card-height)*2);height:calc(var(--kanji-card-height)*2)}
.gift-demonic-seal img{display:block;width:100%;height:100%;max-width:none;image-rendering:pixelated;transform:rotate(180deg)}
/* The pentacle is a backdrop. Keep the shared text/attempt anchors in front,
   even while the gift's release animation creates its own stacking context. */
.gift-rarity-heading,.gift-tap-progress,.gift-remaining{z-index:4}
.gift-scroll:has(.gift-card[data-box-rarity=demonic]:not(.is-revealed)){overflow-x:hidden}
.gift-card-wrap:has(>.gift-card[data-box-rarity=divine][data-box-idle=true]:not(.is-revealed))>.gift-divine-halo{animation:gift-halo-breathe 3600ms ease-in-out infinite}
.gift-card-wrap:has(>.gift-card[data-box-rarity=demonic][data-box-idle=true]:not(.is-revealed))>.gift-demonic-seal{animation:gift-seal-breathe 3200ms ease-in-out infinite}
@keyframes gift-halo-breathe{0%,100%{opacity:.64}50%{opacity:1}}
@keyframes gift-seal-breathe{0%,100%{opacity:.12}50%{opacity:.78}}
@media(prefers-reduced-motion:reduce){
 .gift-card-wrap:has(>.gift-card[data-box-rarity=divine][data-box-idle=true]:not(.is-revealed))>.gift-divine-halo{animation:none;opacity:.8}
 .gift-card-wrap:has(>.gift-card[data-box-rarity=demonic][data-box-idle=true]:not(.is-revealed))>.gift-demonic-seal{animation:none;opacity:.5}
}
.gift-special-art{display:grid;place-items:center;width:var(--gift-reward-size,160px);height:var(--gift-reward-size,160px);justify-self:center}
.gift-special-art img{display:block;max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain;image-rendering:pixelated}