/* =========================================================
   Silly Han Jump — visual system
   Logical canvas: 1535 × 2732 (the exact size of the supplied art)
   ========================================================= */
:root{
  --cream:#fff7e6;
  --cream-deep:#fff0d5;
  --milk:#fffdf7;
  --rose:#ca8e7e;
  --rose-strong:#b87463;
  --rose-soft:#f3c9c2;
  --rose-pale:#ffe3de;
  --brown:#6b473a;
  --brown-deep:#543327;
  --brown-soft:#8b6253;
  --mint:#b9e2d4;
  --shadow:rgba(112, 76, 59, .18);
  --font-body:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Noto Sans SC",sans-serif;
  --font-display:"Arial Rounded MT Bold","STHupo","YouYuan","Microsoft YaHei",sans-serif;
  --font-num:"Segoe UI Black","Arial Black","Arial Rounded MT Bold","Trebuchet MS","Microsoft YaHei",sans-serif;
}

*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; width:100%; height:100%;
  overflow:hidden; background:#fff;
  -webkit-tap-highlight-color:transparent;
  font-family:var(--font-body);
}
button,input{font-family:inherit;}
button{border:0;margin:0;padding:0;background:none;color:inherit;cursor:pointer;}
img{-webkit-user-drag:none;}
.hidden{display:none !important;}

#app{
  position:fixed; inset:0; background:#fff; overflow:hidden;
}
#stage{
  position:absolute; left:50%; top:50%;
  width:1535px; height:2732px;
  transform:translate(-50%,-50%) scale(.25);
  transform-origin:center center;
  overflow:hidden; background:#fff;
  box-shadow:0 0 90px rgba(90,63,50,.10);
  user-select:none; -webkit-user-select:none;
  -webkit-touch-callout:none;
  isolation:isolate;
}
.screen{position:absolute; inset:0; display:none;}
.screen.active{display:block; animation:screenFade .24s ease both;}
@keyframes screenFade{from{opacity:.55;}to{opacity:1;}}

.screen-bg{
  position:absolute; inset:0; width:1535px; height:2732px;
  object-fit:fill; display:block; pointer-events:none;
}

/* ---------- invisible, screen-matched touch targets ---------- */
.hotspot{
  position:absolute; z-index:20; display:block;
  border-radius:999px; background:transparent; outline:none;
  transition:background .12s ease, box-shadow .12s ease;
  touch-action:manipulation;
}
.hotspot:hover{background:rgba(255,255,244,.08);}
.hotspot:active{
  background:rgba(255,248,229,.18);
  box-shadow:inset 0 0 70px rgba(255,255,240,.40);
}
.hotspot:focus-visible{outline:4px solid rgba(183,116,99,.65); outline-offset:2px;}

/* =========================================================
   HOME
   ========================================================= */
#hsHomePlay{left:548px; top:1468px; width:438px; height:392px; border-radius:88px;}
#hsHomeBoard{left:126px; top:2366px; width:582px; height:258px;}
#hsHomeShop{left:824px; top:2366px; width:594px; height:258px;}

#homeBadge{
  position:absolute; z-index:22; top:142px; right:76px;
  display:flex; align-items:center; gap:14px;
  min-width:190px; max-width:470px; height:82px; padding:0 28px;
  border:3px solid rgba(204,150,132,.55);
  border-radius:46px;
  background:linear-gradient(180deg,rgba(255,252,241,.96),rgba(255,245,226,.93));
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.65), 0 8px 22px rgba(96,63,49,.10);
  color:#815c4b; font-size:30px; letter-spacing:.5px;
  cursor:pointer; text-align:left;
}
#homeBadge .dot{
  width:14px;height:14px;flex:0 0 14px;border-radius:50%;
  background:#eea5a4; box-shadow:0 0 0 5px rgba(238,165,164,.20);
}
#homeBadge .nick{
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  max-width:330px;
}
#homeBadge .chev{opacity:.55; font-size:22px; margin-left:auto;}
#homeBadge:active{transform:scale(.98);}

/* =========================================================
   BOOT + NICKNAME GATE + GENERIC DIALOGS
   ========================================================= */
.overlay-layer{
  position:absolute; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
}
.modal-shade{
  position:absolute; inset:0;
  /* A soft cream veil. Deliberately no backdrop-filter: it keeps the
     warm paper texture crisp and avoids mirrored sampling artifacts
     when the whole 1535px stage is scaled down inside a transformed box. */
  background:
    radial-gradient(circle at 50% 34%, rgba(255,251,241,.36) 0%, rgba(255,247,232,.76) 56%, rgba(255,244,227,.88) 100%);
}
.dialog{
  position:relative; z-index:2;
  width:1040px; max-width:88%;
  padding:58px 64px 54px;
  border-radius:64px;
  border:4px solid #d5a798;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.95), transparent 45%),
    linear-gradient(180deg,#fffaf0 0%,#fff3de 100%);
  box-shadow:
    inset 0 0 0 7px rgba(255,255,255,.8),
    inset 0 0 0 12px rgba(216,167,150,.22),
    0 34px 100px rgba(84,54,41,.26);
  color:var(--brown);
  text-align:center;
  animation:dialogIn .28s cubic-bezier(.22,1.2,.36,1) both;
}
.dialog::before{
  content:""; position:absolute; inset:24px; border-radius:48px;
  border:2px solid rgba(220,174,159,.32); pointer-events:none;
}
.dialog::after{
  content:""; position:absolute; left:12%; right:12%; top:0; height:12px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);
  border-radius:999px; pointer-events:none;
}
@keyframes dialogIn{
  from{opacity:0; transform:translateY(26px) scale(.96);}
  to{opacity:1; transform:translateY(0) scale(1);}
}
.dialog .berry{
  width:92px; height:78px; object-fit:contain; display:block; margin:0 auto 6px;
  filter:drop-shadow(0 8px 8px rgba(142,86,77,.15));
}
.dialog .eyebrow{
  margin:0 0 8px; font-family:var(--font-display); font-weight:900;
  letter-spacing:4px; color:#b98070; font-size:24px;
}
.dialog h1,.dialog h2{margin:0; font-family:var(--font-display); color:var(--brown-deep);}
.dialog h1{font-size:78px; letter-spacing:-1px; line-height:1.15;}
.dialog h2{font-size:58px; line-height:1.25;}
.dialog .sub{
  margin:20px auto 0; max-width:800px;
  font-size:35px; line-height:1.62; color:#8a6a5a;
}
.dialog .tiny-note{font-size:24px; color:#ae8e7e; line-height:1.5;}

.gate-card{width:1050px;}
.gate-avatar{
  width:250px; height:250px; margin:-6px auto 14px;
  display:flex; align-items:flex-end; justify-content:center;
  border-radius:50%;
  background:radial-gradient(circle at 50% 36%,#fffdf5,#ffefd7 70%);
  border:3px solid rgba(216,165,148,.48);
  box-shadow:inset 0 0 0 8px rgba(255,255,255,.65);
  overflow:hidden;
}
.gate-avatar img{height:245px; width:auto; max-width:225px; object-fit:contain; transform:translateY(6px);}
.gate-form{margin-top:32px;}
.field-pill{
  position:relative; display:flex; align-items:center;
  width:100%; height:158px; padding:0 42px;
  border:3px solid #d6a99a; border-radius:80px;
  background:linear-gradient(180deg,#fffef8,#fff7e5);
  box-shadow:inset 0 5px 14px rgba(165,120,102,.11), 0 3px 0 rgba(255,255,255,.8);
  transition:box-shadow .2s ease, border-color .2s ease;
}
.field-pill:focus-within{
  border-color:#c17f6c;
  box-shadow:inset 0 5px 14px rgba(165,120,102,.10), 0 0 0 8px rgba(247,196,189,.30);
}
.field-pill input{
  width:100%; height:100%; border:0; outline:0; background:transparent;
  color:#6b4235; font-size:46px; font-weight:700; text-align:center;
  letter-spacing:2px;
}
.field-pill input::placeholder{color:#c0a18f; font-weight:400; font-size:36px;}
.field-pill .input-berry{width:52px; height:44px; opacity:.55; object-fit:contain; flex:none;}
.field-error{
  min-height:37px; margin:12px 0 0; color:#b94f4e;
  font-size:27px; line-height:1.35; letter-spacing:.2px;
}
.field-error.shake{animation:formShake .32s ease;}
@keyframes formShake{
  0%,100%{transform:translateX(0);}25%{transform:translateX(-7px);}55%{transform:translateX(6px);}80%{transform:translateX(-3px);}
}
.dialog-actions{
  display:flex; gap:26px; justify-content:center; flex-wrap:wrap;
  margin-top:28px;
}
.pill-btn{
  position:relative; min-width:330px; height:164px; padding:0 46px;
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  border-radius:86px; border:3px solid #d6a798;
  color:#704638; font-size:40px; font-weight:800; letter-spacing:1px;
  background:linear-gradient(180deg,#fffdf5 0%,#fff1d7 100%);
  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,.78),
    0 8px 0 #d0a18e,
    0 15px 26px rgba(114,79,64,.16);
  transition:transform .1s ease, box-shadow .1s ease, filter .15s ease;
  touch-action:manipulation;
}
.pill-btn:hover{filter:brightness(1.02);}
.pill-btn:active{
  transform:translateY(7px);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.7),0 2px 0 #d0a18e,0 6px 13px rgba(114,79,64,.12);
}
.pill-btn.primary{
  color:#87443f;
  border-color:#d3998c;
  background:linear-gradient(180deg,#ffe9dc 0%,#ffd7d1 100%);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.55),0 8px 0 #cc9a89,0 15px 26px rgba(114,79,64,.17);
}
.pill-btn.ghost{
  background:rgba(255,251,240,.55);
  color:#936b5b;
  border-color:rgba(207,160,143,.66);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.62),0 6px 0 rgba(204,159,142,.55);
}
.pill-btn:disabled{opacity:.55; filter:saturate(.7); pointer-events:none;}
.text-link{
  display:inline-block; margin-top:19px; padding:8px 18px;
  color:#a17767; font-size:26px; text-decoration:underline;
  text-decoration-color:rgba(161,119,103,.4); text-underline-offset:6px;
}
.text-link:hover{color:#7f5748;}

/* boot screen */
#boot{
  z-index:220; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 50% 26%, rgba(255,255,255,.62), transparent 34%),
    linear-gradient(180deg,#ccebe0 0%,#e7f4e8 48%,#fff7e6 100%);
}
#boot .boot-title{
  font-family:var(--font-display); font-weight:900; font-size:76px; letter-spacing:-1px;
  color:#765346; text-shadow:0 4px 0 rgba(255,255,255,.7);
}
#boot .boot-sub{margin-top:18px; color:#8e6c5c; font-size:30px; letter-spacing:3px;}
.boot-choco{
  width:216px; height:76px; margin-top:52px; border-radius:24px;
  background:repeating-linear-gradient(90deg,#7b4a34 0 32px,#9a6449 32px 35px,#7b4a34 35px 68px);
  border:5px solid #85543d;
  box-shadow:inset 0 0 0 5px rgba(255,230,205,.18),0 18px 30px rgba(104,71,52,.15);
  position:relative; overflow:hidden;
}
.boot-choco::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent 0 20%,rgba(255,255,255,.16) 32%,transparent 45%);
  animation:sweep 1.2s linear infinite;
}
@keyframes sweep{from{transform:translateX(-100%);}to{transform:translateX(100%);}}
#boot .boot-copy{margin-top:26px; font-size:24px; color:#a18473; letter-spacing:2px;}

/* toast */
#toast{
  position:absolute; left:50%; bottom:156px; z-index:520;
  transform:translate(-50%,22px);
  max-width:1050px; padding:27px 46px;
  border-radius:52px; border:3px solid rgba(208,155,138,.62);
  background:linear-gradient(180deg,rgba(255,252,242,.97),rgba(255,241,218,.97));
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.7),0 14px 34px rgba(93,63,48,.16);
  color:#704a3c; font-size:34px; line-height:1.4; text-align:center;
  opacity:0; pointer-events:none;
  transition:opacity .24s ease, transform .24s cubic-bezier(.2,.9,.3,1);
}
#toast.show{opacity:1; transform:translate(-50%,0);}

/* =========================================================
   WARDROBE
   ========================================================= */
.wchar{
  position:absolute; z-index:4; height:auto; pointer-events:none;
  transform-origin:center bottom;
  filter:drop-shadow(0 15px 12px rgba(122,77,61,.10));
  transition:filter .25s ease, transform .25s cubic-bezier(.2,1.1,.3,1);
}
.wchar.selected{
  filter:
    drop-shadow(0 0 24px rgba(255,176,179,.85))
    drop-shadow(0 0 48px rgba(255,208,210,.60))
    drop-shadow(0 17px 13px rgba(122,77,61,.12));
  animation:charBreath 2.8s ease-in-out infinite;
}
@keyframes charBreath{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-5px) scale(1.012);}
}
.wchar.pop{animation:charPop .45s cubic-bezier(.2,1.3,.4,1);}
@keyframes charPop{
  0%{transform:scale(1);}
  38%{transform:scale(1.07,.93) translateY(4px);}
  70%{transform:scale(.97,1.04) translateY(-8px);}
  100%{transform:scale(1);}
}
#wcGirl{left:343px; top:768px; height:420px;}
#wcGlasses{left:903px; top:752px; height:440px;}
#wcEarmuff{left:335px; top:1333px; height:410px;}
#wcCowboy{left:941px; top:1318px; height:425px;}

.wcard-hit{position:absolute; z-index:8; border-radius:40px;}
#wcHitGirl{left:300px; top:750px; width:392px; height:440px;}
#wcHitGlasses{left:884px; top:728px; width:366px; height:460px;}
#wcHitEarmuff{left:302px; top:1316px; width:424px; height:438px;}
#wcHitCowboy{left:908px; top:1306px; width:366px; height:444px;}

#hsWearGirl{left:286px; top:1190px; width:432px; height:142px;}
#hsWearGlasses{left:871px; top:1190px; width:432px; height:142px;}
#hsWearEarmuff{left:286px; top:1744px; width:432px; height:144px;}
#hsWearCowboy{left:871px; top:1744px; width:432px; height:144px;}
#hsWardrobeBack{left:79px; top:176px; width:196px; height:208px;}
#hsWardrobeConfirm{left:553px; top:2228px; width:434px; height:154px;}
.base-outfit-btn{
  position:absolute; z-index:26; left:50%; top:2392px;
  transform:translateX(-50%);
  min-width:382px; height:138px; padding:0 34px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid rgba(203,157,139,.42);
  border-radius:70px;
  background:rgba(255,250,240,.55);
  color:#ac8371; font-size:28px; letter-spacing:.5px;
  text-decoration:none; cursor:pointer; touch-action:manipulation;
  transition:background .15s ease, color .15s ease, transform .1s ease;
}
.base-outfit-btn:hover{background:rgba(255,252,244,.8); color:#916a58;}
.base-outfit-btn:active{transform:translateX(-50%) scale(.97);}
.base-outfit-btn.current{
  color:#ba6d65; background:rgba(255,227,221,.48);
  border-color:rgba(202,140,129,.5);
  pointer-events:none;
}

.wear-check{
  position:absolute; z-index:25; width:62px; height:62px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff9ed; font-size:36px; font-weight:900; line-height:1;
  background:linear-gradient(180deg,#eaa5a0,#d6837e);
  border:3px solid rgba(255,250,238,.9);
  box-shadow:0 8px 18px rgba(146,83,74,.23), inset 0 0 0 2px rgba(255,255,255,.25);
  pointer-events:none;
  animation:checkIn .25s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes checkIn{from{opacity:0;transform:scale(.4) rotate(-20deg);}to{opacity:1;transform:scale(1) rotate(0);}}
#checkGirl{left:620px; top:790px;}
#checkGlasses{left:1204px; top:778px;}
#checkEarmuff{left:650px; top:1356px;}
#checkCowboy{left:1214px; top:1350px;}

/* =========================================================
   TEAM / LEADERBOARD
   ========================================================= */
#teamBg{transition:opacity .18s ease;}
.rank-tabs{
  position:absolute; z-index:27; left:50%; top:136px;
  transform:translateX(-50%);
  width:542px; height:112px; padding:8px;
  display:flex; gap:8px;
  border-radius:62px;
  border:3px solid rgba(207,158,142,.58);
  background:linear-gradient(180deg,rgba(255,252,244,.93),rgba(255,240,219,.88));
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.56),
    0 12px 28px rgba(96,63,49,.11);
}
.rank-tab{
  flex:1 1 0; min-width:0; border-radius:48px;
  color:#a37d6b; font-size:31px; font-weight:700; letter-spacing:1px;
  display:flex; align-items:center; justify-content:center;
  transition:background .16s ease, color .16s ease, box-shadow .16s ease;
  touch-action:manipulation;
}
.rank-tab:hover{color:#876150; background:rgba(255,250,237,.5);}
.rank-tab.is-active{
  color:#a55650;
  background:linear-gradient(180deg,#ffe9df 0%,#ffd7d0 100%);
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.58),
    0 5px 0 rgba(201,147,132,.52);
}
.rank-self{
  position:absolute; z-index:26; left:50%; top:2064px;
  transform:translateX(-50%);
  max-width:1280px;
  min-height:82px; padding:18px 34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50px;
  border:2px solid rgba(204,157,140,.42);
  background:rgba(255,250,239,.72);
  color:#96705f; font-size:28px; letter-spacing:.4px; white-space:nowrap;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.45);
  pointer-events:none;
  overflow:hidden; text-overflow:ellipsis;
}
.rank-self b{color:#b8615d; font-family:var(--font-num); font-weight:900;}

.national-board{
  position:absolute; z-index:24; left:280px; top:670px;
  width:978px; height:1320px;
  display:flex; flex-direction:column;
  border:3px solid rgba(214,166,148,.62);
  border-radius:38px;
  background:linear-gradient(180deg,#fffaf0 0%,#fff3dc 100%);
  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,.72),
    inset 0 0 0 9px rgba(218,172,154,.16),
    0 14px 36px rgba(107,71,55,.10);
  overflow:hidden;
}
.national-board-head{
  flex:0 0 72px; padding:0 30px;
  display:flex; align-items:center; justify-content:space-between;
  color:#936b59; font-size:25px; font-weight:700; letter-spacing:1px;
  border-bottom:1px dashed rgba(198,151,134,.35);
}
.national-board-head .national-scroll-hint{
  color:#b99b89; font-size:21px; font-weight:400; letter-spacing:.5px;
}
.national-scroll{
  flex:1 1 auto; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  touch-action:pan-y; padding:6px 18px 18px;
  scrollbar-width:none;
}
.national-scroll::-webkit-scrollbar{width:0; height:0; display:none;}
.national-message{
  min-height:260px; display:flex; align-items:center; justify-content:center;
  color:#a27d6b; font-size:29px; line-height:1.6; text-align:center;
  padding:20px;
}
.national-row{
  height:112px; margin:9px 8px;
  display:flex; align-items:center;
  border:2px solid rgba(216,169,151,.40);
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,253,246,.86),rgba(255,244,225,.78));
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.55);
}
.national-row:last-child{margin-bottom:8px;}
.national-row.mine{
  border-color:rgba(205,137,129,.62);
  background:linear-gradient(180deg,rgba(255,237,231,.96),rgba(255,220,214,.88));
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.52),0 0 18px rgba(242,165,164,.22);
}
.national-rank{
  flex:0 0 88px; text-align:center;
  font-family:var(--font-num); font-size:48px; font-weight:900; color:#544034;
}
.national-row.mine .national-rank{color:#bc605c;}
.national-name{
  flex:1 1 auto; min-width:0; padding:0 8px;
  font-size:38px; font-weight:700; color:#6b493c;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.national-name .nickname-label{font-size:30px; font-weight:500; color:#a78370;}
.national-row.mine .national-name{color:#b65f5b;}
.national-row.mine .national-name .nickname-label{color:#c18b83;}
.national-score{
  flex:0 0 138px; text-align:right; padding-right:18px;
  font-family:var(--font-num); font-size:50px; font-weight:900; color:#5b3a2c;
}
.national-row.mine .national-score{color:#b45450;}
.team-common-back{left:79px; top:176px; width:196px; height:208px;}
.team-bottom-exit{left:196px; top:2228px; width:518px; height:198px;}
.team-bottom-join{left:820px; top:2228px; width:518px; height:198px;}

#rankOverlay{position:absolute; inset:0; z-index:6; pointer-events:none;}
.team-status{
  display:none;
}
#rankRows{position:absolute; inset:0; pointer-events:none;}
.rank-slot{
  position:absolute; left:322px; width:892px; height:120px;
  display:flex; align-items:center; transform:translateY(-50%);
  color:#624135; font-family:var(--font-display);
  pointer-events:none;
}
.rank-index{
  width:138px; flex:0 0 138px; text-align:center;
  font-family:var(--font-num);
  font-size:66px; font-weight:900; color:#503126;
  text-shadow:0 2px 0 rgba(255,255,255,.5);
}
.rank-code{
  flex:1 1 auto; text-align:center; font-family:var(--font-body);
  font-size:47px; font-weight:700; letter-spacing:.4px; color:#725044;
  white-space:nowrap; min-width:0;
}
.rank-code .code-num{font-family:var(--font-num); font-weight:900; letter-spacing:1px;}
.rank-slot.nickname-row .rank-code{
  font-size:42px; overflow:hidden; text-overflow:ellipsis;
  padding:0 8px;
}
.rank-slot.nickname-row .rank-code .nickname-label{
  font-size:35px; color:#9f7a66; font-weight:500;
}
.rank-slot.nickname-row.mine .rank-code .nickname-label{color:#c28780;}
.rank-slot.nickname-row .rank-code .nickname-value{
  font-weight:800; color:#664338;
}
.rank-slot.nickname-row.mine .rank-code .nickname-value{color:#b45e5b;}
.rank-score{
  width:182px; flex:0 0 182px; text-align:right; padding-right:24px;
  font-family:var(--font-num);
  font-size:60px; font-weight:900; color:#513025;
  text-shadow:0 2px 0 rgba(255,255,255,.45);
}
.rank-slot.mine .rank-index,
.rank-slot.mine .rank-code,
.rank-slot.mine .rank-score{color:#b45e5b;}
.rank-slot.mine .rank-code{text-shadow:0 0 18px rgba(246,173,175,.55);}
.rank-slot.mine .rank-index::after{
  content:"♡"; display:block; margin-top:-10px; font-size:20px; color:#e6a09f;
}
.rank-slot.empty{
  justify-content:center; font-family:var(--font-body);
  color:#b59d89; font-size:33px; letter-spacing:1px; pointer-events:auto;
  cursor:pointer; gap:14px;
}
.rank-slot.empty .soft-heart{color:#e4b1ac; font-size:38px;}
.rank-slot.empty:hover{color:#9b7b68;}

.team-center{position:absolute; z-index:9; display:none;}
.team-center.active{display:block;}
#teamCenterJoin{left:492px; top:1068px; width:540px; height:206px;}
#teamCenterInvite{left:492px; top:1384px; width:540px; height:206px;}

.team-panel{position:absolute; inset:0; z-index:10; display:none; pointer-events:none;}
.team-panel.active{display:block;}
.join-input,.invite-code-display{
  position:absolute; left:392px; top:1224px; width:752px; height:146px;
  border:0; outline:0; background:transparent; text-align:center;
  color:#6e4638; font-family:var(--font-num);
  font-size:58px; font-weight:900; letter-spacing:10px;
  pointer-events:auto; padding:0 44px 2px;
}
.join-input::placeholder{
  color:#cbb19d; font-family:var(--font-body); font-size:32px;
  font-weight:400; letter-spacing:1px;
}
.join-input:focus{outline:none;}
.invite-code-display{
  display:flex; align-items:center; justify-content:center; gap:24px;
  cursor:pointer;
}
.invite-code-display .invite-copy{
  font-family:var(--font-body); font-size:21px; font-weight:500;
  letter-spacing:1px; color:#b08b78; padding:7px 13px;
  border:2px solid rgba(200,154,136,.45); border-radius:22px;
  opacity:.75;
}
.team-helper{
  position:absolute; left:0; top:1498px; width:100%; text-align:center;
  color:#a98370; font-size:25px; letter-spacing:.5px; pointer-events:none;
  opacity:.9;
}
.team-helper b{color:#ba6f69; font-weight:700;}
.join-error{
  position:absolute; left:0; top:1555px; width:100%; text-align:center;
  color:#bd5655; font-size:26px; min-height:30px; pointer-events:none;
}
#joinCodeInput.shake{animation:formShake .32s ease;}

/* =========================================================
   GAME SCREEN
   ========================================================= */
#gameTouch{position:absolute; inset:0; z-index:4; touch-action:none; -webkit-user-select:none;}
#gameCanvas{position:absolute; inset:0; width:1535px; height:2732px; z-index:3; pointer-events:none;}
#gameHud{position:absolute; inset:0; z-index:12; pointer-events:none;}

#scoreWrap{
  position:absolute; left:100px; top:238px;
  min-width:240px; height:190px;
  display:flex; align-items:flex-start;
  pointer-events:none;
}
#scoreValue{
  color:#5b3a2c;
  font-family:var(--font-num);
  font-size:176px; line-height:.95; font-weight:900; letter-spacing:-2px;
  text-shadow:2px 4px 0 rgba(255,249,235,.55),0 14px 34px rgba(105,72,57,.10);
  transform-origin:left bottom;
}
#scoreValue.bump{animation:scoreBump .36s cubic-bezier(.2,1.5,.4,1);}
@keyframes scoreBump{
  0%{transform:scale(1);}42%{transform:scale(1.20);}100%{transform:scale(1);}
}
#bestChip{
  margin-left:20px; margin-top:96px;
  color:#7c5b4b; font-size:22px; letter-spacing:1px;
  opacity:.7; pointer-events:none;
}

#chargeGauge{
  position:absolute; left:1326px; top:752px;
  width:122px; height:568px;
  border-radius:34px;
  z-index:13; pointer-events:none; overflow:hidden;
  border:5px solid rgba(91,53,39,.34);
  background:
    repeating-linear-gradient(180deg,rgba(255,239,221,.15) 0 4px,transparent 4px 78px),
    linear-gradient(90deg,#553225 0%,#8f5c45 22%,#af7c62 48%,#7a4936 77%,#4f2e23 100%);
  box-shadow:
    inset 0 0 0 6px rgba(255,236,214,.17),
    inset 0 0 26px rgba(49,26,20,.45),
    0 17px 34px rgba(99,65,50,.18);
}
#chargeGauge::after{
  content:""; position:absolute; left:8px; right:8px; top:8px; bottom:8px;
  border-radius:26px; border:2px solid rgba(255,240,220,.16);
  background:repeating-linear-gradient(180deg,transparent 0 76px,rgba(41,22,17,.38) 76px 85px);
  pointer-events:none;
}
#chargeFill{
  position:absolute; z-index:1; left:10px; right:10px; bottom:10px;
  height:0%; max-height:calc(100% - 20px);
  border-radius:26px;
  background:
    radial-gradient(circle at 35% 16%,rgba(255,255,255,.85),transparent 22%),
    linear-gradient(180deg,#ffe7d2 0%,#ffc4c6 42%,#ef9ca6 78%,#dc858f 100%);
  box-shadow:inset 0 0 18px rgba(255,255,255,.65),0 0 22px rgba(255,208,205,.30);
  transition:height .05s linear;
}
#chargeFill::after{
  content:""; position:absolute; left:10px; top:10px; width:12px; bottom:18px;
  border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.60),rgba(255,255,255,0));
  opacity:.55;
}
#chargeGauge.maxed{animation:gaugePulse .45s ease-in-out infinite alternate;}
@keyframes gaugePulse{
  from{box-shadow:inset 0 0 0 6px rgba(255,236,214,.17),inset 0 0 26px rgba(49,26,20,.45),0 17px 34px rgba(99,65,50,.15);}
  to{box-shadow:inset 0 0 0 6px rgba(255,238,218,.25),inset 0 0 26px rgba(49,26,20,.32),0 0 42px rgba(255,186,190,.72),0 17px 34px rgba(99,65,50,.15);}
}

#pauseBtn{
  position:absolute; left:78px; top:2432px;
  width:168px; height:168px; z-index:30; pointer-events:auto;
  border-radius:50%;
  border:4px solid rgba(185,132,114,.55);
  background:linear-gradient(180deg,rgba(255,253,244,.88),rgba(255,240,216,.82));
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.55),0 10px 24px rgba(113,78,62,.12);
  display:flex; align-items:center; justify-content:center;
  gap:16px; color:#a57464;
}
#pauseBtn span{display:block; width:16px;height:52px;border-radius:7px;background:#b88576;}
#pauseBtn:active{transform:scale(.94);}

#gameHint{
  position:absolute; left:50%; top:2258px; z-index:17;
  transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center; gap:18px;
  padding:27px 48px; border-radius:50px;
  border:3px solid rgba(202,151,133,.55);
  background:linear-gradient(180deg,rgba(255,252,244,.92),rgba(255,241,219,.88));
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.55),0 14px 32px rgba(102,69,53,.11);
  color:#7c5849; font-size:37px; letter-spacing:1px; white-space:nowrap;
  pointer-events:none; transition:opacity .4s ease, transform .4s ease;
}
#gameHint::before{content:"◉"; font-size:28px; color:#d9988b; opacity:.8;}
#gameHint.hide{opacity:0; transform:translate(-50%,22px);}

#perfectBadge{
  position:absolute; left:50%; top:1120px; z-index:18;
  transform:translate(-50%,10px) scale(.82);
  opacity:0; pointer-events:none; white-space:nowrap;
  font-family:var(--font-display); font-size:56px; font-weight:900;
  color:#b75d5f; letter-spacing:1px;
  text-shadow:0 3px 0 rgba(255,250,236,.82),0 12px 28px rgba(122,74,61,.16);
}
#perfectBadge.show{animation:perfectPop 1.15s ease both;}
@keyframes perfectPop{
  0%{opacity:0; transform:translate(-50%,24px) scale(.65) rotate(-5deg);}
  18%{opacity:1; transform:translate(-50%,-2px) scale(1.08) rotate(2deg);}
  32%{transform:translate(-50%,-4px) scale(1) rotate(0);}
  75%{opacity:1; transform:translate(-50%,-18px) scale(1);}
  100%{opacity:0; transform:translate(-50%,-55px) scale(.96);}
}

/* game over / pause dialogs */
#gameOverModal,#pauseModal{z-index:160;}
#gameOverModal .dialog{width:1020px; padding-top:44px;}
#gameOverModal .berry{width:86px;height:72px;margin-bottom:4px;}
#gameOverModal h2{font-size:50px; color:#7c5545; font-weight:700;}
#gameOverModal .score-big{
  margin:2px 0 -2px; font-family:var(--font-num);
  font-size:188px; line-height:1.03; font-weight:900; color:#5b3a2c;
  letter-spacing:-3px;
  text-shadow:0 4px 0 rgba(255,255,255,.65),0 18px 40px rgba(100,65,49,.12);
}
#gameOverModal .score-line{
  font-size:31px; line-height:1.45; color:#936c5a;
}
#gameOverModal .score-line b{color:#b45e5b; font-family:var(--font-num); font-size:36px;}
#gameOverModal .contribution{
  display:inline-block; margin-top:15px; padding:10px 24px;
  border-radius:24px; background:rgba(255,224,217,.6);
  color:#aa6a61; font-size:25px;
}
#gameOverModal .dialog-actions{margin-top:24px;}
#pauseModal .dialog{width:880px;}
#pauseModal h2{font-size:54px;}
#pauseModal .sub{margin-top:16px;}
#pauseModal .sound-row{
  margin:23px auto 0; display:flex; justify-content:center;
}
.sound-toggle{
  display:inline-flex; align-items:center; gap:14px;
  padding:14px 28px; border-radius:32px;
  border:2px solid rgba(203,157,139,.48);
  background:rgba(255,251,240,.55); color:#846252; font-size:27px;
}
.sound-toggle .sound-dot{
  width:16px;height:16px;border-radius:50%;background:#a8d8bf;
  box-shadow:0 0 0 4px rgba(168,216,191,.22);
}
.sound-toggle.muted .sound-dot{background:#d0b7a8;box-shadow:0 0 0 4px rgba(208,183,168,.18);}
#pauseModal .dialog-actions{margin-top:30px;}

/* very small tap feedback for game restart on mobile */
@media (hover:hover){
  .pill-btn:hover{transform:translateY(-2px);}
}