@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&family=Comfortaa:wght@300;400;700&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

:root{
  --bg:#0c0b1e;--bg2:#13112a;
  --surface:rgba(255,255,255,.04);--border:rgba(255,255,255,.07);
  --accent:#b8a8ff;--text:#e8e0ff;--text2:rgba(232,224,255,.4);
  --font:'Comfortaa',cursive;--font2:'Nunito',sans-serif;
}

body{background:var(--bg);display:flex;justify-content:center;align-items:center;min-height:100vh;font-family:var(--font);overflow:hidden}

/* ===== SCREENS ===== */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;background:var(--bg);gap:12px;padding:28px;overflow-y:auto}
.screen.hidden{display:none}
.screen-title{font-family:var(--font2);font-size:24px;font-weight:800;color:var(--text);letter-spacing:-.02em;margin-bottom:4px}
.screen-sub{font-size:11px;color:var(--text2);margin-bottom:12px;text-align:center;line-height:1.6}
.input-field{width:100%;max-width:280px;padding:11px 15px;background:var(--surface);border:1px solid var(--border);border-radius:13px;color:var(--text);font-family:var(--font);font-size:13px;outline:none;transition:border-color .2s}
.input-field::placeholder{color:var(--text2)}
.input-field:focus{border-color:rgba(184,168,255,.4)}

.btn{width:100%;max-width:280px;padding:11px;border-radius:13px;border:none;cursor:pointer;font-family:var(--font);font-size:13px;font-weight:700;transition:opacity .2s,transform .1s;touch-action:manipulation}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,#b8a8ff,#7f7aed);color:#fff}
.btn-secondary{background:var(--surface);border:1px solid var(--border);color:var(--text2)}
.btn-ghost{background:transparent;color:var(--text2);font-size:11px;padding:7px 14px;width:auto;max-width:none}
.btn-small{font-size:11px;padding:7px 14px;border-radius:10px;width:auto;max-width:none}
.btn-danger{background:rgba(255,80,80,.08);border:1px solid rgba(255,80,80,.2);color:#ff8080;font-size:11px;padding:7px 14px;border-radius:10px;width:auto;max-width:none}
.w100{width:100%;max-width:none}

/* Preview */
.preview-wrap{width:110px;height:110px;display:flex;align-items:center;justify-content:center;position:relative;margin:6px 0}
#previewCreature{position:relative;transition:all .3s cubic-bezier(.34,1.56,.64,1)}
#previewCreature .eye{position:absolute;background:#111;border-radius:50%}

/* Theme chooser */
.theme-label{font-size:11px;color:var(--text2);margin-bottom:4px;align-self:flex-start;padding-left:4px}
.theme-grid{display:flex;gap:7px;margin-bottom:4px;flex-wrap:wrap;justify-content:center}
.theme-btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 9px;background:var(--surface);border:1px solid var(--border);border-radius:11px;cursor:pointer;font-size:15px;transition:all .2s;min-width:46px}
.theme-btn span{font-size:9px;color:var(--text2)}
.theme-btn.active{background:rgba(184,168,255,.12);border-color:rgba(184,168,255,.4)}
.theme-btn.active span{color:var(--accent)}

/* ===== PHONE ===== */
.phone{width:100vw;height:100vh;max-width:420px;max-height:900px;background:radial-gradient(ellipse at 50% -10%,#1c1845,#0c0b1e);position:relative;overflow:hidden}

/* ===== THEME ===== */
.theme-bg{position:absolute;inset:0;pointer-events:none;z-index:0;transition:background 1.5s}
.theme-particles{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}

/* Particles — lentes et discrètes */
.theme-particle{position:absolute;pointer-events:none}

/* Stars */
.star-p{width:2px;height:2px;border-radius:50%;background:#fff;
  animation:tw var(--d,3s) ease-in-out var(--dl,0s) infinite}
@keyframes tw{0%,100%{opacity:.1;transform:scale(.7)}50%{opacity:.55;transform:scale(1.1)}}

/* Fire — flammes très subtiles */
.fire-p{border-radius:50% 50% 30% 30%;
  background:radial-gradient(ellipse at 50% 80%,rgba(255,120,20,.35),transparent);
  animation:fireRise var(--d,12s) ease-in var(--dl,0s) infinite}
@keyframes fireRise{0%{transform:translateY(0) scaleX(1);opacity:.3}50%{opacity:.5}100%{transform:translateY(-110vh) scaleX(.6);opacity:0}}

/* Water — bulles lentes */
.water-p{border-radius:50%;border:1px solid rgba(100,190,255,.25);background:rgba(80,160,255,.06);
  animation:bubbleRise var(--d,18s) ease-in var(--dl,0s) infinite}
@keyframes bubbleRise{0%{transform:translateY(0);opacity:.3}70%{opacity:.4}100%{transform:translateY(-110vh);opacity:0}}

/* Wind — feuilles très lentes */
.wind-p{animation:leafFloat var(--d,20s) ease-in-out var(--dl,0s) infinite;opacity:.25}
@keyframes leafFloat{0%{transform:translateY(0) rotate(0deg) translateX(0);opacity:.25}100%{transform:translateY(-110vh) rotate(540deg) translateX(40px);opacity:0}}

/* Sakura qui tombe */
.sakura-p{  animation-name: sakuraFall;  animation-timing-function: linear;}
@keyframes sakuraFall{  from{    transform: translateY(0);  }  to{    transform: translateY(100vh);  }}
/* Moon — lueurs flottantes */
.moon-p{border-radius:50%;background:rgba(180,160,255,.12);filter:blur(3px);
  animation:moonGlow var(--d,8s) ease-in-out var(--dl,0s) infinite}
@keyframes moonGlow{0%,100%{opacity:.1;transform:scale(1)}50%{opacity:.25;transform:scale(1.2)}}

/* ===== HEADER ===== */
.header{position:absolute;top:0;left:0;right:0;padding:max(env(safe-area-inset-top),12px) 14px 8px;display:flex;align-items:center;justify-content:space-between;z-index:20}
.creature-name{font-family: var(--font2);font-weight: 700;font-size: 14px;color: var(--text);background: #0c0b1ee0;padding: 3px;border-radius: 15px;}
.header-right{display:flex;align-items:center;gap:6px}
.coins-badge{background:#0c0b1ee0;border:.5px solid rgba(255,210,80,.25);border-radius:20px;padding:3px 8px;font-size:10px;color:#ffd250;font-family:var(--font2);font-weight:700}
.day-pill{background:#0c0b1ee0;border:.5px solid var(--border);border-radius:20px;padding:3px 9px;font-size:10px;color:var(--text2)}
.menu-btn{width:30px;height:30px;background:#0c0b1ee0;border:.5px solid var(--border);border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--text2)}

/* ===== TRAITS ===== */
.traits-row{position:absolute;top:46px;left:0;right:0;display:flex;justify-content:center;gap:4px;padding:0 12px;z-index:20;flex-wrap:wrap}
.trait-chip{display:flex;align-items:center;gap:3px;background:#0c0b1ee0;border:.5px solid var(--border);border-radius:20px;padding:2px 7px;font-size:9px;color:var(--text2);transition:all .5s}
.trait-chip.hot{background:rgba(184,168,255,.1);border-color:rgba(184,168,255,.25);color:var(--accent)}
.trait-val{font-size:8px;opacity:.6;margin-left:1px}

/* Event notif zone */
.event-notif-zone{position:absolute;top:74px;left:0;right:0;display:flex;justify-content:center;gap:5px;flex-wrap:wrap;padding:0 12px;z-index:19;pointer-events:none}
.event-notif{background:rgba(255,255,255,.88);color:#1a1640;padding:3px 10px;border-radius:20px;font-size:10px;font-family:var(--font2);font-weight:600;animation:notifIn .3s cubic-bezier(.34,1.56,.64,1) both;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.event-notif.out{animation:notifOut .3s ease both}

/* ===== AURA ===== */
.aura{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:-1;animation:auraBreath 4s ease-in-out infinite;transition:background 2s,width 1s,height 1s}
@keyframes auraBreath{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:.85;transform:translate(-50%,-50%) scale(1.08)}}

/* ===== CREATURE ===== */
.creature-zone{position:absolute;inset:0;z-index:5}
.creature-body{position:absolute;cursor:pointer;user-select:none;touch-action:none;will-change:transform;overflow:visible}
.creature-body .eye{position:absolute;background:#111;border-radius:50%;transition:height .4s,top .4s,width .4s,border-radius .4s,left .3s}
.eye::after{content:'';position:absolute;width:28%;height:28%;background:rgba(255,255,255,.7);border-radius:50%;top:14%;left:14%}

/* Accessories on creature */
.creature-acc{position:absolute;font-size:16px;pointer-events:none;z-index:3;line-height:1}
.acc-hat{bottom:calc(100% - 4px);left:50%;transform:translateX(-50%)}
.acc-face{top:38%;left:50%;transform:translateX(-50%)}
.acc-aura-custom{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:-2;opacity:.35}

/* ===== ZZZ ===== */
.zzz{position:absolute;font-size:13px;color:#cfd3ff;pointer-events:none;display:none;z-index:8;animation:floatZ 3.5s ease-out infinite}
.sleeping .zzz{display:block}
@keyframes floatZ{0%{opacity:0;transform:translateY(0)}25%{opacity:.8}100%{opacity:0;transform:translateY(-30px)}}

/* ===== EVENTS ===== */
.event-obj{position:absolute;font-size:22px;cursor:pointer;z-index:15;user-select:none;animation:eventIn .4s cubic-bezier(.34,1.56,.64,1) forwards;filter:drop-shadow(0 0 8px rgba(255,255,255,.3))}
@keyframes eventIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.event-obj.expiring{animation:eventOut .6s ease forwards}
@keyframes eventOut{to{opacity:0;transform:scale(.6) translateY(-10px)}}

/* ===== BUBBLE ===== */
.bubble{position:absolute;z-index:25;background:rgba(255,255,255,.95);color:#1a1640;padding:6px 12px;border-radius:16px 16px 16px 4px;font-size:11px;font-family:var(--font2);font-weight:600;white-space:nowrap;pointer-events:none;box-shadow:0 4px 20px rgba(0,0,0,.3);transform-origin:bottom left;animation:bubbleIn .3s cubic-bezier(.34,1.56,.64,1) both}
@keyframes bubbleIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.bubble.out{animation:bubbleOut .3s ease both}
@keyframes bubbleOut{to{opacity:0;transform:scale(.8) translateY(-6px)}}

/* ===== ACTION BAR ===== */
.action-bar{position:absolute;left:0;right:0;display:flex;justify-content:center;gap:15px;padding:5px 10px;z-index:20;flex-wrap:nowrap;overflow-x:auto;background-color: rgba(12,11,30,.88);}
.action-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 8px;background:var(--surface);border:.5px solid var(--border);border-radius:11px;cursor:pointer;font-size:16px;transition:all .2s;min-width:46px;flex-shrink:0}
.action-btn span{font-size:8px;color:var(--text2)}
.action-btn:active{transform:scale(.93)}
.action-btn.used{opacity:.35;pointer-events:none}

/* ===== BOTTOM BAR ===== */
.bottom-bar{position:absolute;bottom:0;left:0;right:0;padding:9px 12px max(env(safe-area-inset-bottom),9px);background:rgba(12,11,30,.88);border-top:.5px solid var(--border);z-index:20;backdrop-filter:blur(10px)}
.archetype-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.arch-slot{height: 25px; border-radius: 12px; display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: 2px;  transition: all .5s;}
.arch-slot.locked{background:var(--surface);border:1px dashed rgba(255,255,255,.07)}
.arch-slot.unlocked{background:rgba(184,168,255,.08);border:1px solid rgba(184,168,255,.2);animation:slotReveal .6s cubic-bezier(.34,1.56,.64,1)}
@keyframes slotReveal{from{transform:scale(0);opacity:0}70%{transform:scale(1.08)}to{transform:scale(1);opacity:1}}
.arch-slot-emoji{font-size:17px;line-height:1}
.arch-slot-name{font-size:7px;color:var(--accent);text-align:center;line-height:1.2;padding:0 2px}
.arch-slot-lock{font-size:13px;opacity:.2}
.arch-slot-days{font-size:7px;color:var(--text2)}

/* ===== PANEL ===== */
.panel-overlay{position:absolute;inset:0;z-index:50;background:rgba(0,0,0,.5);display:none;opacity:0;transition:opacity .3s}
.panel-overlay.open{display:block;opacity:1}
.panel{position:absolute;right:0;top:0;bottom:0;width:75%;max-width:280px;background:var(--bg2);border-left:.5px solid var(--border);padding:48px 18px 28px;transform:translateX(100%);transition:transform .35s cubic-bezier(.25,.8,.25,1);overflow-y:auto}
.panel-overlay.open .panel{transform:translateX(0)}
.panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.panel-header span{font-family:var(--font2);font-weight:700;color:var(--text);font-size:14px}
.panel-close{font-size:16px;color:var(--text2);cursor:pointer;padding:4px}
.panel-section{margin-top:16px;padding-top:12px;border-top:.5px solid var(--border)}
.panel-section-title{font-size:11px;color:var(--text2);margin-bottom:8px;font-family:var(--font2)}
.panel-info{font-size:11px;color:var(--text2);margin-bottom:10px}
.full-trait{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.full-trait-label{font-size:10px;color:var(--text2);width:88px;flex-shrink:0}
.full-bar{flex:1;height:4px;background:rgba(255,255,255,.06);border-radius:10px;overflow:hidden}
.full-bar-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--accent),#7f7aed);transition:width .6s}
.full-val{font-size:9px;color:var(--text2);width:28px;text-align:right}

/* ===== MODALS ===== */
.modal-overlay{position:absolute;inset:0;z-index:60;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center}
.modal-overlay.hidden{display:none}
.modal{background:var(--bg2);border:.5px solid var(--border);border-radius:20px;padding:20px 18px;width:90%;max-width:300px;display:flex;flex-direction:column;align-items:center;gap:10px;max-height:88vh;overflow-y:auto}
.modal-title{font-family:var(--font2);font-weight:800;font-size:16px;color:var(--text)}
.modal-sub{font-size:11px;color:var(--text2);text-align:center}
.modal-coins{font-family:var(--font2);font-weight:700;font-size:13px;color:#ffd250}

/* Gift / Activity choices */
.gift-choices{display:flex;flex-direction:column;gap:7px;width:100%}
.gift-choice{padding:10px 13px;background:var(--surface);border:.5px solid var(--border);border-radius:12px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all .2s}
.gift-choice:active{transform:scale(.97);background:rgba(184,168,255,.1)}
.gift-choice.disabled{opacity:.35;pointer-events:none}
.gift-choice-emoji{font-size:18px}
.gift-choice-info{flex:1}
.gift-choice-name{font-size:12px;color:var(--text);font-family:var(--font2);font-weight:600}
.gift-choice-val{font-size:10px;color:var(--text2)}
.gift-choice-bonus{font-size:11px;color:#7ff0a0;font-weight:700;font-family:var(--font2)}
.gift-choice-cooldown{font-size:10px;color:rgba(255,180,80,.7);font-family:var(--font2)}

/* Activity progress ring */
.activity-progress-ring{position:relative;display:flex;align-items:center;justify-content:center}
.activity-timer{position:absolute;font-family:var(--font2);font-weight:800;font-size:22px;color:var(--text)}
.bubble-preview{font-size:20px;min-height:28px;animation:floatBobble 2s ease-in-out infinite}
@keyframes floatBobble{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* Shop */
.shop-items{width:100%;display:flex;flex-direction:column;gap:7px}
.shop-item{padding:11px 12px;background:var(--surface);border:.5px solid var(--border);border-radius:12px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all .2s}
.shop-item:active{transform:scale(.97)}
.shop-item-icon{font-size:22px}
.shop-item-info{flex:1}
.shop-item-name{font-size:12px;color:var(--text);font-family:var(--font2);font-weight:600}
.shop-item-desc{font-size:10px;color:var(--text2)}
.shop-item-price{font-size:12px;color:#ffd250;font-family:var(--font2);font-weight:700;white-space:nowrap}

/* Customize */
.customize-section-title{font-size:11px;color:var(--text2);align-self:flex-start;margin-top:6px;font-family:var(--font2)}
.customize-grid{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%}
.customize-item{width:52px;height:52px;background:var(--surface);border:1px solid var(--border);border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:22px;transition:all .2s}
.customize-item:active{transform:scale(.93)}
.customize-item.selected{background:rgba(184,168,255,.15);border-color:rgba(184,168,255,.5)}
.customize-item.none-item{font-size:12px;color:var(--text2)}

/* ===== FULLPAGE ===== */
.fullpage{position:absolute;inset:0;z-index:55;background:var(--bg);display:flex;flex-direction:column}
.fullpage.hidden{display:none}
.fullpage-header{display:flex;justify-content:space-between;align-items:center;padding:max(env(safe-area-inset-top),14px) 18px 12px;border-bottom:.5px solid var(--border);background:var(--bg2);flex-shrink:0}
.fullpage-title{font-family:var(--font2);font-weight:700;font-size:15px;color:var(--text)}
.fullpage-close{font-size:16px;color:var(--text2);cursor:pointer;padding:4px 8px}
.fullpage-scroll{flex:1;overflow-y:auto;padding:14px}

/* Archive */
.archive-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.archive-card{padding:13px 11px;border-radius:15px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;transition:all .3s}
.archive-card.unlocked{background:rgba(184,168,255,.07);border:.5px solid rgba(184,168,255,.2)}
.archive-card.locked{background:var(--surface);border:.5px solid var(--border);opacity:.45;filter:grayscale(.9)}
.archive-card-emoji{font-size:27px}
.archive-card-name{font-size:10px;color:var(--text);font-family:var(--font2);font-weight:700;line-height:1.3}
.archive-card-desc{font-size:9px;color:var(--text2);line-height:1.4}
.archive-card-lock{font-size:15px;opacity:.25}
.archive-card-day{font-size:9px;color:var(--text2)}

/* ===== MINI-JEU ===== */
.game-container{flex:1;position:relative;display:flex;align-items:stretch}
.game-screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;padding:18px}
.game-screen.hidden{display:none}
.game-title{font-family:var(--font2);font-weight:800;font-size:20px;color:var(--text)}
.game-sub{font-size:12px;color:var(--text2);text-align:center;line-height:1.7}
.game-hiscore{font-size:12px;color:#ffd250;font-family:var(--font2)}
.game-plays-left{font-size:11px;color:var(--text2)}
.countdown-number{font-family:var(--font2);font-weight:800;font-size:72px;color:var(--accent);animation:countPop .4s cubic-bezier(.34,1.56,.64,1) both}
@keyframes countPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
.game-hud{position:absolute;top:8px;left:0;right:0;display:flex;justify-content:space-between;padding:0 14px;font-family:var(--font2);font-weight:700;font-size:14px;color:var(--text);z-index:2}
.game-field{position:absolute;inset:34px 0 0;overflow:hidden;touch-action:none}
.player-creature{position:absolute;bottom:10px;width:50px;height:50px;border-radius:50%;transition:left .06s linear}
.falling-item{position:absolute;font-size:22px;user-select:none;pointer-events:none}
.game-final-score{font-family:var(--font2);font-weight:800;font-size:36px;color:var(--accent)}
.game-reward{font-size:14px;color:#ffd250;font-family:var(--font2);font-weight:700}
.game-leaderboard{width:100%;max-width:260px;background:var(--surface);border:.5px solid var(--border);border-radius:12px;padding:9px 13px}
.lb-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:11px;color:var(--text2);border-bottom:.5px solid var(--border);font-family:var(--font2)}
.lb-row:last-child{border-bottom:none}
.lb-rank{color:var(--accent);font-weight:700;width:20px}
.lb-name{flex:1}
.lb-score{color:var(--text);font-weight:600}

/* ===== REVEAL ===== */
.reveal-screen{position:absolute;inset:0;z-index:80;background:rgba(12,11,30,.96);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;opacity:0;pointer-events:none;transition:opacity .6s}
.reveal-screen.show{opacity:1;pointer-events:all}
.reveal-emoji{font-size:56px;animation:revealPop 1s .3s both}
@keyframes revealPop{from{transform:scale(0) rotate(-20deg);opacity:0}70%{transform:scale(1.15) rotate(3deg)}to{transform:scale(1);opacity:1}}
.reveal-name{font-family:var(--font2);font-weight:800;font-size:22px;color:var(--text)}
.reveal-desc{font-size:12px;color:var(--text2);text-align:center;max-width:230px;line-height:1.7}
.reveal-sparkles{font-size:20px;letter-spacing:6px}

/* ===== NOTIFS ===== */
.notif-stack{position:absolute;top:82px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:5px;z-index:30;pointer-events:none;align-items:center}
.notif{background:rgba(255,255,255,.92);color:#1a1640;padding:6px 13px;border-radius:20px;font-size:11px;font-family:var(--font2);font-weight:600;box-shadow:0 3px 14px rgba(0,0,0,.2);animation:notifIn .4s cubic-bezier(.34,1.56,.64,1) both;white-space:nowrap}
@keyframes notifIn{from{transform:scale(0) translateY(-10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.notif.out{animation:notifOut .3s ease both}
@keyframes notifOut{to{opacity:0;transform:translateY(-8px)}}

.hidden{display:none!important}