:root{
  --bg:#e8eef7;
  --grid:rgba(60,84,124,.13);
  --orange:#ff9600;  --laranja-tx:#d97f00;
  --blue:#0077bd;    --ciano:#0CC0DF;
  --brown:#9a3f00;
  --text:#1b2a40;
  --panel:#ffffff;
  --panel-2:#eef3fb;
  --linha:rgba(22,46,84,.14);
  --tinta-suave:#5a6b85;
  --stage:linear-gradient(180deg,#ffffff,#e9eef7);
  --footer-total:56px;
  --disp:'Bricolage Grotesque', system-ui, sans-serif;
  --ui:'Plus Jakarta Sans', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
  font-family:var(--ui);
  background:var(--bg);
  color:var(--text);
}

.scene{
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
  background-color:var(--bg);
  background-image:
    radial-gradient(1200px 680px at 44% -8%, rgba(46,104,178,.30), transparent 60%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:100% 100%, 22px 22px, 22px 22px;
  background-repeat:no-repeat, repeat, repeat;
}

.app-area{
  position:absolute;
  left:28px;
  right:344px;
  top:22px;
  bottom:calc(var(--footer-total) + 8px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.board-wrap{
  position:relative;
  width:1180px;
  height:600px;
  transform-origin:center center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(46,104,178,.20), transparent 60%),
    var(--stage);
  border:1px solid var(--linha);
  border-radius:22px;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35);
}

.board{
  position:relative;
  width:100%;
  height:100%;
}

.base{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:18px;
  width:96%;
  height:62px;
  background:linear-gradient(#a74600,#873200);
  border:3px solid #111;
  border-radius:12px;
  z-index:1;
  pointer-events:none;
}

.peg{
  position:absolute;
  bottom:78px;
  width:210px;
  height:455px;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
  z-index:5;
}

.peg.selected .rod{
  background:#ffe39c;
  box-shadow:0 0 0 4px rgba(255,150,0,.22);
}

.rod{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:28px;
  height:440px;
  background:#d9d9d9;
  border:3px solid #111;
  border-radius:6px;
  pointer-events:none;
}

.disk-stack{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:420px;
  height:320px;
  pointer-events:none;
}

.disk{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  height:30px;
  border:2px solid #111;
  border-radius:5px;
  pointer-events:none;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset;
}

.peg-a{ left:95px; }
.peg-b{ left:485px; }
.peg-c{ left:875px; }

/* PAINEL LATERAL */
.side-panel{
  position:absolute;
  top:0;
  right:0;
  width:336px;
  bottom:var(--footer-total);
  z-index:10000;
  background:var(--panel);
  border-left:1px solid var(--linha);
  box-shadow:-14px 0 40px -22px rgba(0,0,0,.5);
  padding:16px 16px 12px;
  display:flex;
  flex-direction:column;
  gap:9px;
  pointer-events:auto;
  overflow:hidden;
}

.panel-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex:0 0 auto; margin-bottom:2px;
}
.panel-title{
  margin:0; font-family:var(--disp); font-weight:800; font-size:25px; line-height:1;
  letter-spacing:.01em; color:var(--laranja-tx);
}

.box{
  width:100%;
  background:var(--panel-2);
  border:1px solid var(--linha);
  border-radius:13px;
  color:var(--text);
  font-weight:700;
  text-align:center;
  padding:10px 10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  flex:0 0 auto;
}

.box-title{
  display:block;
  font-size:14px;
  line-height:1.18;
  margin-bottom:4px;
  color:var(--tinta-suave);
  font-weight:700;
}

.big-number{
  display:block;
  font-family:var(--mono);
  font-size:30px;
  line-height:1;
  color:#0a93ab;
  font-weight:800;
}

.medium-label{
  display:block;
  font-size:13px;
  margin-top:7px;
  padding-top:7px;
  color:var(--tinta-suave);
  border-top:1px solid var(--linha);
}

/* ===== botões candy 3D ===== */
.action-btn, .small-btn{
  --c-top:#7d8794; --c-mid:#5b6470; --c-bot:#454d57; --c-edge:#2c333b;
  position:relative; isolation:isolate; width:100%; border:none; cursor:pointer;
  font-family:var(--ui); font-weight:800; color:#fff;
  display:flex; align-items:center; gap:11px; flex:0 0 auto;
  background:linear-gradient(180deg, var(--c-top), var(--c-mid) 52%, var(--c-bot));
  box-shadow:0 4px 0 var(--c-edge), 0 8px 14px -5px rgba(0,0,0,.4),
             inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.10);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.action-btn::after, .small-btn::after{ content:""; position:absolute; inset:1px 1px auto 1px; height:46%;
  z-index:-1; pointer-events:none; border-radius:13px 13px 40% 40%/13px 13px 24px 24px;
  background:linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.04)); }
.action-btn:hover, .small-btn:hover{ transform:translateY(-1px); filter:brightness(1.05);
  box-shadow:0 5px 0 var(--c-edge), 0 11px 18px -6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.12); }
.action-btn:active, .small-btn:active{ transform:translateY(3px);
  box-shadow:0 1px 0 var(--c-edge), 0 3px 7px -3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.45); }

.action-btn{
  border-radius:14px; padding:9px 12px; min-height:50px; font-size:17px; justify-content:center;
  text-shadow:0 1px 1px rgba(0,0,0,.3);
}
.add{    --c-top:#5cc6ff; --c-mid:#1fa3ec; --c-bot:#1480c9; --c-edge:#0c5f9c; }
.remove{ --c-top:#ffc15e; --c-mid:#ff9f1a; --c-bot:#f07f00; --c-edge:#bd5e00; }
.restart{--c-top:#5fe06f; --c-mid:#35bf4b; --c-bot:#1f9a36; --c-edge:#137a29; }

/* medalhão com ícone SVG centralizado (esconde o glifo de texto) */
.icon{
  width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  background-color:rgba(0,0,0,.24); background-repeat:no-repeat; background-position:center; background-size:17px 17px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.18), 0 1px 0 rgba(255,255,255,.28);
  color:transparent; font-size:0;
}
.add .icon{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'><path d='M12 6.4V17.6'/><path d='M6.4 12H17.6'/></svg>"); }
.remove .icon{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'><path d='M6.4 12H17.6'/></svg>"); }
.restart .icon{ background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M18.4 9A7 7 0 1 0 19 12.6'/><path d='M18.4 5V9H14.4'/></svg>"); }

.divider{
  height:1px;
  background:var(--linha);
  margin:4px -16px;
  flex:0 0 auto;
}

/* botões secundários (dica, resolver, pausar) — candy neutro */
.small-btn{
  --c-top:#ffffff; --c-mid:#eef0f2; --c-bot:#dde1e6; --c-edge:#b6bcc4;
  color:#2a2f37; text-shadow:0 1px 0 rgba(255,255,255,.6);
  border-radius:12px; padding:9px 12px 9px 13px; min-height:44px; font-size:13.5px; justify-content:flex-start;
}
.small-icon{
  font-size:18px; width:26px; height:26px; border-radius:50%; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center; line-height:1;
  background:linear-gradient(180deg,#ffffff,#e6e9ee);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.7);
}

.status{
  background:var(--panel-2);
  border:1px solid var(--linha);
  border-radius:12px;
  padding:9px 11px;
  font-size:12px;
  font-weight:600;
  color:var(--text);
  text-align:center;
  line-height:1.3;
  flex:0 0 auto;
  margin-top:auto;
}

.footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:900;
  pointer-events:none;
}

.footer-blue{height:4px;background:var(--ciano);}
.footer-orange{height:3px;background:var(--orange);}

.footer-main{
  height:49px;
  background:#15181e;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 24px;
}

.credit{
  font-family:var(--ui);
  font-size:13.5px;
  font-weight:700;
  color:#eef1f5;
  text-align:center;
  letter-spacing:.005em;
}
.credit b{ font-weight:800; }

@media (max-width:1200px){
  .app-area{ right:300px; left:18px; }
  .side-panel{ width:300px; padding:12px 12px 10px; gap:8px; }
  .box-title{font-size:14px;}
  .big-number{font-size:24px;}
  .action-btn{font-size:16px; padding:8px;}
  .icon{width:28px;height:28px;font-size:24px;}
  .small-btn{font-size:12px;padding:7px 8px 7px 13px;}
  .footer-main{font-size:16px;}
}

@media (max-height:720px){
  :root{ --footer-total:50px; }

  .side-panel{
    gap:6px;
    padding-top:10px;
    padding-bottom:6px;
  }

  .panel-title{ font-size:20px; }
  .theme-toggle{ width:38px; height:38px; }

  .box{
    padding:6px;
  }

  .box-title{
    font-size:12px;
    margin-bottom:3px;
  }

  .big-number{
    font-size:20px;
  }

  .medium-label{
    font-size:11px;
    margin-top:4px;
    padding-top:4px;
  }

  .action-btn{
    font-size:13.5px;
    padding:6px 8px;
    min-height:40px;
  }

  .icon{
    width:24px;
    height:24px;
    background-size:14px 14px;
  }

  .small-btn{
    font-size:11.5px;
    padding:5px 8px 5px 10px;
    min-height:34px;
  }

  .small-icon{
    width:22px;
    height:22px;
    font-size:15px;
  }

  .status{
    font-size:10px;
    padding:6px;
  }

  .footer-main{
    height:43px;
  }

  .footer-blue{height:4px;}
  .footer-orange{height:3px;}
}

/* ===== mobile: torre em cima, painel embaixo ===== */
@media (max-width:760px){
  .scene{ display:flex; flex-direction:column; }
  .app-area{
    position:static; flex:1 1 auto; min-height:0;
    left:auto; right:auto; top:auto; bottom:auto;
    padding:8px; overflow:hidden;
  }
  .board-wrap{
    flex:0 0 auto;
    border-radius:18px;
  }
  .side-panel{
    position:static; width:auto; height:auto;
    left:auto; right:auto; top:auto; bottom:auto;
    margin-bottom:var(--footer-total);
    border-left:none; border-top:1px solid var(--linha);
    box-shadow:0 -16px 40px -24px rgba(0,0,0,.6);
    flex-direction:row; flex-wrap:wrap; align-items:stretch;
    gap:7px; padding:9px 9px 11px; overflow:visible;
  }
  .panel-head{ flex:1 1 100%; margin-bottom:0; }
  .panel-title{ font-size:20px; }
  .box{ flex:1 1 calc(50% - 4px); padding:7px 9px; text-align:left; }
  .box .big-number{ font-size:22px; }
  .divider{ display:none; }
  .action-btn{ flex:1 1 calc(50% - 4px); min-height:46px; font-size:14px; padding:8px 10px; }
  .small-btn{ flex:1 1 calc(50% - 4px); font-size:12px; padding:8px 10px; min-height:40px; }
  .status{ flex:1 1 100%; margin-top:0; font-size:11px; }
}

/* ===== botão de tema (redondo candy roxo, sol/lua animados) ===== */
.theme-toggle{
  width:44px; height:44px; flex:0 0 auto; border:none; border-radius:50%; cursor:pointer; overflow:hidden;
  position:relative; isolation:isolate; display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(180deg,#c483ff,#9b3bf2 52%,#7d18d6);
  box-shadow:0 4px 0 #5c0fa6, 0 8px 14px -5px rgba(0,0,0,.45),
             inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.12);
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
.theme-toggle::after{ content:""; position:absolute; inset:2px 2px auto 2px; height:48%; border-radius:50%;
  z-index:0; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.04)); }
.theme-toggle svg{ position:absolute; width:21px; height:21px; z-index:1; color:#fff;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));
  transition:transform .42s cubic-bezier(.6,.1,.2,1.4), opacity .3s ease; }
/* padrão = tema CLARO → mostra o sol; dark-theme → mostra a lua */
.ico-sol{ transform:translateY(0); opacity:1; }
.ico-lua{ transform:translateY(150%); opacity:0; }
body.dark-theme .ico-sol{ transform:translateY(-150%); opacity:0; }
body.dark-theme .ico-lua{ transform:translateY(0); opacity:1; }
body:not(.dark-theme) .theme-toggle:hover .ico-sol{ transform:rotate(35deg); }
body.dark-theme .theme-toggle:hover .ico-lua{ transform:rotate(-18deg); }
.theme-toggle:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.theme-toggle:active{ transform:translateY(3px);
  box-shadow:0 1px 0 #5c0fa6, 0 3px 7px -3px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.45); }

body.dark-theme{
  --bg:#0b1a2e;
  --grid:rgba(255,255,255,.05);
  --text:#e8eefb;
  --panel:#0f1f36;
  --panel-2:#132741;
  --linha:rgba(255,255,255,.10);
  --tinta-suave:#93a4be;
  --laranja-tx:#ffb02e;
  --stage:linear-gradient(180deg,#13243d,#0e1c30);
  background:#0b1a2e;
  color:#e8eefb;
}
body.dark-theme .side-panel{ box-shadow:-14px 0 40px -22px rgba(0,0,0,.7); }
body.dark-theme .box{ box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
body.dark-theme .big-number{ color:#7dd3fc; }

/* PEÇAS — mantidas como no original */
body.dark-theme .rod{
  background:#e5e7eb;
  border-color:#f9fafb;
}
body.dark-theme .peg.selected .rod{
  background:#facc15;
  box-shadow:0 0 0 5px rgba(250,204,21,.24);
}
body.dark-theme .base{
  background:linear-gradient(#b96823,#7a3411);
  border-color:#f9fafb;
}
body.dark-theme .disk{
  border-color:#f9fafb;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 2px 6px rgba(0,0,0,.25);
}

/* ===== tela de abertura (splash) — estilo capa dos Pontinhos ===== */
.splash{
  position:fixed; inset:0; z-index:10001;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:28px 20px 40px;
  background:
    radial-gradient(900px 600px at 50% 20%, #14294a 0%, transparent 65%),
    #07111F;
  transition:opacity .5s ease, visibility .5s ease;
}
.splash::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 45%, #000 20%, transparent 80%);
          mask-image:radial-gradient(80% 70% at 50% 45%, #000 20%, transparent 80%);
}
.splash.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.splash-inner{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center; max-width:640px; width:100%;
}
.splash-hero{ width:min(300px,64vw); margin-bottom:4px; filter:drop-shadow(0 16px 30px rgba(0,0,0,.4)); }
.splash-hero svg{ display:block; width:100%; height:auto; }
.splash-kicker{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.22em;
  text-transform:uppercase; color:#0CC0DF; margin:0 0 2px;
}
.splash-title{
  font-family:var(--disp); font-weight:800; color:#fff;
  font-size:clamp(40px,7.2vw,74px); line-height:1.02; letter-spacing:-.02em; margin:0;
}
.splash-sub{
  font-family:var(--ui); font-weight:500; color:#93a4be;
  font-size:clamp(15px,2.5vw,20px); margin:12px 0 26px; max-width:34ch; line-height:1.5;
}
.splash-start{
  font-family:var(--disp); font-weight:700; font-size:1.15rem;
  background:#FF9600; color:#1a1005; border:0; border-radius:999px;
  padding:14px 44px; cursor:pointer; box-shadow:0 10px 28px rgba(255,150,0,.28);
  transition:transform .15s ease, box-shadow .15s ease;
}
.splash-start:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(255,150,0,.36); }
.splash-enter{
  position:relative; z-index:1; margin-top:14px; color:#67788f; font-size:.82rem; font-family:var(--mono);
}
.splash-enter kbd{ background:#16283f; border:1px solid rgba(255,255,255,.10); border-radius:6px; padding:1px 7px; }
@media (prefers-reduced-motion:reduce){ .splash{ transition:none; } }