:root { --safe-bottom: env(safe-area-inset-bottom, 0px); --page: #edf4ef; --paper: #fbfdfb; --ink: #284b42; --muted: #71857f; --line: rgba(61, 105, 91, .18); --jade: #4f9277; --gold: #b98a3d; --number: "SFMono-Regular", "Roboto Mono", Menlo, monospace; }
* { box-sizing: border-box; }
html, body { min-width: 320px; margin: 0; background: var(--page); }
body { min-height: 100dvh; color: var(--ink); font-family: "Noto Serif CJK SC", "Songti SC", serif; letter-spacing: 0; }
button { font: inherit; letter-spacing: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
game-navbar { display: block; min-height: calc(58px + env(safe-area-inset-top, 0px)); }
.gifts-shell { width: min(100%, 760px); margin: 0 auto; padding: 16px 14px calc(32px + var(--safe-bottom)); }
.gifts-shell[aria-busy="true"] { visibility: hidden; }
.gift-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gift-card { display: grid; min-height: 246px; grid-template-rows: auto 1fr auto; border: 1px solid rgba(150, 111, 53, .38); border-radius: 6px; padding: 12px; background: linear-gradient(160deg, rgba(255, 252, 240, .96), rgba(241, 247, 238, .94)); box-shadow: 0 5px 18px rgba(40, 76, 65, .08); }
.gift-card header { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 9px; }
.gift-card header img { width: 54px; height: 54px; object-fit: contain; }
.gift-card h2 { overflow: hidden; margin: 0; color: #5c442d; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.gift-rewards { display: grid; align-content: start; gap: 7px; margin: 14px 0; padding: 0; list-style: none; }
.gift-reward { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; color: #637970; font-size: 13px; }
.gift-reward.has-icon { grid-template-columns: 24px minmax(0, 1fr) auto; }
.gift-reward img { width: 23px; height: 23px; object-fit: contain; }
.gift-reward span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gift-reward b { color: #9c6931; font-family: var(--number); font-size: 13px; }
.gift-card button { min-height: 38px; border: 1px solid rgba(113, 81, 37, .52); border-radius: 4px; color: #fffdf4; background: #a87836; cursor: pointer; font-size: 12px; font-weight: 800; }
.gift-card button:disabled { border-color: #d4dfd8; color: #7d8c86; background: #e4ebe6; cursor: not-allowed; }
.gift-card.is-claimed { filter: saturate(.7); }
.gifts-loading { position: fixed; top: 50%; left: 50%; color: var(--muted); font-size: 12px; transform: translate(-50%, -50%); }
.gifts-loading[hidden] { display: none; }
.gifts-toast { position: fixed; z-index: 20; right: 16px; bottom: calc(22px + var(--safe-bottom)); left: 16px; max-width: 440px; margin: auto; border: 1px solid rgba(132, 93, 44, .32); border-radius: 5px; padding: 10px 12px; color: #fffdf7; background: rgba(60, 72, 57, .96); font-size: 11px; opacity: 0; pointer-events: none; text-align: center; transform: translateY(8px); transition: opacity .18s ease, transform .18s ease; }
.gifts-toast.is-visible { opacity: 1; transform: translateY(0); }
button:not(:disabled):active { filter: brightness(.92); transform: translateY(1px); }
button:focus-visible { outline: 2px solid #c05e43; outline-offset: 2px; }
@media (max-width: 420px) { .gift-grid { grid-template-columns: 1fr; } }