/* Sculpted metal icons and satin interaction surfaces. */
.premium-icon-defs { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
.app-screen > .heart-atmosphere { left:0; right:auto; bottom:auto; border-radius:0; max-width:none; max-height:none; }
.feature-grid { gap:16px 10px; }
.feature-grid > div { position:relative; padding:12px 3px 10px; border-radius:18px; background:linear-gradient(155deg,#e5bbcf09,#ffffff00 70%); transition:background .3s ease,transform .3s ease; }
.feature-grid .feature-icon { position:relative; width:62px; height:62px; margin-bottom:10px; border-radius:20px; border:1px solid #d9b0a953; background:radial-gradient(ellipse at 28% 0%,#e6b6c338,transparent 65%),linear-gradient(145deg,#39212e,#170e18 70%); box-shadow:inset 0 1px 1px #fff0dd45,inset 0 -2px 3px #0008,0 8px 16px #0006,0 0 0 3px #d6a69208; }
.feature-grid .feature-icon::after { content:""; position:absolute; inset:4px; border-radius:16px; border:1px solid #e7c2b112; pointer-events:none; }
.feature-grid .premium-icon { width:46px; height:46px; overflow:visible; transition:transform .4s ease,filter .4s ease; }
.feature-grid b { font-size:13px; letter-spacing:.01em; }
.feature-grid small { color:#c0abb8; }
.feature-grid > div:nth-child(3n+2) .feature-icon { background:radial-gradient(ellipse at 28% 0%,#e5c27a2b,transparent 65%),linear-gradient(145deg,#352a22,#170e18 70%); }
.dynamic-grid { gap:16px; }
.dynamic-card {
  --accent:#e8aac0; --accent-rgb:232,170,192;
  isolation:isolate; position:relative; overflow:hidden; min-height:148px;
  grid-template-columns:76px minmax(0,1fr); gap:20px; align-items:center; align-content:center;
  padding:22px 52px 46px 22px; text-align:left; border-radius:25px;
  border:1px solid rgba(var(--accent-rgb),.3);
  background:radial-gradient(ellipse at 0% 0%,rgba(var(--accent-rgb),.15),transparent 66%),linear-gradient(115deg,#291520,#130e16 75%);
  box-shadow:inset 0 1px 0 #ffe6d926,inset 0 -1px 0 #0007,0 8px 24px #0003;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.treasure-card { --accent:#ebcc8f; --accent-rgb:235,204,143; background:radial-gradient(ellipse at 0% 0%,#d1a55b24,transparent 66%),linear-gradient(115deg,#292016,#140f15 75%); }
.share-card { --accent:#d4b7eb; --accent-rgb:212,183,235; background:radial-gradient(ellipse at 0% 0%,#ac81db22,transparent 66%),linear-gradient(115deg,#251c30,#140f18 75%); }
.dynamic-card::before, .primary-cta::before { content:""; position:absolute; z-index:0; inset:-50% -30%; pointer-events:none; background:linear-gradient(115deg,transparent 38%,#ffeacb00 43%,#ffeacb19 50%,#ffeacb00 57%,transparent 62%); transform:translateX(-75%); transition:transform .8s ease; }
.dynamic-card::after { content:""; position:absolute; inset:17px auto 17px 0; width:3px; height:auto; border-radius:4px; background:linear-gradient(transparent,var(--accent),transparent); opacity:.65; transform:none; box-shadow:0 0 15px rgba(var(--accent-rgb),.4); }
.dynamic-card > span { position:relative; z-index:1; }
.dynamic-card .dynamic-icon { width:76px; height:76px; margin:0; border-radius:23px; border:1px solid rgba(var(--accent-rgb),.45); background:radial-gradient(ellipse at 25% 0%,rgba(var(--accent-rgb),.24),transparent 65%),linear-gradient(145deg,#30202c,#140d17); box-shadow:inset 0 1px 2px #fff4e74d,inset 0 -3px 4px #0009,0 10px 19px #0006,0 0 0 4px rgba(var(--accent-rgb),.035); transition:box-shadow .3s ease; }
.dynamic-card .premium-icon { width:59px; height:59px; overflow:visible; transition:transform .45s ease,filter .45s ease; }
.dynamic-card b { margin:0; font-size:21px; line-height:1.2; color:#fff1e9; }
.dynamic-card small { font-size:13px; line-height:1.55; margin-top:6px; color:#c4b2c0; }
.dynamic-card .open-label { position:absolute; left:118px; right:auto; bottom:17px; padding:4px 9px; border-radius:6px; border:1px solid rgba(var(--accent-rgb),.18); color:var(--accent); background:rgba(var(--accent-rgb),.05); font-size:9px; letter-spacing:.12em; }
.dynamic-card .open-label i { display:none; }
.dynamic-card .dynamic-arrow { position:absolute; right:16px; top:calc(50% - 17px); display:grid; place-items:center; width:32px; height:32px; border-radius:50%; border:1px solid rgba(var(--accent-rgb),.27); background:rgba(var(--accent-rgb),.07); color:var(--accent); font-size:19px; transition:transform .3s ease,background .3s ease; }
.primary-cta { position:relative; isolation:isolate; overflow:hidden; min-height:90px; border:1px solid #e5c29566; border-radius:23px; padding:20px; background:radial-gradient(ellipse at 0% 0%,#f0afbb28,transparent 65%),linear-gradient(115deg,#742441,#421b2d 70%,#62452d); box-shadow:inset 0 1px 1px #ffeadc3b,0 10px 24px #0004; transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease; }
.primary-cta > span { position:relative; z-index:1; }
.primary-cta > span:last-child { display:grid; place-items:center; flex-shrink:0; width:38px; height:38px; border:1px solid #e6c18b59; border-radius:50%; background:#ecc8910f; transition:transform .3s ease; }
.primary-cta b { font-size:20px; }
.dynamic-card:focus-visible,.primary-cta:focus-visible { outline:3px solid #f3d6a5; outline-offset:4px; }
@media (hover:hover) and (pointer:fine) {
  .feature-grid > div:hover { background:linear-gradient(155deg,#e5bbcf15,#ffffff00 80%); transform:translateY(-3px); }
  .feature-grid > div:hover .premium-icon { transform:translateY(-2px) rotate(-5deg); filter:drop-shadow(0 3px 5px #e9b4ca45); }
  .dynamic-card:hover { transform:translateY(-4px); border-color:rgba(var(--accent-rgb),.75); box-shadow:inset 0 1px 0 #ffe6d947,0 16px 32px #0005,0 0 25px rgba(var(--accent-rgb),.075); }
  .dynamic-card:hover::before,.primary-cta:hover::before { transform:translateX(75%); }
  .dynamic-card:hover .dynamic-icon { box-shadow:inset 0 1px 2px #fff4e76b,inset 0 -3px 4px #0009,0 10px 19px #0006,0 0 24px rgba(var(--accent-rgb),.17); }
  .dynamic-card:hover .premium-icon { transform:translateY(-3px) rotate(-4deg); filter:drop-shadow(0 2px 5px rgba(var(--accent-rgb),.3)); }
  .roulette-card:hover .premium-icon { transform:rotate(32deg); }
  .dynamic-card:hover .dynamic-arrow,.primary-cta:hover > span:last-child { transform:translate(2px,-2px); background:#ecd4b81a; }
  .primary-cta:hover { transform:translateY(-3px); border-color:#f2d4a4; box-shadow:inset 0 1px 1px #ffeadc57,0 16px 30px #0005,0 0 26px #cf936d17; }
}
.dynamic-card:active,.primary-cta:active { transform:translateY(1px) scale(.985); }
@media (max-width:400px) {
  .feature-grid { gap:12px 6px; }
  .feature-grid .feature-icon { width:52px; height:52px; border-radius:17px; }
  .feature-grid .premium-icon { width:40px; height:40px; }
  .feature-grid > div { padding:10px 1px 8px; }
  .dynamic-card { grid-template-columns:56px minmax(0,1fr); gap:14px; padding:18px 40px 43px 16px; min-height:146px; border-radius:21px; }
  .dynamic-card .dynamic-icon { width:56px; height:56px; border-radius:18px; }
  .dynamic-card .premium-icon { width:44px; height:44px; }
  .dynamic-card b { font-size:18px; }
  .dynamic-card small { font-size:12px; }
  .dynamic-card .open-label { left:86px; bottom:14px; font-size:8px; }
  .dynamic-card .dynamic-arrow { width:25px; height:25px; right:10px; font-size:16px; }
  .primary-cta { padding:18px 14px; gap:10px; }
  .primary-cta b { font-size:18px; }
  .primary-cta > span:last-child { width:32px; height:32px; }
}
@media (prefers-reduced-motion:reduce) {
  .feature-grid > div,.feature-grid .premium-icon,.dynamic-card,.dynamic-card .premium-icon,.dynamic-arrow,.primary-cta,.primary-cta > span:last-child,.dynamic-card::before,.primary-cta::before { transition:none !important; transform:none !important; }
  .dynamic-card::before,.primary-cta::before { display:none; }
}

.dynamic-card::after { display:block; }
