/* The game island: one small, original picture-book world for the menu. */
:root{--home-ink:#483c56;--home-muted:#746c7c;--home-outline:#e9dce7}
body{background:radial-gradient(circle at 88% 9%,#fff0e2 0,transparent 34%),linear-gradient(180deg,#fff9f2 0%,#fffdf8 42%,#f4faf8 100%);color:var(--home-ink)}
.app-header{max-width:1160px;padding:18px 24px 10px}
.brand{display:flex;align-items:center;gap:10px;color:var(--home-ink);font-size:16px;line-height:1.05;letter-spacing:.02em}
.brand small{font-size:12px;letter-spacing:.14em}
.brand-dot{display:grid;place-items:center;width:43px;height:43px;border:2px solid #eed3a4;border-radius:15px;background:#fff0c4;color:#f2aa6f;font-size:23px;box-shadow:0 4px 0 #f9e7c6}
.app-header nav .ghost-btn{border:2px solid #ecdde7;border-radius:999px;background:#fffdfa;color:#61556e;padding:9px 18px;box-shadow:0 3px 0 #eee2e7}
.app-header nav .ghost-btn:hover{background:#ffeef1}
main{max-width:1120px;padding:14px 22px 50px}
#screen-home .hero{position:relative;isolation:isolate;min-height:348px;margin:4px 0 32px;padding:40px 54px;border:3px solid #f6d4cd;border-radius:38px;background:radial-gradient(circle at 21% 20%,#fffaf2 0 12%,transparent 12.2%),radial-gradient(circle at 81% 20%,#fff8ec 0 6%,transparent 6.2%),linear-gradient(112deg,#ffe7df 0%,#ffefe4 50%,#ffe8dd 100%);box-shadow:0 10px 0 #f9dad2,0 22px 40px rgba(104,72,94,.10);overflow:hidden}
#screen-home .hero:before{content:"";position:absolute;z-index:-1;left:-7%;right:-7%;bottom:-74px;height:140px;border-radius:50% 50% 0 0;background:#fff6e6;transform:rotate(-2deg)}
#screen-home .hero:after{content:"✦";position:absolute;top:21px;right:44%;color:#fff;opacity:.85;font-size:40px;transform:rotate(-12deg)}
.hero-copy{position:relative;z-index:2;max-width:560px}
#screen-home .home-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:2px solid #f5d6c8;border-radius:99px;background:#fff9f0;color:#aa777a;font-size:10px;letter-spacing:.12em}
#screen-home .home-eyebrow span{color:#e5a44e}
#screen-home .hero h1{margin:18px 0 12px;color:#604a69;font-size:clamp(44px,5.6vw,72px);font-weight:950;letter-spacing:.025em;line-height:1.14}
#screen-home .hero h1 em{font-style:normal;color:#dc7891}
#screen-home .hero-copy>p{margin:0 0 24px;color:#735e6f;font-size:15px;font-weight:700;line-height:1.8}
.hero-cta{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:54px;padding:12px 20px;border:2px solid #b86683;border-radius:18px;background:#db7e9a;color:#fff;font-size:15px;font-weight:900;box-shadow:0 6px 0 #b96682;transition:transform .18s ease,box-shadow .18s ease}
.hero-cta:hover{transform:translateY(-2px);box-shadow:0 8px 0 #b96682}
.hero-cta:active{transform:translateY(4px);box-shadow:0 2px 0 #b96682}
.hero-cta span{font-size:21px;line-height:1}
#screen-home .hero img{position:absolute;right:1%;bottom:-8px;z-index:1;width:45%;max-width:460px;max-height:none;height:auto;filter:drop-shadow(0 11px 0 rgba(212,142,132,.13));transform-origin:bottom center;animation:homeBob 4s ease-in-out infinite}
.hero-coins{position:absolute;top:24px;right:28px;z-index:3;display:flex;align-items:center;gap:8px;padding:9px 15px;border:2px solid #f4d596;border-radius:999px;background:#fff9df;color:#8c6470;font-size:12px;font-weight:900;box-shadow:0 4px 0 #f3d9a8}
.hero-coins strong{color:#66495c;font-size:17px}.hero-coins span{color:#d99c48;font-size:16px}
.home-list-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:0 4px 17px}
.home-kicker{color:#dc8c93;font-size:11px;font-weight:900;letter-spacing:.18em}
.home-list-head h2{margin:3px 0 2px;color:#54445e;font-size:clamp(24px,3vw,32px);font-weight:950;letter-spacing:.02em}
.home-list-head p{margin:0;color:var(--home-muted);font-size:13px;font-weight:600}
.home-count{align-self:center;padding:8px 13px;border:2px solid #e4dce6;border-radius:999px;background:#fff;color:#8a7188;font-size:12px;font-weight:800;white-space:nowrap}
.home-filters{display:flex;gap:9px;margin:0 2px 21px;overflow-x:auto;padding:3px 3px 7px;scrollbar-width:thin}
.home-filter{flex:none;min-height:42px;padding:8px 19px;border:2px solid #e6dbe7;border-radius:999px;background:#fffdfa;color:#7e7184;font-size:13px;font-weight:900;box-shadow:0 3px 0 #eee6ed;transition:transform .18s ease,background .18s ease}
.home-filter:hover{transform:translateY(-2px);background:#fff2f7}
.home-filter.is-active{border-color:#a977ad;background:#b388ba;color:#fff;box-shadow:0 3px 0 #896293}
#screen-home .game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
#screen-home .game-card{--tile:#fff0e9;--icon:#cf806f;display:flex;flex-direction:column;align-items:stretch;gap:0;min-height:237px;padding:20px 22px;border:2px solid #e9dce5;border-radius:28px;background:linear-gradient(145deg,#fffdfa 22%,var(--tile) 170%);color:var(--home-ink);box-shadow:0 7px 0 #eee3e8;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
#screen-home .game-card[data-tone="peach"]{--tile:#ffe2d5;--icon:#ca7e6b}
#screen-home .game-card[data-tone="mint"]{--tile:#d8f2e7;--icon:#579b8e}
#screen-home .game-card[data-tone="lavender"]{--tile:#ece2fa;--icon:#9980ba}
#screen-home .game-card[data-tone="pink"]{--tile:#ffe3ec;--icon:#c9809e}
#screen-home .game-card[data-tone="butter"]{--tile:#fff0c8;--icon:#bc9860}
#screen-home .game-card.arcade-new{border-color:#e9dce5;background:linear-gradient(145deg,#fffdfa 22%,var(--tile) 170%)}
#screen-home .game-card.arcade-new::after{display:none}
#screen-home .game-card:hover{transform:translateY(-4px);border-color:var(--icon);box-shadow:0 11px 0 #e7dae4}
#screen-home .game-card:active{transform:translateY(3px);box-shadow:0 4px 0 #e7dae4}
#screen-home .game-card[hidden]{display:none!important}
.card-top{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:18px}
.card-icon{display:grid;place-items:center;width:65px;height:65px;flex:none;border:2px solid color-mix(in srgb,var(--icon) 27%,white);border-radius:23px;background:var(--tile);color:var(--icon);transform:rotate(-6deg)}
.card-icon svg{width:42px;height:42px;transform:rotate(6deg)}
.card-tag{align-self:start;padding:5px 9px;border-radius:999px;background:#fff;color:var(--icon);font-size:10px;font-weight:900;white-space:nowrap}
#screen-home .game-card strong{font-size:18px;font-weight:950;line-height:1.45;letter-spacing:-.02em}
#screen-home .game-card .card-desc{display:block;margin:7px 0 17px;color:#746b79;font-size:12px;font-weight:650;line-height:1.65}
.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
#screen-home .game-card small{color:#8c7b89;font-size:11px;font-weight:800}
#screen-home .game-card b{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:var(--tile);color:var(--icon);font-size:19px}
#screen-home .game-card:first-child{background:linear-gradient(125deg,#fff8f1,#ffe6dd)}
#screen-home .note{margin:27px 0 0;color:#9b8996;font-size:11px}
@keyframes homeBob{50%{transform:translateY(-8px) rotate(2deg)}}
@media(max-width:760px){
  .app-header{padding:13px 14px 8px}.brand{font-size:14px}.brand small{font-size:10px}.brand-dot{width:36px;height:36px;border-radius:12px}.app-header nav .ghost-btn{padding:7px 11px;font-size:12px}
  main{padding:8px 13px 36px}
  #screen-home .hero{min-height:362px;margin-bottom:29px;padding:26px 22px;border-radius:30px;box-shadow:0 7px 0 #f9dad2,0 16px 30px rgba(104,72,94,.08)}
  #screen-home .hero h1{font-size:clamp(42px,10vw,60px);margin-top:16px}
  #screen-home .hero-copy>p{font-size:12px;line-height:1.65;max-width:235px;margin-bottom:18px}
  #screen-home .home-eyebrow{font-size:8px;padding:6px 9px;letter-spacing:.08em}
  #screen-home .hero img{width:60%;right:0;bottom:-11px;max-width:310px}
  .hero-coins{top:auto;bottom:15px;right:15px;padding:6px 10px;font-size:10px}
  .hero-cta{min-height:47px;padding:9px 13px;gap:5px;font-size:11px;border-radius:14px}
  .hero-cta span{font-size:17px}
  .home-list-head{align-items:start}.home-list-head h2{font-size:22px}.home-list-head p{font-size:11px}.home-count{padding:6px 8px;font-size:9px}
  .home-filters{gap:7px;margin-bottom:15px}.home-filter{min-height:39px;padding:7px 15px;font-size:12px}
  #screen-home .game-grid{grid-template-columns:1fr;gap:12px}
  #screen-home .game-card{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:12px;min-height:122px;padding:14px 15px;border-radius:22px}
  #screen-home .game-card:first-child{min-height:132px}
  .card-top{grid-column:1;grid-row:1/4;display:block;margin:0}.card-icon{width:59px;height:59px;border-radius:20px}.card-icon svg{width:39px;height:39px}
  .card-tag{display:inline-block;margin-top:9px;padding:4px 6px;font-size:8px}
  #screen-home .game-card strong{grid-column:2;grid-row:1;font-size:15px}
  #screen-home .game-card .card-desc{grid-column:2;grid-row:2;margin:3px 0 6px;font-size:10px;line-height:1.45}
  .card-bottom{grid-column:2;grid-row:3}.card-bottom b{width:29px;height:29px}
}
@media(max-width:380px){#screen-home .hero img{right:-2%;width:61%}.home-count{display:none}}
@media(prefers-reduced-motion:reduce){#screen-home .hero img{animation:none}.hero-cta,.home-filter,#screen-home .game-card{transition:none}}

/* Generated artwork has its own composition; interface text stays live HTML. */
#screen-home .hero{min-height:385px;background:#dff4f5;border-color:#d7e9e7;box-shadow:0 10px 0 #d8e9e4,0 22px 40px rgba(65,113,125,.13)}
#screen-home .hero:before,#screen-home .hero:after{content:none}
#screen-home .hero-visual{position:absolute;inset:0;z-index:0;display:block}
#screen-home .hero .hero-visual img{position:static;display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center 55%;filter:none;transform:none;animation:none}
#screen-home .hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,250,235,.72),rgba(255,250,235,.18) 44%,transparent 72%);pointer-events:none}
#screen-home .hero-copy{position:relative;z-index:2}
#screen-home .home-eyebrow{background:rgba(255,251,239,.9);border-color:rgba(233,199,179,.75)}
#screen-home .hero h1{color:#3f4e68;text-shadow:0 2px 0 rgba(255,255,255,.65)}
#screen-home .hero h1 em{color:#c76885}
#screen-home .hero-copy>p{color:#475f70;text-shadow:0 1px 0 rgba(255,255,255,.7)}
#screen-home .game-card,#screen-home .game-card.arcade-new{min-height:342px;padding:11px 11px 15px;border-color:#dce9e7;background:#fffdf9;box-shadow:0 7px 0 #e0eae8;overflow:hidden}
#screen-home .game-card:first-child{background:#fffdf9}
#screen-home .game-card:hover{border-color:#78b6b4;box-shadow:0 11px 0 #d7e7e5}
#screen-home .card-art{display:block;flex:none;width:100%;aspect-ratio:1.44;overflow:hidden;border-radius:19px;background:#dcf3f2;margin-bottom:14px}
#screen-home .card-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .3s ease}
#screen-home .game-card:hover .card-art img{transform:scale(1.035)}
#screen-home .card-top{position:absolute;z-index:1;top:18px;right:19px;margin:0}
#screen-home .card-icon{display:none}
#screen-home .card-tag{padding:6px 10px;border:1px solid rgba(255,255,255,.8);background:rgba(255,253,247,.93);box-shadow:0 3px 8px rgba(56,93,108,.12);color:#5b607c;backdrop-filter:blur(4px)}
#screen-home .game-card strong{padding:0 8px;color:#374c61;font-size:18px}
#screen-home .game-card .card-desc{padding:0 8px;color:#687a81;font-size:12px;margin:6px 0 14px}
#screen-home .card-bottom{padding:0 8px}
#screen-home .game-card b{background:#e0f3f0;color:#437d80}
@media(max-width:760px){
  #screen-home .hero{min-height:480px;padding:27px 22px;margin-bottom:30px;border-color:#d7e9e7;box-shadow:0 7px 0 #d8e9e4,0 17px 30px rgba(65,113,125,.11)}
  #screen-home .hero .hero-visual img{object-position:center center}
  #screen-home .hero-visual:after{background:linear-gradient(180deg,rgba(255,252,240,.62),rgba(255,252,240,.26) 48%,transparent 68%)}
  #screen-home .hero-copy>p{max-width:270px}
  #screen-home .hero-coins{top:15px;right:14px;bottom:auto}
  #screen-home .game-card,#screen-home .game-card.arcade-new{display:grid;grid-template-columns:105px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:12px;min-height:124px;padding:8px;border-radius:21px}
  #screen-home .game-card:first-child{min-height:124px}
  #screen-home .card-art{grid-column:1;grid-row:1/4;width:105px;height:105px;aspect-ratio:1;margin:0;border-radius:16px}
  #screen-home .card-top{top:13px;left:13px;right:auto}
  #screen-home .card-tag{padding:3px 6px;font-size:8px}
  #screen-home .game-card strong{grid-column:2;grid-row:1;padding:5px 4px 0;font-size:15px}
  #screen-home .game-card .card-desc{grid-column:2;grid-row:2;margin:3px 0 5px;padding:0 4px;font-size:11px;line-height:1.4}
  #screen-home .card-bottom{grid-column:2;grid-row:3;padding:0 3px 1px}
}
@media(max-width:380px){#screen-home .hero{min-height:450px}#screen-home .game-card,#screen-home .game-card.arcade-new{grid-template-columns:92px minmax(0,1fr)}#screen-home .card-art{width:92px;height:100px}}
@media(prefers-reduced-motion:reduce){#screen-home .card-art img{transition:none}}
.home-development{margin-top:38px;padding:20px;border:2px dashed #c8d6db;border-radius:25px;background:#f3f7f8}
.home-development summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;color:#566d7b}
.home-development summary::-webkit-details-marker{display:none}
.home-development summary span{font-size:21px;font-weight:900}
.home-development summary small{font-size:12px;line-height:1.5}
.home-development summary:after{content:'＋';font-size:25px}
.home-development[open] summary:after{content:'−'}
.home-development summary:focus-visible{outline:3px solid #a977ad;outline-offset:6px;border-radius:8px}
#screen-home .hero h1{max-width:560px;font-size:clamp(27px,4.3vw,48px);letter-spacing:-.045em;margin:10px 0 26px;word-break:keep-all;overflow-wrap:anywhere}
.development-note{margin:18px 0;color:#687a81;font-size:13px;line-height:1.7}
@media(max-width:760px){.home-development{padding:15px}.home-development summary{flex-wrap:wrap}.home-development summary span{font-size:19px}.home-development summary small{flex:1;font-size:10px}}