:root{
  --paper:#ead8b5;--paper2:#f6ebd1;--ink:#241a12;--edge:#b99763;
  --btn:#f1ddba;--btn-edge:#b99763;--rad:14px;--gap:12px;
  --cell:50px;               /* smaller keys so Up/Down never spill */
  --ingap:6px;               /* inner gaps */
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:ui-serif,Georgia,serif}

/* reduce outer padding to give the middle row more width */
#sr-app{padding:12px 6px calc(88px + env(safe-area-inset-bottom))}
.sr-card{background:var(--paper2);border:2px solid var(--edge);border-radius:var(--rad);padding:10px}

/* hero */
.sr-hero{display:flex;gap:12px;align-items:center}
.sr-hero img{width:40vw;max-width:220px;aspect-ratio:4/5;object-fit:cover;border-radius:var(--rad)}
.sr-title{font-size:1.9rem;line-height:1.1;margin:.1rem 0}
.sr-sub{opacity:.8}

/* 2-col grid, equal widths */
.sr-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);align-items:start}
.sr-row>.sr-card{min-width:0;overflow:hidden}
.sr-row .inner{display:block;width:100%}

/* map */
.sr-map{display:grid;grid-template-columns:repeat(3,var(--cell));gap:var(--ingap);justify-content:center}
.sr-cell{width:var(--cell);height:var(--cell);border-radius:12px;background:#f7ecd1;border:2px solid var(--edge)}
.sr-cell.active{outline:3px solid #7a5a33;outline-offset:-4px}

/* compass + Up/Down */
.sr-rose-wrap{display:flex;gap:10px;align-items:center;justify-content:center;max-width:100%;overflow:hidden}
.sr-rose{display:grid;grid-template-columns:repeat(3,var(--cell));grid-auto-rows:var(--cell);gap:var(--ingap)}
.sr-vert{display:flex;flex-direction:column;gap:var(--ingap)}
button{padding:9px 12px;background:var(--btn);border:2px solid var(--btn-edge);border-radius:12px;font-weight:700;box-shadow:0 2px 0 var(--btn-edge)}
.sr-key{width:var(--cell);height:var(--cell);display:flex;align-items:center;justify-content:center}

/* feed with reserved header for the toggle */
.sr-log-wrap{position:relative;margin-top:10px;padding-top:56px}
.sr-toggle{position:absolute;right:12px;top:10px}
.sr-log{overflow:auto;background:var(--paper2);border:2px solid var(--edge);border-radius:12px;padding:8px}
.sr-log-wrap.open .sr-log{height:30vh;max-height:32vh}
.sr-log-wrap.closed .sr-log{height:38px}

/* sticky footer */
.sr-footer{position:fixed;left:0;right:0;bottom:0;z-index:20;
  padding:8px calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
  background:var(--paper2);border-top:2px solid var(--edge);display:flex;gap:8px;align-items:center}
.sr-footer .menu-btn{border-radius:999px;padding:8px 14px}
.sr-footer input{flex:1;height:44px;border-radius:10px;border:2px solid var(--edge);padding:0 10px;background:#fff8ee}

/* modal menu */
.sr-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;z-index:30}
.sr-modal{position:fixed;left:10px;right:10px;bottom:calc(94px + env(safe-area-inset-bottom));z-index:31;background:var(--paper2);border:2px solid var(--edge);border-radius:16px;padding:12px;display:none}
.sr-menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
body.menu-open .sr-modal-bg{display:block} body.menu-open .sr-modal{display:block}
@media (min-width:540px){.sr-hero img{width:200px}}
/* v-bump */
// v-bump 2025-08-12T19:01:29Z
/* === phone-tight layout (fits 360–420px screens) === */
@media (max-width: 430px){
  :root{
    --cell: 40px;      /* smaller direction buttons */
    --ingap: 5px;
  }
  #sr-app{padding:10px 4px calc(86px + env(safe-area-inset-bottom))}
  .sr-card{padding:8px}
  .sr-hero img{width:36vw;max-width:170px}
  .sr-title{font-size:1.7rem}
  .sr-rose-wrap{gap:8px;justify-content:center}
  .sr-key, .sr-rose .sr-key, .sr-vert .sr-key{width:var(--cell);height:var(--cell)}
  button{padding:7px 10px}               /* tighter buttons so Up/Down stay inside */
  .sr-log-wrap.open .sr-log{height:26vh} /* a bit shorter feed to free width */
}
/* extra-tight (older 360px Androids) */
@media (max-width: 380px){
  :root{ --cell: 36px; --ingap: 4px; }
  .sr-hero img{width:34vw;max-width:150px}
  .sr-title{font-size:1.55rem}
}
/* fit-pass 2025-08-12T19:04:09Z */
/* === force compass to fit on small phones === */
@media (max-width: 430px){
  :root{ --cell: 34px; --ingap: 5px; }

  /* give the compass more breathing room */
  .sr-row{ gap:10px }
  .sr-rose-wrap{ width:100%; gap:8px; justify-content:space-between; }
  .sr-rose, .sr-vert{ overflow:visible }
  .sr-rose .sr-key, .sr-vert .sr-key{ width:var(--cell); height:var(--cell) }

  /* shrink paddings so Up/Down never clip */
  .sr-card{ padding:8px }
  .sr-hero img{ width:36vw; max-width:170px }
  .sr-title{ font-size:1.65rem }
}

/* extra tight (<=380px) */
@media (max-width: 380px){
  :root{ --cell: 32px; --ingap: 4px; }
  .sr-title{ font-size:1.5rem }
  .sr-hero img{ width:34vw; max-width:150px }
}
/* phone-fit 2025-08-12T19:06:48Z */