:root{--paper:#fff8ed;--ink:#243229;--muted:#69736c;--gold:#efbd3d;--leaf:#6f9d72;--sky:#91c9d4;--coral:#dd8b75;--berry:#b6637e;--line:rgba(36,50,41,.13);--shadow:0 24px 70px rgba(67,52,33,.15);--serif:"Fraunces",Georgia,serif;--sans:"DM Sans",system-ui,sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;min-height:100%}body{font-family:var(--sans);color:var(--ink);background:radial-gradient(circle at 10% 10%,rgba(239,189,61,.18),transparent 27rem),radial-gradient(circle at 90% 35%,rgba(145,201,212,.16),transparent 30rem),radial-gradient(circle at 45% 92%,rgba(221,139,117,.13),transparent 28rem),var(--paper);overflow-x:hidden}button,a{font:inherit;touch-action:manipulation}a{color:inherit}
.paper-grain{position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.16;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E")}
.game-page{width:min(1320px,calc(100% - 28px));margin:0 auto;padding:16px 0 46px}.game-header{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:16px}.brand{display:flex;gap:11px;align-items:center;text-decoration:none}.brand-mark{width:43px;height:43px;display:grid;place-items:center;border-radius:48% 52% 42% 58%/44% 42% 58% 56%;color:#fff;font-family:var(--serif);font-size:1.3rem;font-weight:700;background:var(--gold);box-shadow:inset 0 0 18px rgba(255,255,255,.35);transform:rotate(-5deg)}.brand strong,.brand small{display:block}.brand strong{font-family:var(--serif)}.brand small{color:var(--muted);font-size:.74rem}.header-actions{display:flex;gap:9px;align-items:center}.round-button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.75);cursor:pointer}.site-link{padding:10px 15px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-size:.82rem;font-weight:700}
.hud{display:grid;grid-template-columns:.8fr 1.4fr .8fr .8fr;gap:9px;margin-bottom:10px}.hud-card{min-height:68px;padding:10px 14px;border-radius:18px;background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.8);box-shadow:0 10px 28px rgba(55,44,28,.07);display:flex;flex-direction:column;justify-content:center}.hud-label{color:var(--muted);font-size:.67rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800}.hud-card strong{font-family:var(--serif);font-size:1.35rem}.hud-bag{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:10px}.hud-bag .hud-label{grid-column:1/-1}.bag-progress{height:12px;background:rgba(36,50,41,.1);border-radius:999px;overflow:hidden}.bag-fill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#f0c64e,#e0a82d);transition:width .18s ease}.timer-card strong{color:var(--berry)}
.canvas-frame{position:relative;width:100%;aspect-ratio:5/3;overflow:hidden;border-radius:30px;background:#dce8cf;border:8px solid rgba(255,255,255,.64);box-shadow:var(--shadow);isolation:isolate}#gameCanvas{display:block;width:100%;height:100%;touch-action:none}.floating-message{position:absolute;left:50%;top:18%;transform:translate(-50%,-10px);z-index:12;pointer-events:none;opacity:0;background:rgba(255,255,255,.88);padding:9px 16px;border-radius:999px;box-shadow:0 10px 24px rgba(40,30,20,.12);font-weight:800;font-size:.9rem;transition:.25s ease}.floating-message.show{opacity:1;transform:translate(-50%,0)}
.game-overlay{position:absolute;inset:0;display:none;place-items:center;z-index:30;padding:20px;background:rgba(34,45,37,.36);backdrop-filter:blur(5px)}.game-overlay.open{display:grid}.overlay-card{width:min(680px,100%);max-height:96%;overflow-y:auto;text-align:center;padding:clamp(26px,4vw,48px);border-radius:30px;background:radial-gradient(circle at 12% 10%,rgba(239,189,61,.2),transparent 28%),radial-gradient(circle at 88% 72%,rgba(145,201,212,.2),transparent 31%),rgba(255,250,242,.94);border:1px solid rgba(255,255,255,.9);box-shadow:0 30px 90px rgba(0,0,0,.23)}.eyebrow{color:#667468;font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;font-weight:800}.start-card h1,.end-card h2{font-family:var(--serif);line-height:1;letter-spacing:-.04em}.start-card h1{font-size:clamp(2.6rem,6vw,5.3rem);margin:.24em 0}.start-card h1 em{color:var(--berry);font-style:normal}.start-card>p{color:var(--muted);max-width:560px;margin:0 auto 22px}.rules{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}.rules div{min-height:105px;padding:13px 9px;display:flex;flex-direction:column;justify-content:center;border-radius:17px;background:rgba(255,255,255,.69);border:1px solid var(--line)}.rules span{font-size:1.6rem}.rules strong,.rules small{display:block}.rules strong{font-size:.78rem}.rules small{color:var(--muted);font-size:.67rem}.record-line{margin:14px 0;color:var(--muted);font-size:.83rem}.primary-button,.secondary-button{border:0;border-radius:999px;min-height:48px;padding:13px 22px;display:inline-flex;justify-content:center;align-items:center;text-decoration:none;cursor:pointer;font-weight:800}.primary-button{background:var(--ink);color:#fff;box-shadow:0 10px 25px rgba(36,50,41,.17)}.secondary-button{background:#fff;color:var(--ink);border:1px solid var(--line)}.control-tip{display:block;margin-top:12px;color:var(--muted)}.end-card h2{font-size:clamp(3rem,7vw,5.5rem);margin:.22em 0}.final-score{margin:20px auto;width:min(260px,100%);padding:16px;border-radius:18px;background:rgba(239,189,61,.14)}.final-score span,.final-score strong{display:block}.final-score span{color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.12em}.final-score strong{font-family:var(--serif);font-size:2.7rem}.record-message{min-height:1.5em;color:var(--berry);font-weight:800}.end-actions{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}
.mobile-controls{display:none;grid-template-columns:repeat(3,62px);justify-content:center;gap:6px;margin-top:14px}.control-button{width:62px;height:55px;border:1px solid rgba(36,50,41,.14);border-radius:17px;background:rgba(255,255,255,.78);color:var(--ink);font-size:1.2rem;font-weight:800;box-shadow:0 8px 18px rgba(55,44,28,.07)}.control-button:active{transform:scale(.96);background:#fff}.center-control{opacity:.55}.game-footer-note{margin:20px auto 0;display:flex;justify-content:center;gap:9px;align-items:center;text-align:center;color:var(--muted);font-size:.87rem}.game-footer-note p{margin:0}
@media(max-width:900px){.game-page{width:min(100% - 18px,1320px)}.hud{grid-template-columns:1fr 1fr}.canvas-frame{aspect-ratio:4/3}.mobile-controls{display:grid}}@media(max-width:600px){.game-header{align-items:flex-start}.site-link{display:none}.brand small{display:none}.hud-card{min-height:58px}.hud-bag{grid-template-columns:1fr auto}.bag-progress{grid-column:1}.canvas-frame{border-width:5px;border-radius:24px;aspect-ratio:9/12}.game-overlay{padding:10px}.overlay-card{padding:24px 18px;border-radius:24px}.rules{grid-template-columns:1fr 1fr}.mobile-controls{grid-template-columns:repeat(3,58px)}.control-button{width:58px;height:52px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* =========================================================
   CONTROLE POR MOUSE / TOQUE NO CENÁRIO
   ========================================================= */

#gameCanvas{
  cursor:crosshair;
}

.mouse-help{
  margin:13px auto 0;
  width:fit-content;
  max-width:760px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  padding:9px 14px;

  border:1px solid rgba(36,50,41,.10);
  border-radius:999px;

  background:rgba(255,255,255,.62);

  color:var(--muted,#69736c);

  font-size:.78rem;
  text-align:center;
}

.mouse-help-icon{
  flex:0 0 auto;
  font-size:1.1rem;
}

@media(max-width:600px){
  .mouse-help{
    width:100%;
    border-radius:16px;
    align-items:flex-start;
    text-align:left;
  }
}

@media(pointer:coarse){
  #gameCanvas{
    cursor:default;
  }
}