* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html,body { width:100%; height:100%; height:100dvh; overflow:hidden; background:#7ec850; font-family:'Trebuchet MS', 'Comic Sans MS', sans-serif; touch-action:none; overscroll-behavior:none; }
  #game { display:block; width:100vw; height:100vh; height:100dvh; }
  .screen { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; background:linear-gradient(#8fd35f,#6db843); z-index:10; padding:calc(16px + env(safe-area-inset-top)) 10px calc(30px + env(safe-area-inset-bottom)); overflow:auto; -webkit-overflow-scrolling:touch; }
  h1 { color:#fff; text-shadow:3px 3px 0 #3f7d22; font-size:clamp(26px,6.5vw,48px); letter-spacing:1px; margin-bottom:4px; }
  .sub { color:#eaffdc; font-weight:bold; margin-bottom:12px; font-size:clamp(12px,3vw,17px); text-align:center; }
  .panels { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
  .panel { background:#fffef2; border:4px solid #3f7d22; border-radius:18px; padding:12px 14px; width:min(320px,92vw); box-shadow:0 6px 0 #3f7d22; }
  .panel h2 { font-size:17px; margin-bottom:6px; color:#e2574c; }
  .panel.human h2 { color:#3a7bd5; }
  .puppyNote { text-align:center; font-size:12px; color:#8a5a2b; font-weight:bold; background:#fff3d0; border-radius:10px; padding:6px; margin-bottom:6px; }
  .dogPreview { display:block; margin:2px auto 6px; background:#dff3c9; border-radius:12px; }
  .row { display:flex; align-items:center; justify-content:space-between; margin:6px 0; }
  .row .lbl { font-weight:bold; color:#555; font-size:14px; }
  .cycler { display:flex; align-items:center; gap:8px; }
  .cycler button { width:34px; height:34px; border:none; border-radius:10px; background:#3f7d22; color:#fff; font-size:17px; font-weight:bold; cursor:pointer; box-shadow:0 3px 0 #2a5716; }
  .cycler button:active { transform:translateY(2px); box-shadow:0 1px 0 #2a5716; }
  .cycler .val { min-width:88px; text-align:center; font-weight:bold; color:#333; font-size:13px; }
  input[type=text] { width:100%; padding:9px; border:3px solid #3f7d22; border-radius:10px; font-size:15px; font-weight:bold; text-align:center; color:#333; }
  .mapPick { width:min(460px,94vw); margin-top:14px; }
  .mapPick h2 { color:#fff; text-shadow:2px 2px 0 #3f7d22; text-align:center; font-size:19px; margin-bottom:8px; }
  .maps { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; max-height:290px; overflow:auto; padding:4px; border-radius:14px; background:rgba(0,0,0,.08); }
  .mapBtn { position:relative; }
  .mapBtn .warn { position:absolute; top:-6px; right:-6px; font-size:13px; background:#fff; border-radius:50%; width:20px; height:20px; line-height:20px; box-shadow:0 2px 0 rgba(0,0,0,.25); }
  .mapFoot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; color:#fff; font-size:12px; font-weight:bold; text-shadow:1px 1px 0 rgba(0,0,0,.35); }
  .diceBtn { background:#ffd23f; color:#5e3c1a; border:none; border-radius:12px; padding:8px 12px; font-weight:bold; font-size:13px; cursor:pointer; box-shadow:0 4px 0 #c99a2e; }
  .mapBtn { border:4px solid rgba(255,255,255,.45); border-radius:14px; padding:10px 4px; text-align:center; cursor:pointer; color:#fff; font-weight:bold; font-size:12px; text-shadow:1px 1px 0 rgba(0,0,0,.35); box-shadow:0 4px 0 rgba(0,0,0,.2); }
  .mapBtn .mi { font-size:26px; display:block; margin-bottom:2px; }
  .mapBtn.sel { border-color:#ffd23f; outline:3px solid #fff; transform:scale(1.05); }
  .btnRow { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:16px; }
  .bigBtn { padding:13px 22px; font-size:clamp(15px,3.8vw,20px); font-weight:bold; color:#fff; background:#ff9f1c; border:none; border-radius:16px; cursor:pointer; box-shadow:0 6px 0 #c47206; letter-spacing:1px; }
  .bigBtn.mk { background:#4caf50; box-shadow:0 6px 0 #2e7d32; }
  .bigBtn.jn { background:#3a7bd5; box-shadow:0 6px 0 #24549c; }
  .bigBtn:active { transform:translateY(3px); box-shadow:0 3px 0 rgba(0,0,0,.3); }
  .hint { margin-top:12px; color:#eaffdc; font-size:12px; text-align:center; line-height:1.5; }
  #hud { position:fixed; top:calc(8px + env(safe-area-inset-top)); left:calc(10px + env(safe-area-inset-left)); z-index:5; pointer-events:none; display:none; gap:6px; flex-wrap:wrap; max-width:calc(100vw - 160px); }
  .money,.spd,.hap,.ab,.grw,.gid { background:#fffef2; border:3px solid #3f7d22; border-radius:12px; padding:4px 12px; font-weight:bold; font-size:14px; box-shadow:0 3px 0 #3f7d22; }
  .money{ color:#e2574c; } .spd{ color:#3a7bd5; } .hap{ color:#ff5aa0; } .ab{ color:#8a4bd2; display:none; } .grw{ color:#8a5a2b; }
  .gid { color:#2e7d32; display:none; font-size:15px; letter-spacing:1px; }
  .openBtn { position:fixed; z-index:8; display:none; padding:8px 14px; font-size:14px; font-weight:bold; color:#fff; border:3px solid #fff; border-radius:14px; cursor:pointer; letter-spacing:1px; animation:bounce 1s infinite; }
  #openBtn1 { background:#ff9f1c; box-shadow:0 5px 0 #c47206; }
  #openBtn2 { background:#3a7bd5; box-shadow:0 5px 0 #24549c; }
  #openBtn3 { background:#ff5aa0; box-shadow:0 5px 0 #c23470; }
  #openBtn4 { background:#8a4bd2; box-shadow:0 5px 0 #6234a0; }
  #openBtn5 { background:#4caf50; box-shadow:0 5px 0 #2e7d32; }
  .openBtn:active { transform:translateY(3px); }
  @keyframes bounce { 0%,100%{ margin-top:0 } 50%{ margin-top:5px } }
  #shop, #joinModal { position:fixed; inset:0; background:rgba(30,50,20,.75); z-index:20; display:none; align-items:center; justify-content:center; padding:10px; }
  .shopBox { position:relative; background:#fff7e0; border:5px solid #8a5a2b; border-radius:20px; width:min(420px,94vw); max-height:88vh; overflow:auto; padding:16px 14px 14px; box-shadow:0 8px 0 #5e3c1a; }
  .shopBox h2 { color:#8a5a2b; text-align:center; margin-bottom:4px; font-size:19px; }
  .shopWho { text-align:center; font-weight:bold; margin-bottom:10px; color:#444; }
  #shopX, .modalX { position:absolute; top:8px; right:8px; width:38px; height:38px; border:none; border-radius:12px; background:#e2574c; color:#fff; font-size:20px; font-weight:bold; cursor:pointer; box-shadow:0 3px 0 #a33; line-height:1; z-index:2; }
  #shopX:active, .modalX:active { transform:translateY(2px); box-shadow:0 1px 0 #a33; }
  .item { display:flex; align-items:center; justify-content:space-between; background:#fff; border:3px solid #e8d9b8; border-radius:12px; padding:8px 10px; margin:6px 0; gap:6px; }
  .item.leg { border-color:#ffd23f; background:linear-gradient(90deg,#fff8e0,#ffefc0); }
  .item .nm { font-weight:bold; color:#444; font-size:13px; }
  .item .pr { color:#8a5a2b; font-weight:bold; font-size:13px; white-space:nowrap; }
  .item button { border:none; border-radius:10px; padding:7px 12px; font-weight:bold; cursor:pointer; color:#fff; box-shadow:0 3px 0 rgba(0,0,0,.25); font-size:13px; white-space:nowrap; }
  .buyB { background:#ff9f1c; } .eqB { background:#4caf50; } .onB { background:#9e9e9e; } .trB { background:#ff5aa0; } .abB { background:#8a4bd2; } .crB { background:#4caf50; }
  .speedBig { text-align:center; margin:10px 0 6px; }
  .speedBig .n { font-size:44px; font-weight:bold; color:#3a7bd5; }
  .speedBig .of { font-size:16px; color:#888; font-weight:bold; }
  .speedBar { height:16px; background:#e8e2cf; border-radius:8px; overflow:hidden; margin:8px 4px 12px; border:2px solid #d8cfae; }
  .speedBar .fill { height:100%; background:linear-gradient(90deg,#4caf50,#3a7bd5); border-radius:6px; }
  .speedBar .fillH { height:100%; background:linear-gradient(90deg,#ff9f1c,#ff5aa0); border-radius:6px; }
  .speedBar .fillG { height:100%; background:linear-gradient(90deg,#c8a04b,#8a5a2b); border-radius:6px; }
  .upBtn { display:block; width:100%; padding:13px; font-size:17px; font-weight:bold; color:#fff; background:#3a7bd5; border:none; border-radius:14px; cursor:pointer; box-shadow:0 5px 0 #24549c; }
  .upBtn:active { transform:translateY(2px); box-shadow:0 2px 0 #24549c; }
  .upBtn.max { background:#9e9e9e; box-shadow:0 5px 0 #6e6e6e; }
  .treatNote { text-align:center; font-size:13px; color:#8a5a2b; font-weight:bold; margin:4px 0 8px; line-height:1.4; }
  .stick { position:fixed; left:0; top:0; transform:translate(-50%,-50%); width:clamp(110px,28vw,150px); height:clamp(110px,28vw,150px); border-radius:50%; background:rgba(255,255,255,.28); border:3px solid rgba(226,87,76,.75); z-index:6; display:none; pointer-events:none; box-shadow:0 0 0 6px rgba(255,255,255,.12); }
  .stick .knob { position:absolute; left:50%; top:50%; width:46%; height:46%; border-radius:50%; background:rgba(255,255,255,.75); transform:translate(-50%,-50%); }
  .starRow { display:flex; justify-content:center; gap:6px; font-size:34px; margin:8px 0; cursor:pointer; user-select:none; }
  .starRow span { filter:grayscale(1); opacity:.45; }
  .starRow span.on { filter:none; opacity:1; }
  .revItem { background:#fff; border:3px solid #e8d9b8; border-radius:12px; padding:8px 10px; margin:6px 0; font-size:13px; color:#444; }
  .revItem .st { color:#ff9f1c; font-weight:bold; }
  .dogRow { display:flex; gap:6px; margin-top:8px; }
  .dogRow button { flex:1; border:none; border-radius:12px; padding:10px 6px; font-weight:bold; font-size:13px; color:#fff; cursor:pointer; }
  .dogSave { background:#4caf50; box-shadow:0 4px 0 #2e7d32; }
  .dogNew { background:#3a7bd5; box-shadow:0 4px 0 #24549c; }
  .dogRow button:active { transform:translateY(2px); }
  .dogSlot { display:flex; align-items:center; gap:7px; background:#fff; border:3px solid #e8d9b8; border-radius:12px; padding:6px 8px; margin-top:6px; }
  .dogSlot.on { border-color:#4caf50; background:#f2fff0; }
  .dogSlot canvas { border-radius:8px; background:#dff3c9; }
  .dogSlot .dn { flex:1; font-weight:bold; font-size:13px; color:#444; text-align:left; }
  .dogSlot .dn small { display:block; font-weight:normal; color:#888; font-size:11px; }
  .dogSlot button { border:none; border-radius:9px; padding:7px 10px; font-weight:bold; font-size:12px; color:#fff; cursor:pointer; background:#8a4bd2; }
  .dogSlot button.del { background:#e2574c; padding:7px 9px; }
  .svItem { display:flex; align-items:center; gap:8px; background:#fff; border:3px solid #e8d9b8; border-radius:14px; padding:9px 11px; margin:7px 0; }
  .svItem .svName { flex:1; font-weight:bold; color:#333; font-size:15px; }
  .svItem .svWho { font-size:12px; color:#888; font-weight:normal; display:block; }
  .svItem button { background:#4caf50; color:#fff; border:none; border-radius:11px; padding:9px 14px; font-weight:bold; cursor:pointer; box-shadow:0 3px 0 #2e7d32; }
  .svItem.full button { background:#9e9e9e; box-shadow:0 3px 0 #666; }
  .stockBar { text-align:center; font-size:13px; font-weight:bold; color:#fff; background:#3a7bd5; border-radius:12px; padding:7px; margin:4px 0 8px; box-shadow:0 3px 0 #24549c; }
  .item.oos { opacity:.55; background:repeating-linear-gradient(45deg,#f3f3f3,#f3f3f3 8px,#e6e6e6 8px,#e6e6e6 16px); }
  .item.oos .pr { color:#d23f3f; }
  .evItem { background:#fff; border:3px solid #e8d9b8; border-radius:14px; padding:10px 12px; margin:8px 0; color:#444; }
  .evItem.live { border-color:#e2574c; background:linear-gradient(#fff,#ffe9e6); animation:wantPulse 1.2s infinite; }
  .evItem.done { opacity:.55; }
  .evItem .evName { font-size:17px; font-weight:bold; color:#333; }
  .evItem .evTag { float:right; font-size:11px; font-weight:bold; color:#fff; background:#3a7bd5; border-radius:10px; padding:3px 8px; }
  .evItem.live .evTag { background:#e2574c; } .evItem.done .evTag { background:#9e9e9e; }
  .evItem .evWhen { font-size:13px; font-weight:bold; color:#8a5a2b; margin-top:6px; line-height:1.5; }
  .evItem .evDesc { font-size:12px; color:#666; margin-top:6px; line-height:1.4; }
  .evItem .evCount { font-size:13px; font-weight:bold; color:#3f7d22; margin-top:6px; }
  #onlineChip { position:fixed; right:calc(62px + env(safe-area-inset-right)); top:calc(8px + env(safe-area-inset-top)); z-index:12; background:#fffef2; border:3px solid #4caf50; border-radius:12px; padding:6px 10px; font-weight:bold; font-size:12px; color:#2e7d32; box-shadow:0 3px 0 #2e7d32; pointer-events:none; }
  .adminHead { margin:12px 0 2px; font-weight:bold; font-size:12px; letter-spacing:2px; color:#8a5a2b; text-align:center; }
  .adminGrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
  .adminGrid button { border:none; border-radius:12px; padding:11px 6px; font-weight:bold; font-size:13px; color:#fff; cursor:pointer; }
  .adminGrid button:active { transform:translateY(2px); }
  .adminGrid .wide { grid-column:1 / -1; }
  .sayRow { display:flex; gap:6px; margin-top:10px; }
  .sayRow input { flex:1; font-size:14px; padding:10px; border:3px solid #8a5a2b; border-radius:12px; }
  .sayRow button { background:#3a7bd5; color:#fff; border:none; border-radius:12px; padding:0 14px; font-size:18px; cursor:pointer; box-shadow:0 4px 0 #24549c; }
  #announce { position:fixed; top:-200px; left:50%; transform:translateX(-50%); width:min(720px,94vw); background:#111; border:4px solid #ffd23f; border-radius:16px; padding:14px 18px; z-index:40; text-align:center; box-shadow:0 8px 0 #000, 0 0 30px rgba(255,210,63,.55); transition:top .55s cubic-bezier(.2,1.4,.4,1); pointer-events:none; }
  #announce.show { top:calc(10px + env(safe-area-inset-top)); }
  #announce .aTag { color:#ffd23f; font-size:12px; font-weight:bold; letter-spacing:3px; }
  #announce .aText { color:#fff; font-size:clamp(20px,4.5vw,34px); font-weight:bold; line-height:1.2; margin-top:4px; overflow-wrap:anywhere; text-shadow:2px 2px 0 #000; }
  #musicBtn { position:fixed; bottom:calc(12px + env(safe-area-inset-bottom)); right:calc(12px + env(safe-area-inset-right)); z-index:12; width:44px; height:44px; background:#8a4bd2; color:#fff; border:3px solid #fff; border-radius:12px; font-size:20px; cursor:pointer; box-shadow:0 4px 0 #6234a0; }
  #musicBtn.off { background:#9e9e9e; box-shadow:0 4px 0 #666; }
  #adminBtn { position:fixed; top:calc(8px + env(safe-area-inset-top)); right:calc(62px + env(safe-area-inset-right)); z-index:9; width:44px; height:44px; background:#ffd23f; color:#fff; border:3px solid #fff; border-radius:12px; font-size:20px; display:none; cursor:pointer; box-shadow:0 4px 0 #c99a2e; }
  #backBtn { position:fixed; top:calc(8px + env(safe-area-inset-top)); right:calc(10px + env(safe-area-inset-right)); z-index:9; width:44px; height:44px; background:#111; color:#fff; border:3px solid #fff; border-radius:12px; font-size:20px; font-weight:bold; display:none; cursor:pointer; box-shadow:0 4px 0 #000; }
  #backBtn:active { transform:translateY(2px); box-shadow:0 2px 0 #000; }
  #toast { position:fixed; top:calc(52px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); background:#fffef2; border:3px solid #3f7d22; border-radius:12px; padding:6px 16px; font-weight:bold; color:#3f7d22; z-index:30; display:none; box-shadow:0 3px 0 #3f7d22; font-size:13px; white-space:nowrap; max-width:94vw; overflow:hidden; text-overflow:ellipsis; }
  .needBar { text-align:center; font-size:13px; color:#8a5a2b; font-weight:bold; background:#fff3d0; border:3px solid #f0c674; border-radius:12px; padding:8px; margin:6px 0 10px; line-height:1.5; }
  .stationGrid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:8px 0 10px; }
  .station { position:relative; background:#fff; border:4px solid #e8d9b8; border-radius:14px; padding:10px 4px; text-align:center; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.15); transition:transform .08s; }
  .station:active { transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.15); }
  .station.wanted { border-color:var(--sc); background:linear-gradient(#fff,#fff6e0); box-shadow:0 4px 0 var(--sc); animation:wantPulse 1s infinite; }
  .station .si { font-size:30px; display:block; line-height:1.1; }
  .station .sn { font-size:11px; font-weight:bold; color:#555; margin-top:3px; line-height:1.25; }
  .station .sp { font-size:12px; font-weight:bold; color:#8a5a2b; margin-top:3px; }
  .starBadge { position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%; background:#e2574c; color:#fff; font-weight:bold; font-size:15px; line-height:24px; border:2px solid #fff; }
  @keyframes wantPulse { 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.05) } }
  /* ---- phones ---- */
  @media (max-width:600px){
    .panels { gap:10px; }
    .panel { padding:10px 12px; width:min(340px,94vw); }
    .panel h2 { font-size:16px; }
    .row { margin:5px 0; }
    .row .lbl { font-size:13px; }
    .cycler button { width:40px; height:40px; font-size:18px; }
    .cycler .val { min-width:76px; font-size:12px; }
    .mapPick { width:min(360px,96vw); }
    .maps { gap:6px; grid-template-columns:repeat(3,1fr); }
    .mapBtn { padding:8px 2px; font-size:11px; }
    .mapBtn .mi { font-size:22px; }
    .btnRow { gap:8px; margin-top:14px; }
    .bigBtn { padding:14px 18px; }
    .money,.spd,.hap,.ab,.grw,.gid { font-size:12px; padding:3px 9px; border-width:2px; }
    .openBtn { padding:10px 16px; font-size:13px; }
    .item .nm { font-size:12px; } .item .pr { font-size:12px; }
    .item button { padding:9px 12px; }
    .shopBox { padding:14px 11px 12px; max-height:86vh; max-height:86dvh; }
    .station .si { font-size:26px; } .station .sn { font-size:10px; } .station { padding:8px 2px; }
    #backBtn { width:42px; height:42px; font-size:20px; }
    #onlineChip { font-size:11px; padding:5px 8px; }
  }
  @media (max-height:480px) and (orientation:landscape){
    h1 { font-size:24px; margin-bottom:2px; }
    .sub { margin-bottom:8px; }
    .dogPreview { height:84px; }
    .puppyNote { font-size:11px; padding:4px; }
  }