/* Churroman Kids corner: shared styles for every game page */
:root{ --crema:#F4E6C8; --marron:#4A2415; --dorado:#D99A32; --rojo:#A62C24; --espresso:#24130D; }
html,body{margin:0;background:var(--crema);color:var(--espresso);
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;}
#wrap{max-width:900px;margin:0 auto;padding:12px 16px 28px;box-sizing:border-box}
.sitebar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.sitebar a{color:var(--marron);font-weight:bold;text-decoration:none;font-size:16px;
  display:inline-flex;align-items:center;gap:6px;min-height:44px}
.sitebar a:hover{text-decoration:underline}
.sitebar img{height:40px;width:auto;display:block}
h1.game-title{margin:2px 0 12px;text-align:center;color:var(--rojo);font-size:clamp(26px,6vw,36px);letter-spacing:.5px}
h2{margin:0 0 10px;font-size:22px;color:var(--rojo);letter-spacing:.5px}

/* ---- game ---- */
.stage{position:relative}
canvas{width:100%;height:auto;display:block;border-radius:18px;box-shadow:0 8px 24px rgba(36,19,13,.28);
  touch-action:none;cursor:pointer;background:#f7d9a0;outline:none}
#gameArea, #gameArea *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.controls{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:560px;
  margin:16px auto 0;padding:0 6px;box-sizing:border-box}
.controls button{font:inherit;border:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.controls button *{pointer-events:none}
.controls .spacer{width:128px}
/* big round action button (Jump, Drop...) */
.action{width:128px;height:128px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#c9473d,var(--rojo) 60%,#7f1f19);
  color:#fff;box-shadow:0 6px 0 var(--espresso),inset 0 -6px 0 rgba(0,0,0,.18);font-weight:bold;font-size:20px;letter-spacing:2px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.action svg{width:70px;height:40px;overflow:visible}
.action:active,.action.held{transform:translateY(5px);box-shadow:0 1px 0 var(--espresso),inset 0 -3px 0 rgba(0,0,0,.18)}
/* left / right arrows */
.arrows{display:flex;gap:12px}
.arrow{width:84px;height:84px;border-radius:20px;background:var(--marron);color:var(--crema);font-size:34px;
  box-shadow:0 5px 0 var(--espresso);display:flex;align-items:center;justify-content:center;padding:0}
.arrow:active,.arrow.held{background:#6b3a1f;transform:translateY(4px);box-shadow:0 1px 0 var(--espresso)}
.middle{display:flex;flex-direction:column;gap:10px;align-self:flex-end;margin-bottom:6px}
.round{width:48px;height:48px;border-radius:50%;background:var(--dorado);color:var(--espresso);font-size:20px;
  box-shadow:0 4px 0 var(--espresso);display:flex;align-items:center;justify-content:center;padding:0}
.round:active{transform:translateY(3px);box-shadow:0 1px 0 var(--espresso)}
.fs-btn{background:var(--crema);border:2px solid var(--marron)!important;font-size:22px}
.exit-fs{display:none}
.rotate{display:none}
.help{text-align:center;font-size:14px;margin-top:10px;opacity:.85}
.controls.only-middle{justify-content:center}
.controls.only-middle .middle{flex-direction:row;align-self:center;margin:0}

/* ---- full screen ---- */
body.fs{overflow:hidden}
body.fs #gameArea{position:fixed;inset:0;z-index:1000;background:var(--espresso);display:flex;align-items:center;justify-content:center}
body.fs .stage{width:min(100vw, calc(100vh * 1.6));width:min(100vw, calc(100dvh * 1.6))}
body.fs canvas{border-radius:0;box-shadow:none}
body.fs .controls{position:absolute;left:0;right:0;bottom:0;max-width:none;margin:0;pointer-events:none;align-items:flex-end;
  padding:0 max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left))}
body.fs .controls > *{pointer-events:auto}
body.fs .controls .spacer{pointer-events:none}
body.fs .action{width:96px;height:96px;font-size:16px;opacity:.92}
body.fs .action svg{width:52px;height:30px}
body.fs .arrow{width:62px;height:62px;font-size:26px;opacity:.9}
body.fs .middle{position:fixed;top:max(10px, env(safe-area-inset-top));right:max(10px, env(safe-area-inset-right));flex-direction:row;margin:0}
body.fs .round{width:40px;height:40px;font-size:17px;opacity:.9}
body.fs .fs-btn{display:none}
body.fs .exit-fs{display:flex}
@media (orientation:portrait) and (pointer:coarse){
  body.fs .rotate{display:flex;position:fixed;inset:0;z-index:5;background:var(--espresso);color:var(--crema);
    align-items:center;justify-content:center;text-align:center;font-size:20px;line-height:1.4;padding:24px}
  body.fs .rotate .phone{font-size:56px;display:inline-block;animation:turn 1.6s ease-in-out infinite}
}
@keyframes turn{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media (max-width:420px){
  .action{width:110px;height:110px;font-size:17px}
  .arrow{width:70px;height:70px;font-size:28px}
  .controls .spacer{width:110px}
}