:root{
  --green:#0aa66e;
  --green-dark:#087a52;
  --orange:#ff8a3d;
  --orange-dark:#e06a1e;
  --bg:#f2f6f3;
  --panel:#ffffff;
  --ink:#1e2b26;
  --sub:#6b7a74;
  --line:#dfe8e2;
  --danger:#e5484d;
  --gold:#f5b301;
  --radius:16px;
  --shadow:0 4px 14px rgba(20,40,30,.08);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:"Hiragino Sans","Yu Gothic UI","Segoe UI",sans-serif;
  background:linear-gradient(180deg,#eaf5ee,#f2f6f3 200px);
  color:var(--ink);
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  overscroll-behavior:none;
}

#app{
  max-width:720px;
  margin:0 auto;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding-bottom:24px;
}

/* ===== Header ===== */
.topbar{
  position:sticky; top:0; z-index:40;
  background:linear-gradient(135deg,var(--green),var(--green-dark));
  color:#fff;
  padding:10px 14px;
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
  box-shadow:var(--shadow);
}
.brand{font-size:15px; font-weight:800; letter-spacing:.5px; display:flex; align-items:center; gap:6px;}
.brand span{font-size:13px;}
.brand b{color:var(--gold);}
.stats-mini{display:flex; align-items:center; gap:10px; margin-left:auto;}
.money-display{
  font-size:18px; font-weight:800; background:rgba(255,255,255,.15);
  padding:5px 12px; border-radius:999px; white-space:nowrap;
}
.rep-display{
  font-size:13px; font-weight:700; background:rgba(255,255,255,.15);
  padding:5px 10px; border-radius:999px; color:var(--gold);
}
.view-tabs{display:flex; gap:6px; width:100%;}
.tab-btn{
  flex:1; padding:9px 10px; border-radius:10px; border:none;
  background:rgba(255,255,255,.12); color:#fff; font-weight:700; font-size:14px;
  cursor:pointer; transition:background .15s;
}
.tab-btn.active{background:#fff; color:var(--green-dark);}
.help-btn{
  flex:0 0 auto; width:38px; padding:0; border-radius:10px; border:none;
  background:rgba(255,255,255,.12); color:#fff; font-weight:800; font-size:15px; cursor:pointer;
}

/* ===== Main / views ===== */
#main{flex:1; padding:14px;}
.view{display:none;}
.view.active{display:block;}

/* ---- Store floor (top-down view) ---- */
.floor-label{font-size:13px; font-weight:700; color:var(--sub); margin-bottom:6px;}
.store-floor{
  position:relative; display:flex; flex-direction:column;
  background:
    repeating-linear-gradient(0deg, #eef3ef, #eef3ef 38px, #e6ede8 38px, #e6ede8 40px),
    repeating-linear-gradient(90deg, #eef3ef, #eef3ef 38px, #e6ede8 38px, #e6ede8 40px);
  border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--line);
  overflow:hidden; margin-bottom:14px;
}

/* registers viewed from above, lined up along the back wall */
.floor-counters{
  display:flex; gap:8px; padding:10px;
  background:linear-gradient(180deg, #d3e6d9, rgba(211,230,217,0));
  border-bottom:2px dashed rgba(8,122,82,.18);
}
.lane{
  flex:1; min-width:0; background:var(--panel); border-radius:12px; box-shadow:var(--shadow);
  padding:8px 6px; min-height:104px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  border:2px solid transparent; position:relative; text-align:center;
}
.lane.locked{
  background:repeating-linear-gradient(45deg,#eee,#eee 10px,#e4e4e4 10px,#e4e4e4 20px);
  color:var(--sub); font-size:10.5px; font-weight:700; line-height:1.4; padding:4px;
}
.lane.empty{color:var(--sub); font-size:11px;}
.lane.active-scan{border-color:var(--green); cursor:pointer;}
.lane.baito-lane{border-color:#8ec8ff;}
.lane .scan-ring{
  width:48px; height:48px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:conic-gradient(var(--green) calc(var(--p,0)*360deg), #e7ede9 0);
  position:relative;
}
.lane.baito-lane .scan-ring{background:conic-gradient(#4b9bff calc(var(--p,0)*360deg), #e7ede9 0);}
.lane .scan-ring::after{
  content:""; position:absolute; inset:4px; background:#fff; border-radius:50%;
}
.lane .scan-item-emoji{position:relative; font-size:19px; z-index:1;}
.lane .lane-info{min-width:0; width:100%;}
.lane .lane-item-name{font-weight:800; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lane .lane-price{color:var(--sub); font-size:10.5px;}
.lane .lane-hint{font-size:9.5px; color:var(--green-dark); font-weight:700;}
.lane .baito-tag{
  position:absolute; top:4px; right:6px; font-size:8.5px; font-weight:800;
  background:#e7f1ff; color:#2b6fd1; padding:1px 6px; border-radius:999px;
}
.lane.pressed{background:#eafff2;}
.lane.lane-arrive{animation:laneArrive .5s ease;}
@keyframes laneArrive{
  0%{box-shadow:0 0 0 0 rgba(10,166,110,.45); transform:scale(1);}
  30%{box-shadow:0 0 0 8px rgba(10,166,110,0); transform:scale(1.02);}
  100%{box-shadow:0 0 0 0 rgba(10,166,110,0); transform:scale(1);}
}
.lane .vip-badge-lane{position:absolute; top:4px; left:6px; font-size:12px;}

/* open floor between the entrance and the registers, viewed from above */
.floor-walkarea{position:relative; min-height:320px; flex:1;}
.floor-shelves{position:absolute; inset:0; pointer-events:none;}
.shelf{
  position:absolute; width:32px; height:32px; transform:translate(-50%,-50%); border-radius:8px;
  background:#fff; border:2px solid var(--line); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; font-size:15px;
}

.queue-dots{position:absolute; inset:0;}
.cust{
  position:absolute; width:40px; text-align:center; transform:translate(-50%,-50%);
  transition:top .5s ease, left .5s ease; z-index:2;
}
.cust.cust-new{animation:popIn .18s ease;}
.cust .avatar{
  font-size:19px; width:36px; height:36px; line-height:33px; margin:0 auto;
  background:#fff; border-radius:50%; border:3px solid var(--green); box-shadow:var(--shadow);
  transition:border-color .2s;
}
.cust.warn .avatar{border-color:var(--orange);}
.cust.danger .avatar{border-color:var(--danger);}
.cust.vip .avatar{border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,179,1,.25);}
.cust .want-badge{
  position:absolute; right:-6px; bottom:-4px; min-width:16px; height:16px; padding:0 3px;
  border-radius:8px; background:#fff; border:1px solid var(--line); font-size:9px;
  line-height:14px; white-space:nowrap;
}
.vip-badge{position:absolute; top:-8px; left:-2px; font-size:12px;}

.floor-entrance{
  text-align:center; padding:7px; font-size:11.5px; font-weight:700; color:var(--sub);
  background:#fff; border-top:2px dashed rgba(0,0,0,.08);
}

/* ---- shop stats ---- */
.shop-stats{display:flex; gap:8px;}
.shop-stat{
  flex:1; background:var(--panel); border-radius:12px; box-shadow:var(--shadow);
  padding:10px; text-align:center;
}
.shop-stat .k{display:block; font-size:11px; color:var(--sub); font-weight:700;}
.shop-stat .v{display:block; font-size:15px; font-weight:800; margin-top:2px;}

/* ===== PC view ===== */
.pc-frame{
  background:#1b2733; border-radius:20px; padding:10px; box-shadow:var(--shadow);
}
.pc-topbar{
  display:flex; justify-content:space-between; align-items:center;
  color:#dce7e1; padding:6px 10px 10px; font-size:13px;
}
.pc-title{font-weight:800;}
.pc-money b{color:var(--gold);}
.pc-tabs{display:flex; gap:6px; padding:0 4px 10px;}
.pc-tab-btn{
  flex:1; padding:9px 6px; border:none; border-radius:10px; font-size:12px; font-weight:700;
  background:#28394a; color:#b9c7d6; cursor:pointer;
}
.pc-tab-btn.active{background:var(--orange); color:#fff;}
.pc-body{background:var(--bg); border-radius:14px; padding:12px; min-height:400px;}
.pc-panel{display:none; flex-direction:column; gap:10px;}
.pc-panel.active{display:flex;}

.card{
  background:var(--panel); border-radius:14px; padding:12px 14px; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:12px;
}
.card .icon{font-size:28px; flex:0 0 auto; width:40px; text-align:center;}
.card .body{flex:1; min-width:0;}
.card .title{font-weight:800; font-size:14px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.card .desc{font-size:12px; color:var(--sub); margin-top:2px;}
.card .lvl{font-size:11px; color:var(--green-dark); font-weight:700; margin-top:2px;}
.buy-btn{
  flex:0 0 auto; border:none; border-radius:10px; padding:10px 12px; font-weight:800; font-size:12px;
  background:var(--green); color:#fff; cursor:pointer; min-width:88px; text-align:center; line-height:1.3;
}
.buy-btn:disabled{background:#c8d2cc; color:#8a968f; cursor:not-allowed;}
.buy-btn.owned{background:#dfe8e2; color:var(--sub);}
.buy-btn.max{background:var(--gold); color:#5a4000;}
.tag-locked{font-size:10px; background:#ffe8d1; color:var(--orange-dark); padding:1px 7px; border-radius:999px; font-weight:700;}
.tag-new{font-size:10px; background:#ffe1e1; color:var(--danger); padding:1px 7px; border-radius:999px; font-weight:700;}

.rank-dept-tabs{display:flex; gap:6px;}
.rank-dept-btn{
  flex:1; padding:9px 6px; border:none; border-radius:10px; font-size:12px; font-weight:700;
  background:#fff; color:var(--sub); box-shadow:var(--shadow); cursor:pointer;
}
.rank-dept-btn.active{background:var(--orange); color:#fff;}
.rank-id-card{padding:10px;}
#rankNameInput{
  flex:1; min-width:0; border:1px solid var(--line); border-radius:10px; padding:0 10px;
  font-size:13px; font-family:inherit;
}
.rank-me{
  background:var(--panel); border-radius:12px; padding:10px 14px; font-size:12.5px;
  box-shadow:var(--shadow); text-align:center; line-height:1.5;
}
.rank-refresh-btn{width:100%;}
.rank-list{display:flex; flex-direction:column; gap:6px;}
.rankrow{
  display:flex; align-items:center; gap:10px; background:var(--panel); border-radius:10px;
  padding:9px 12px; box-shadow:var(--shadow); font-size:13px; border:2px solid transparent;
}
.rankrow.me{border-color:var(--green);}
.rankrow .rk{width:26px; flex:0 0 auto; font-weight:800; color:var(--sub); text-align:center; font-size:12px;}
.rankrow .rn{flex:1; min-width:0; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rankrow .rv{flex:0 0 auto; font-weight:800; color:var(--green-dark); text-align:right; font-size:12px;}
.rank-empty{text-align:center; color:var(--sub); font-size:13px; padding:10px;}

.settings-btn{
  border:none; border-radius:10px; padding:12px; font-weight:800; font-size:13px;
  background:var(--danger); color:#fff; cursor:pointer; width:100%;
}
.settings-note{font-size:12px; color:var(--sub); line-height:1.6;}

/* ===== toasts / floats ===== */
#toastWrap{position:fixed; top:12px; left:50%; transform:translateX(-50%); z-index:100; display:flex; flex-direction:column; gap:6px; pointer-events:none; width:min(92vw,420px);}
.toast{
  background:#1e2b26; color:#fff; padding:9px 16px; border-radius:999px; font-size:13px; font-weight:700;
  text-align:center; box-shadow:var(--shadow); animation:toastIn .2s ease, toastOut .3s ease 2.2s forwards;
}
.toast.vip{background:var(--gold); color:#5a4000;}
.toast.bad{background:var(--danger);}
@keyframes toastIn{from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);}}
@keyframes toastOut{to{opacity:0; transform:translateY(-8px);}}

#floatWrap{position:fixed; inset:0; pointer-events:none; z-index:90; overflow:hidden;}
.floattext{
  position:absolute; font-weight:800; font-size:16px; color:var(--green-dark);
  animation:floatUp 1s ease forwards;
}
@keyframes floatUp{
  0%{opacity:1; transform:translateY(0);}
  100%{opacity:0; transform:translateY(-42px);}
}

@keyframes popIn{from{opacity:0; transform:scale(.7);} to{opacity:1; transform:scale(1);}}

/* ===== modal ===== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,20,15,.55); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-overlay.hidden{display:none;}
.modal-box{background:#fff; border-radius:18px; padding:22px; max-width:360px; width:100%; text-align:center;}
.modal-title{font-size:18px; font-weight:800; margin-bottom:10px;}
.modal-body{font-size:14px; color:var(--sub); line-height:1.7; margin-bottom:16px; white-space:pre-line;}
.modal-close{
  border:none; background:var(--green); color:#fff; font-weight:800; font-size:14px;
  padding:11px 20px; border-radius:12px; cursor:pointer; width:100%;
}
.modal-close.secondary{background:#eef2ef; color:var(--sub);}
.modal-skip{
  position:absolute; top:14px; right:14px; border:none; background:none; color:var(--sub);
  font-size:12px; font-weight:700; cursor:pointer; padding:4px 6px;
}
.modal-box{position:relative;}
.tut-icon{font-size:46px; margin-bottom:6px;}
.tut-dots{display:flex; justify-content:center; gap:6px; margin-bottom:14px;}
.tut-dots span{width:7px; height:7px; border-radius:50%; background:var(--line);}
.tut-dots span.on{background:var(--green);}
.tut-nav{display:flex; gap:8px;}