/* ---- modal shell ---- */
.ob-ar-root{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:max(14px,2vh) max(12px,3vw);pointer-events:none}
.ob-ar-root[hidden]{display:none}
.ob-ar-root.is-open{pointer-events:auto}
.ob-ar-backdrop{position:absolute;inset:0;background:rgba(23,59,49,.45);opacity:0;transition:opacity .3s ease}
.ob-ar-root.is-open .ob-ar-backdrop{opacity:1}

.ob-ar-panel{
  position:relative;display:flex;flex-direction:column;align-items:center;
  max-width:min(780px,100%);max-height:calc(100dvh - 28px);width:100%;
  background:linear-gradient(180deg,#fbf8ef 0%,#f2ecdb 100%);
  border:1px solid #c9cec1;border-radius:18px;
  box-shadow:0 24px 64px rgba(23,59,49,.28),0 2px 8px rgba(23,59,49,.12);
  padding:20px 22px 18px;
  transform:scale(.62);opacity:0;pointer-events:none;
  transition:transform .34s cubic-bezier(.34,1.3,.5,1),opacity .22s ease;
}
/* QA fix: panel becomes visible on .is-open alone, which setViewCss +
   showModalView always set for BOTH menu and game views. */
.ob-ar-root.is-open .ob-ar-panel{transform:none;opacity:1;pointer-events:auto}
@media(min-width:560px){.ob-ar-root[data-view="game"] .ob-ar-panel{max-width:min(560px,100%)}}

/* growth tendril from the top, echoing the acorn sprout */
.ob-ar-stem{position:absolute;top:-26px;left:50%;width:3px;height:26px;margin-left:-1.5px;border-radius:3px;background:#173b31;transform:scaleY(0);transform-origin:bottom center;transition:transform .3s ease .05s}
.ob-ar-stem::before{content:"";position:absolute;top:-7px;left:-4px;width:11px;height:9px;border-radius:11px 2px 11px 2px;background:#d4e293;opacity:0;transition:opacity .2s ease .22s}
.ob-ar-root.is-open .ob-ar-stem{transform:scaleY(1)}
.ob-ar-root.is-open .ob-ar-stem::before{opacity:1}

/* ---- panel header ---- */
.ob-ar-head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;flex:none}
.ob-ar-title{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.2px;color:#173b31;font-size:17px}
.ob-ar-title svg{width:22px;height:22px;display:block}
.ob-ar-close{
  display:inline-flex;align-items:center;gap:7px;border:1px solid #173b31;border-radius:999px;
  background:#f5f2e9;color:#173b31;font:700 12px/1 Arial,Helvetica,sans-serif;letter-spacing:.6px;
  padding:9px 14px;cursor:pointer;transition:background .15s ease,color .15s ease;
}
.ob-ar-close:hover{background:#173b31;color:#f5f2e9}
.ob-ar-close svg{width:11px;height:11px}

/* ---- views ---- */
.ob-ar-view{display:none;min-height:0;width:100%}
.ob-ar-view.is-active{display:flex;flex-direction:column;align-items:center}
.ob-ar-scroll{width:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* ---- menu ---- */
.ob-ar-menu{gap:16px;padding:8px 0 2px}
.ob-ar-menu-lede{margin:2px 0 0;font-size:13.5px;line-height:1.6;color:#4c5a50;text-align:center;max-width:46ch}
.ob-ar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;width:100%;padding:4px 0}
.ob-ar-card{
  display:flex;flex-direction:column;gap:8px;text-align:left;cursor:pointer;
  background:#fdfaf3;border:1px solid #c9cec1;border-radius:14px;padding:16px 16px 13px;
  color:#173b31;font-family:Arial,Helvetica,sans-serif;
  transition:transform .18s cubic-bezier(.3,1.2,.5,1),box-shadow .18s ease,border-color .18s ease;
}
.ob-ar-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(23,59,49,.12);border-color:#8a9a86}
.ob-ar-card:focus-visible{outline:3px solid #e0812f;outline-offset:2px}
.ob-ar-card-art{width:46px;height:46px;border-radius:10px;background:#173b31;display:flex;align-items:center;justify-content:center;flex:none}
.ob-ar-card-art svg{width:26px;height:26px;display:block}
.ob-ar-card:nth-child(2n) .ob-ar-card-art{background:#4c5a50}
.ob-ar-card h3{margin:2px 0 0;font-size:16px;font-weight:700;letter-spacing:-.2px}
.ob-ar-card p{margin:0;font-size:12.5px;line-height:1.55;color:#4c5a50}
.ob-ar-card-best{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:8px;font-size:11px;font-weight:700;letter-spacing:.5px;color:#62713e}
.ob-ar-card-best .ob-ar-chip{width:7px;height:7px;border-radius:2px;background:#e0812f;flex:none}

/* ---- game view ---- */
.ob-ar-game{gap:10px}
.ob-ar-game-head{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
.ob-ar-back{
  display:inline-flex;align-items:center;gap:6px;border:1px solid #8a9a86;border-radius:999px;background:transparent;
  color:#173b31;font:700 11px/1 Arial,Helvetica,sans-serif;letter-spacing:.5px;padding:8px 12px;cursor:pointer;transition:background .15s ease,color .15s ease;
}
.ob-ar-back:hover{background:#173b31;color:#f5f2e9;border-color:#173b31}
.ob-ar-game-name{font-size:14px;font-weight:700;letter-spacing:.4px;color:#173b31}
.ob-ar-score{font:700 12px/1 Arial,Helvetica,sans-serif;letter-spacing:.6px;color:#173b31;background:#eef0e4;border:1px solid #c9cec1;border-radius:999px;padding:7px 12px}
.ob-ar-score em{font-style:normal;color:#c06f1f}
.ob-ar-canvas-wrap{position:relative;width:100%;display:flex;justify-content:center;touch-action:none;user-select:none;-webkit-user-select:none}
.ob-ar-canvas-wrap canvas{display:block;border-radius:12px;background:#173b31;max-width:100%;height:auto;touch-action:none}
.ob-ar-hint{margin:0;font-size:11.5px;line-height:1.6;color:#4c5a50;text-align:center;max-width:52ch}
.ob-ar-hint kbd{font:700 10.5px/1.4 Arial,Helvetica,sans-serif;background:#eef0e4;border:1px solid #c9cec1;border-bottom-width:2px;border-radius:4px;padding:1px 5px;color:#173b31}

/* overlay (start / pause / win / loss) inside canvas area */
.ob-ar-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:rgba(23,59,49,.82);border-radius:12px;color:#f5f2e9;text-align:center;padding:18px;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.ob-ar-overlay.is-active{opacity:1;pointer-events:auto}
.ob-ar-overlay h3{margin:0;font-size:22px;font-weight:500;letter-spacing:-.5px}
.ob-ar-overlay p{margin:0;font-size:13px;line-height:1.65;color:#cfd8c9;max-width:40ch}
.ob-ar-overlay .ob-ar-final{font-size:14px;color:#d4e293;font-weight:700;letter-spacing:.4px}
.ob-ar-btn{
  display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:999px;cursor:pointer;
  background:#d4e293;color:#173b31;font:700 13px/1 Arial,Helvetica,sans-serif;letter-spacing:.6px;padding:12px 22px;
  transition:transform .15s ease,background .15s ease;
}
.ob-ar-btn:hover{background:#e0ebaa;transform:translateY(-1px)}
.ob-ar-btn.secondary{background:transparent;color:#f5f2e9;border:1px solid #8fa39a;padding:10px 18px;font-size:12px}
.ob-ar-btn.secondary:hover{background:rgba(245,242,233,.1)}
.ob-ar-btn:focus-visible,.ob-ar-back:focus-visible,.ob-ar-close:focus-visible{outline:3px solid #e0812f;outline-offset:2px}
.ob-ar-record{font-size:11px;letter-spacing:.4px;color:#e0812f}

/* ---- Bit Snake (cell grid + d-pad, scoped to the arcade) ---- */
.ob-sn-wrap{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.ob-ar-cellgrid{
  display:grid;grid-template-columns:repeat(17, 1fr);width:min(100%, 420px);
  aspect-ratio:1/1;gap:1px;padding:6px;background:#173b31;border-radius:12px;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.ob-sn-cell{position:relative;border-radius:2px}
.ob-sn-alt{background:rgba(245,242,233,.05)}
.ob-sn-body{background:#d4e293;border-radius:3px}
.ob-sn-head{background:#f5f2e9;border-radius:4px}
.ob-sn-head::after{
  content:"";position:absolute;right:16%;top:26%;width:22%;height:22%;min-width:3px;min-height:3px;
  border-radius:50%;background:#173b31;
}
.ob-sn-dead{background:#e0812f;border-radius:3px;opacity:.85}
.ob-sn-food{background:#e0812f;border-radius:50%;box-shadow:0 0 0 2px rgba(224,129,47,.25)}
.ob-sn-food-static{background:#e0812f;border-radius:50%}
@media(prefers-reduced-motion:reduce){.ob-sn-food{box-shadow:none}}
.ob-sn-dpad{
  display:grid;grid-template-areas:". up ." "left mid right" ". down .";
  grid-template-columns:repeat(3, 56px);grid-template-rows:repeat(3, 56px);gap:6px;
  justify-content:center;
}
.ob-sn-dpad-btn,.ob-sn-pause{
  display:flex;align-items:center;justify-content:center;border:1px solid #8a9a86;border-radius:12px;
  background:#fdfaf3;color:#173b31;font-size:16px;line-height:1;cursor:pointer;
  transition:background .15s ease,color .15s ease,transform .1s ease;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.ob-sn-dpad-btn:hover,.ob-sn-pause:hover{background:#173b31;color:#f5f2e9;border-color:#173b31}
.ob-sn-dpad-btn:active{transform:scale(.94)}
.ob-sn-dpad-btn:focus-visible,.ob-sn-pause:focus-visible{outline:3px solid #e0812f;outline-offset:2px}
.ob-sn-up{grid-area:up}.ob-sn-down{grid-area:down}.ob-sn-left{grid-area:left}.ob-sn-right{grid-area:right}
.ob-sn-pause{grid-area:mid;font-size:12px;letter-spacing:1px;background:#eef0e4}
.ob-sn-keys{margin:0;font-size:11px;color:#8fa39a}
/* d-pads only make sense on touch-width screens; keyboard users have arrows */
@media(min-width:760px){.ob-sn-dpad{display:none}}
@media(max-width:420px){
  .ob-sn-dpad{grid-template-columns:repeat(3, 52px);grid-template-rows:repeat(3, 52px);gap:5px}
}

/* ---- Acorn Catch (canvas field + lives + coarse-pointer handle) ---- */
.ob-ac-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;position:relative}
.ob-ac-wrap canvas{width:min(100%,calc((100dvh - 240px)*.692));height:auto;cursor:pointer}
.ob-ac-lives{display:flex;align-items:center;gap:8px;justify-content:center}
.ob-ac-life{width:14px;height:14px;border-radius:50% 50% 45% 45%;background:#e0812f;border:1.5px solid #a35d16;transition:opacity .2s ease,transform .2s ease}
.ob-ac-life-lost{background:transparent;border-color:#8a9a86;opacity:.4;transform:scale(.8)}
/* slider handle for coarse pointers without reliable pointer-drag */
.ob-ac-handle{
  display:block;width:min(100%,420px);height:34px;margin:0;padding:0;
  -webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;
}
.ob-ac-handle[hidden]{display:none}
.ob-ac-handle::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:#eef0e4;border:1px solid #c9cec1}
.ob-ac-handle::-moz-range-track{height:8px;border-radius:999px;background:#eef0e4;border:1px solid #c9cec1}
.ob-ac-handle::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:34px;height:34px;margin-top:-14px;border-radius:50%;
  background:#e0812f;border:2px solid #173b31;box-shadow:0 2px 6px rgba(23,59,49,.25);
}
.ob-ac-handle::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#e0812f;border:2px solid #173b31}
.ob-ac-handle:focus-visible{outline:3px solid #e0812f;outline-offset:2px}
.ob-ac-handle-knob{display:none}
@media(pointer:coarse){.ob-ac-handle{display:block}}
@media(min-width:760px){.ob-ac-handle{display:none!important}}
.ob-ac-keys{margin:0;font-size:11px;color:#8fa39a}

/* body lock while the arcade is open */
body.ob-ar-open{overflow:hidden}

/* reduced motion: no springs, no stem, instant states */
@media(prefers-reduced-motion:reduce){
  .oak-bit-logo .acorn-cap,.oak-bit-logo.ob-ar-lit .acorn-cap,.oak-bit-logo.ob-ar-opening .acorn-cap{transition:none;animation:none}
  .oak-bit-logo.ob-ar-ready .acorn-cap{animation:none}
  .ob-ar-backdrop,.ob-ar-panel,.ob-ar-stem,.ob-ar-stem::before,.ob-ar-card,.ob-ar-overlay,.ob-ar-btn{transition:none;animation:none}
  .ob-ar-card:hover{transform:none}
  .ob-ar-btn:hover{transform:none}
  .brand:hover .oak-bit-logo{transform:none}
}

/* small portrait phones */
@media(max-width:420px){
  .ob-ar-panel{padding:16px 14px 14px;border-radius:14px}
  .ob-ar-grid{grid-template-columns:1fr;gap:10px}
  .ob-ar-card{flex-direction:row;align-items:center;gap:12px;padding:12px 14px}
  .ob-ar-card-art{width:38px;height:38px}
  .ob-ar-card p{display:none}
  .ob-ar-title{font-size:15px}
}