/* ============ 05 · GO ANALOG — the handheld cartridge hub ============ */

.go-grid{display:grid;grid-template-columns:1fr auto;gap:4rem;align-items:end;width:100%}
@media(max-width:980px){.go-grid{grid-template-columns:1fr}}

.handheld{
  width:340px;max-width:88vw;background:linear-gradient(175deg,#EFE8D5,#DBD2B8);
  border-radius:14px 14px 52px 14px;padding:22px 22px 30px;
  box-shadow:0 24px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.5);
  transform:rotate(-2deg);user-select:none;
}
.handheld:focus-visible{outline:2px solid var(--amber);outline-offset:6px}
.handheld .bezel-shell{background:#4a4638;border-radius:10px 10px 34px 10px;padding:16px 26px 20px;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.6)}
.handheld .bz-label{display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:.5rem;letter-spacing:.18em;color:#B7AE93;
  text-transform:uppercase;margin-bottom:8px}
.handheld .bz-label .pwr{width:6px;height:6px;border-radius:50%;background:var(--alert);
  box-shadow:0 0 6px rgba(200,69,47,.8)}
#lcd{display:block;width:100%;aspect-ratio:10/9;background:var(--lcd3);border-radius:3px;
  image-rendering:pixelated;box-shadow:inset 0 0 14px rgba(15,56,15,.35)}
.handheld .brand{text-align:center;font-family:var(--serif);font-style:italic;font-weight:500;
  color:#5B5648;font-size:.9rem;margin:12px 0 4px;letter-spacing:.02em}

/* context line — real link, swapped per mode */
.handheld .ctx{text-align:center;min-height:1.5em;margin-bottom:8px}
.handheld .ctx a{
  font-family:var(--mono);font-size:.5rem;letter-spacing:.14em;text-transform:uppercase;
  color:#8a8266;text-decoration:none;border-bottom:1px solid transparent;transition:all .3s}
.handheld .ctx a:hover{color:var(--amber-deep);border-color:var(--amber-deep)}

.controls{display:flex;justify-content:space-between;align-items:center;padding:0 4px}
.dpad{position:relative;width:84px;height:84px}
.dpad button{position:absolute;width:28px;height:28px;background:#3B372B;border:none;
  border-radius:4px;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.35)}
.dpad button:active{transform:translateY(1px);box-shadow:none}
.dpad .u{left:28px;top:0}.dpad .d{left:28px;bottom:0}.dpad .l{left:0;top:28px}.dpad .r{right:0;top:28px}
.dpad .c{left:28px;top:28px;pointer-events:none;box-shadow:none;position:absolute;width:28px;height:28px;background:#3B372B}
.ab{display:flex;gap:14px;transform:rotate(-18deg)}
.ab button{width:40px;height:40px;border-radius:50%;border:none;background:var(--amber);
  color:var(--void);font-family:var(--mono);font-weight:700;font-size:.7rem;cursor:pointer;
  box-shadow:0 3px 0 var(--amber-deep)}
.ab button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--amber-deep)}
.pills{display:flex;gap:12px;justify-content:center;margin-top:14px;align-items:center}
.pills .pillwrap{display:flex;flex-direction:column;align-items:center;gap:4px}
.pills button{width:52px;height:12px;border-radius:6px;border:none;background:#3B372B;cursor:pointer;
  transform:rotate(-18deg);box-shadow:0 2px 0 rgba(0,0,0,.3)}
.pills button:active{transform:rotate(-18deg) translateY(1px);box-shadow:none}
.pills .pl{font-family:var(--mono);font-size:.44rem;letter-spacing:.12em;color:#5B5648;text-transform:uppercase}
.speaker{position:absolute;right:30px;bottom:26px;display:flex;gap:5px;transform:rotate(-25deg)}
.speaker i{width:4px;height:34px;background:rgba(59,55,43,.5);border-radius:2px}
.handheld{position:relative}

.go-copy .sub{margin-top:1.6rem}

/* the Go Analog note — cut from the same cream plastic as the handheld beside it */
#go h2{font-size:clamp(2rem,3.6vw,3.1rem);max-width:none}
#go .go-copy .sub{margin-top:.9rem;max-width:none}
#go .capture{margin-top:1.4rem;max-width:500px}
#go .console-form,#go .cf-confirm{margin-top:0;border:0;border-radius:14px 14px 14px 44px;
  background:linear-gradient(175deg,#EFE8D5,#DBD2B8);color:var(--ink);
  box-shadow:0 24px 70px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.5)}
#go .console-form{padding:1.2rem 1.5rem 1.7rem}
#go .console-form::after{display:none}
#go .nc-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.5rem;
  letter-spacing:.18em;text-transform:uppercase;color:#8a8266;padding-bottom:.75rem;margin-bottom:.3rem;
  border-bottom:1px solid rgba(59,55,43,.16)}
#go .nc-head .pwr{width:6px;height:6px;border-radius:50%;background:var(--alert);box-shadow:0 0 6px rgba(200,69,47,.8)}
#go .console-form label{color:#5B5648}
#go .console-form label::before{content:none}
#go .console-form input,#go .console-form textarea{background:#F7F2E4;border:1px solid rgba(59,55,43,.24);color:var(--ink);
  caret-color:var(--amber-deep);box-shadow:inset 0 1px 3px rgba(59,55,43,.14)}
#go .console-form input:focus,#go .console-form textarea:focus{border-color:var(--amber-deep)}
#go .console-form ::placeholder{color:rgba(91,86,72,.6)}
#go .console-form .cf-count,#go .console-form .plainair{color:#8a8266}
#go .console-form .plainair:hover{color:var(--amber-deep);border-color:var(--amber-deep)}
#go .console-form .btn.solid:hover{background:transparent;color:var(--amber-deep);border-color:var(--amber-deep)}
#go .console-form .btn[disabled]{opacity:.6;cursor:progress}
#go .cf-prefix{color:#5B5648;margin:.7rem 0 0}
#go .cf-prefix .lamp{color:var(--amber-deep);box-shadow:none}
#go .cf-prefix .cf-clear{border-color:rgba(59,55,43,.3);color:#8a8266}
#go .cf-prefix .cf-clear:hover{color:var(--ink);border-color:var(--ink-soft)}
#go .cf-err{color:#a3391f}
#go .cf-confirm{padding:1.6rem 1.5rem 1.8rem}
#go .cf-confirm .cc-line1{color:#1F7A4D;text-shadow:none}
#go .cf-confirm .cc-line1 .lamp{color:#2E9C63;box-shadow:0 0 5px rgba(46,156,99,.7)}
#go .cf-confirm .cc-line1.warn{color:var(--amber-deep)}
#go .cf-confirm .cc-line1.warn .lamp{color:var(--amber);box-shadow:0 0 5px rgba(224,122,40,.7)}
#go .cf-confirm .cc-line2{color:#5B5648}
#go .cf-confirm .cc-tools a,#go .cf-confirm .cc-tools button{background:none;border:1px solid rgba(59,55,43,.3);color:#5B5648;
  font:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:none;padding:.5rem .8rem;border-radius:6px;cursor:pointer}
#go .cf-confirm .cc-tools a:hover,#go .cf-confirm .cc-tools button:hover{border-color:var(--amber-deep);color:var(--amber-deep)}
#go .cf-confirm .cc-tools .addr{color:#8a8266}