:root{--ink:#333;--paper:#faf5e6;--accent:#ffd93d;}
  html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#f7f1e3;
    font-family:'Comic Sans MS','Chalkboard SE','Segoe Print',cursive;color:var(--ink);}
  #game{display:block;width:100vw;height:100vh;touch-action:none;}
  .overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:rgba(247,241,227,.94);z-index:10;text-align:center;padding:16px;overflow:auto;}
  .overlay h1{font-size:38px;margin:0 0 4px;transform:rotate(-2deg);}
  .overlay p{font-size:15px;color:#555;max-width:460px;line-height:1.45;margin:4px 0;}
  .btn{margin-top:14px;font-family:inherit;font-size:20px;padding:9px 30px;border:3px solid var(--ink);
    border-radius:48% 52% 55% 45% / 55% 48% 52% 45%;background:var(--accent);color:var(--ink);cursor:pointer;
    transform:rotate(1.5deg);box-shadow:3px 3px 0 var(--ink);}
  .btn:active{transform:rotate(1.5deg) translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
  .btn.secondary{background:#fff;font-size:16px;}
  .btn.ghost{background:transparent;box-shadow:none;border-style:dashed;font-size:14px;padding:6px 18px;}
  .hidden{display:none!important;}
  .small{font-size:12px;color:#999;}
  /* character select */
  #skinGrid{display:grid;grid-template-columns:repeat(auto-fit,92px);gap:10px;justify-content:center;
    max-width:460px;margin:10px 0;}
  .skinCard{width:92px;height:104px;border:3px solid var(--ink);border-radius:14px;background:#fff;
    cursor:pointer;display:flex;flex-direction:column;align-items:center;padding-top:4px;box-sizing:border-box;
    box-shadow:2px 2px 0 var(--ink);position:relative;}
  .skinCard.sel{background:var(--accent);transform:rotate(-2deg) scale(1.06);}
  .skinCard canvas{width:80px;height:80px;}
  .skinCard span{font-size:12px;}
  #nickInput{font-family:inherit;font-size:18px;padding:6px 12px;border:3px solid var(--ink);border-radius:12px;
    background:#fff;width:180px;text-align:center;outline:none;}
  /* searching / matchmaking */
  #searchScreen h1{font-size:28px;}
  .spinner{font-size:44px;display:inline-block;animation:spin 1s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}
  /* cards used by revive / pause */
  #revivePopup .card, #fakeAd .card, #pauseMenu .card{background:#fff;border:3px solid var(--ink);border-radius:18px;
    box-shadow:5px 5px 0 var(--ink);padding:22px 26px;max-width:380px;}
  #fakeAd{background:rgba(30,30,30,.88);}
  #fakeAd .card{background:#fffbe8;}
  #adCount{font-size:30px;}
  /* hud buttons */
  .hudBtn{position:fixed;top:10px;z-index:5;font-family:inherit;font-size:18px;
    width:42px;height:42px;border:3px solid var(--ink);border-radius:50%;background:#fff;cursor:pointer;
    box-shadow:2px 2px 0 var(--ink);}
  #muteBtn{right:10px;}
  #fsBtn{right:60px;}
  #pauseBtn{right:110px;}
  /* pause menu */
  #pauseMenu{z-index:15;}
  #pauseMenu .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px;}
  .bannerSlot{position:relative;width:350px;height:250px;margin:14px auto 4px;max-width:90vw;}
  .bannerPlaceholder{position:absolute;inset:0;border:2px dashed #aaa;border-radius:8px;
    display:flex;align-items:center;justify-content:center;flex-direction:column;color:#999;
    font-size:13px;background:repeating-linear-gradient(45deg,#fff,#fff 10px,#f6f6f6 10px,#f6f6f6 20px);}
  .bannerPlaceholder b{font-size:20px;color:#bbb;margin-bottom:4px;}
  ins.adsbygoogle{position:relative;z-index:1;}
  /* daily challenges */
  #dailyPanel{z-index:20;}
  #dailyList{display:flex;flex-direction:column;gap:10px;margin:12px 0;width:100%;}
  .challengeRow{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);border-radius:12px;
    padding:8px 10px;background:#fff;text-align:left;}
  .challengeRow.done{background:#e9f9ee;border-color:#2a9d8f;}
  .chIcon{font-size:22px;width:28px;text-align:center;flex-shrink:0;}
  .chBody{flex:1;min-width:0;}
  .chLabel{font-size:14px;margin-bottom:4px;}
  .chBar{height:8px;border-radius:5px;background:#eee;overflow:hidden;border:1px solid #ddd;}
  .chFill{height:100%;background:var(--accent);}
  .done .chFill{background:#2a9d8f;}
  .chNum{font-size:11px;color:#888;margin-top:2px;}
  #toastLayer{position:fixed;top:0;left:0;width:100%;pointer-events:none;z-index:8;}