@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Inter:wght@400;700;800&display=swap');
:root{--gold:#d8b86a;--cream:#f7ecd2;--green:#8ce477;--line:rgba(255,255,255,.14)}
*{box-sizing:border-box}
body{margin:0;background:#020303;color:var(--cream);font-family:Inter,sans-serif;display:flex;justify-content:center}
button,input,textarea{font:inherit}
button{cursor:pointer;border:2px solid var(--line);background:linear-gradient(#ffffff12,#0006);color:var(--gold);border-radius:16px;min-height:58px;font-family:Oswald;text-transform:uppercase;letter-spacing:.08em;font-size:20px}
.app{position:relative;width:min(100vw,430px);min-height:100dvh;padding:12px 16px 108px;background:linear-gradient(#102017,#020303);overflow:hidden}
.app:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#fff1 0 1px,transparent 1px 5px);opacity:.18}
header,.screen,nav,#toast{position:relative;z-index:1}
header{display:grid;grid-template-columns:68px 1fr 68px;gap:8px;margin-bottom:14px;align-items:center}
.round{background:transparent;border:0;min-height:70px}
.round span{display:block;font-size:14px}
.brand{text-align:center}
.tower{font-size:40px;color:var(--gold)}
.brand small{display:block;color:#ffe6a3;font-family:Oswald}
h1{font-family:Oswald;margin:0;font-size:48px;line-height:.86}
.brand p{margin:10px 0 0;color:var(--gold);font-family:Oswald;letter-spacing:.14em;font-size:14px}
.screen{display:none}.screen.active{display:block}
.card{background:linear-gradient(#151916e8,#070908f0);border:1px solid var(--line);border-radius:23px;box-shadow:0 18px 44px #000a,inset 0 1px #ffffff14;padding:18px;margin-bottom:16px}
h2{margin:0 0 16px;text-align:center;color:var(--gold);font-family:Oswald;text-transform:uppercase;letter-spacing:.14em;font-size:30px}
h3{color:var(--gold);font-family:Oswald;text-transform:uppercase;letter-spacing:.1em}
p{text-align:center;color:#ddd5c4;line-height:1.4}
.wire-id,.big{margin:16px 0;padding:18px;border-radius:18px;background:#0008;text-align:center;color:white;font-family:Oswald;font-size:38px;letter-spacing:.05em}
input,textarea{width:100%;border-radius:16px;border:2px solid #d8b86a44;background:#0008;color:white;padding:14px;font-size:20px;outline:none;margin:10px 0}
textarea{min-height:110px;resize:none}
.gold{background:linear-gradient(#f4d883,#cda24a);color:#070807}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center;margin-top:12px}
.morse{min-height:72px;padding:16px;border-radius:16px;background:#0007;color:white;font-size:22px;line-height:1.5;overflow-wrap:anywhere}
.list{display:grid;gap:10px;margin-top:12px}
.friend,.tape{border:1px solid var(--line);background:#0006;border-radius:16px;padding:14px}
.friend b,.tape b{display:block;color:#ffe6a3;font-size:22px;font-family:Oswald}
.friend span,.tape span{display:block;color:#ddd5c4;margin-top:4px}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#d94f3d;color:#fff;font-size:13px;font-family:Inter;font-weight:800;margin-left:6px}
.hidden{display:none!important}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:16px}
.grid button{min-height:44px;font-size:20px}
nav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100vw,430px);display:grid;grid-template-columns:repeat(4,1fr);padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:linear-gradient(#101210ee,#030404);border-top:1px solid #fff2}
nav button{border:0;background:transparent;min-height:70px;border-radius:14px;font-size:22px}
nav button span{display:block;font-size:13px}
nav .active{background:#fff1}
#toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%) translateY(18px);width:min(88vw,360px);padding:14px 18px;border-radius:16px;background:#0e1712;border:1px solid #d8b86a66;text-align:center;opacity:0;transition:.24s}
#toast.show{opacity:1;transform:translateX(-50%)}
@media(max-width:390px){h1{font-size:40px}.grid{grid-template-columns:repeat(5,1fr)}button{font-size:18px}.row{grid-template-columns:1fr}}

.nav-icon{
  width:28px;
  height:28px;
  display:block;
  margin:0 auto 4px;
}

.qualified{
  color:#8ce477!important;
}
.cert-pass{
  border-color:#8ce477!important;
  box-shadow:0 0 0 1px rgba(140,228,119,.3);
}

.tower-img{
  width:54px;
  height:54px;
  display:block;
  margin:0 auto 4px;
}

#solo .row{
  margin-bottom:10px;
}

.academy-pass{
  border-color:#8ce477!important;
  box-shadow:0 0 0 1px rgba(140,228,119,.35);
}
.academy-locked{
  opacity:.55;
  filter:grayscale(.4);
}


.academy-keyboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 14px;
  margin: 16px 0;
}

.academy-key {
  min-height: 82px;
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

@media (min-width: 460px) {
  .academy-keyboard {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }
}

#academyBackspaceBtn,
#academyClearBtn {
  min-height: 72px;
  font-size: 1.25rem;
}


.academy-submit-main {
  display: block;
  width: 100%;
  min-height: 70px;
  margin: 16px auto 10px auto;
  font-size: 1.35rem;
  text-align: center;
}

#academyResetScoreBtn {
  display: block;
  width: 100%;
  margin: 8px auto 14px auto;
}


/* ACADEMY HUB CLEAN SPLIT */
#academy #academyPlayBtn,
#academy #academyNewBtn,
#academy #academyAutoBtn,
#academy #academyPrompt,
#academy #academyAnswer,
#academy #academyKeyboard,
#academy #academySubmitBtn,
#academy #academyResetScoreBtn,
#academy #academySpeakAnswerBtn,
#academy #academyReadBtn,
#academy #academyBigTapBtn {
  display: none !important;
}

#academy #academyStartDrillBtn,
#academy #academyCertBtn {
  width: 100%;
  min-height: 64px;
  margin-top: 12px;
  text-align: center;
}

#academy .card {
  padding-bottom: 96px;
}

#academyDrill .card {
  padding-bottom: 96px;
}

/* HOME BUTTON POLISH */
#home .card {
  text-align: center;
}

#home .card button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44%;
  margin: 6px;
  text-align: center;
}

#home .card button.gold,
#copyCodeBtn {
  min-width: 70%;
}

#home .wire-id,
#home #connectionStatus {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* CERTIFICATE STATUS PAGE CLEANUP */
#operator #certPrompt,
#operator #certTimer,
#operator #certOptions,
#operator #certAnswer,
#operator #certSubmitBtn {
  display: none !important;
}

#goAcademyFromCertBtn {
  width: 100%;
  min-height: 64px;
  margin-top: 16px;
}


/* HOME_CLEANUP_AUDIO_PASS */
#home #myWireId,
#home #qualifiedBadge,
#home #copyCodeBtn,
#home #copyFriendCodeBtn,
#home button[data-go="friends"],
#home button[data-go="operator"],
#home button[data-go="speed"],
#home button[data-go="solo"],
#home button[data-go="certificate"],
#home button[data-go="privacy"],
#home button[data-go="installHelp"],
#home #audioUnlockBtn,
#home #spokenGuidanceBtn{
  display:none!important;
}

.home-clean-actions{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:22px;
}

#friendsWireCode{
  margin:14px 0;
}

#morseHistory .morse{
  text-align:left;
  line-height:1.45;
}


/* CONNECTION_PANEL_POLISH */
.connection-panel{
  margin:18px auto;
  padding:14px 18px;
  border:1px solid rgba(230,190,105,.35);
  border-radius:18px;
  background:rgba(0,0,0,.35);
  color:#f5e6c8;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  font-size:1rem;
  letter-spacing:.04em;
}

.signal-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#e8bf68;
  box-shadow:0 0 16px rgba(232,191,104,.9);
  animation:pulseSignal 1.4s infinite;
}

@keyframes pulseSignal{
  0%{opacity:.35; transform:scale(.85);}
  50%{opacity:1; transform:scale(1.15);}
  100%{opacity:.35; transform:scale(.85);}
}

/* ROADMAP CLEANUP PASS - 5 TAB MOBILE NAV */
.app{padding-bottom:116px;}
header{grid-template-columns:68px 1fr 68px;}
nav{grid-template-columns:repeat(5,1fr);gap:2px;}
nav button{min-height:66px;font-size:20px;padding:6px 2px;opacity:.76;}
nav button span{font-size:11px;letter-spacing:.02em;}
nav .active{opacity:1;background:#ffffff14;box-shadow:inset 0 0 0 1px rgba(216,184,106,.28);}
.nav-icon{width:22px;height:22px;margin:0 auto 2px;}
button:disabled{opacity:.45;filter:grayscale(.35);cursor:not-allowed;}
.home-card p{max-width:28rem;margin-left:auto;margin-right:auto;}
.home-clean-actions button{width:100%;min-height:68px;margin:0!important;}
.field-label{display:block;margin:12px 0 0;color:var(--gold);font-family:Oswald;text-transform:uppercase;letter-spacing:.1em;}
.confirm-panel{margin-top:14px;padding:14px;border:1px solid rgba(216,184,106,.28);border-radius:18px;background:rgba(0,0,0,.28);}
.lesson-flow{display:grid;gap:10px;margin:16px 0;}
.lesson-flow div{padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(0,0,0,.28);}
.lesson-flow b{display:block;color:#ffe6a3;font-family:Oswald;text-transform:uppercase;letter-spacing:.08em;}
.lesson-flow span{display:block;color:#ddd5c4;margin-top:4px;line-height:1.35;}
.academy-hub button,.lobby-list button,#soundMenu button,#operator>button{width:100%;}
.lobby-list{display:grid;gap:12px;margin-top:18px;}
.timeline{display:grid;gap:10px;margin:18px 0;}
.timeline details{border:1px solid rgba(216,184,106,.25);border-radius:16px;background:rgba(0,0,0,.32);padding:12px 14px;}
.timeline summary{cursor:pointer;color:#ffe6a3;font-family:Oswald;text-transform:uppercase;letter-spacing:.08em;font-size:1.1rem;}
.timeline p{text-align:left;margin:10px 0 0;}
#friendsWireCode{font-size:30px;}
@media(max-width:390px){nav button{font-size:18px;min-height:62px}nav button span{font-size:10px}h1{font-size:38px}.app{padding-left:12px;padding-right:12px}}


/* Teaching phase cleanup */
#academyTeach #teachLetterBox {
  font-size: 56px;
  letter-spacing: 4px;
  margin: 18px 0 8px;
}

#academyTeach #teachMorseBox {
  font-size: 34px;
  margin-bottom: 18px;
}

#academyTeach button {
  width: 100%;
  min-height: 56px;
  margin-top: 10px;
}

/* Remove old accessibility buttons from guided practice for now */
#drillSpeakBtn,
#drillReadBtn {
  display: none !important;
}

/* Final mobile bottom nav: force 5 tabs onto one row */
.bottom-nav,
#bottomNav,
nav.bottom,
.app-tabs {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.bottom-nav button,
#bottomNav button,
nav.bottom button,
.app-tabs button {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 8px 2px !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

.bottom-nav button span,
#bottomNav button span,
nav.bottom button span,
.app-tabs button span {
  display: block !important;
  font-size: 8px !important;
  letter-spacing: 0.4px !important;
}

/* Keep the whole app above the fixed nav */
body {
  padding-bottom: 78px !important;
}

/* Hard-hide old drill accessibility buttons if cached HTML still has them */
#drillSpeakBtn,
#drillReadBtn {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}



/* Known Operators remove button */
.friend-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: stretch;
  margin-top: 10px;
}

.friend-row .friend-open {
  margin-top: 0 !important;
  text-align: left;
}

.friend-delete {
  width: auto !important;
  min-width: 92px;
  margin-top: 0 !important;
  padding: 10px 12px !important;
  border-color: rgba(255, 120, 120, .55) !important;
  color: #ffaaaa !important;
  background: rgba(80, 20, 20, .35) !important;
  font-size: 11px !important;
  letter-spacing: 1.2px !important;
}


/* Global button press feedback */
button.ui-click-feedback,
a.ui-click-feedback,
.button-link.ui-click-feedback,
[data-go].ui-click-feedback {
  transform: scale(0.985);
  filter: brightness(1.12);
  transition: transform 70ms ease, filter 70ms ease;
}

button,
a,
.button-link,
[data-go] {
  -webkit-tap-highlight-color: transparent;
}

/* Strong mobile button feedback */
button:active,
.button-link:active,
a.round:active,
[data-go]:active {
  transform: scale(0.965) !important;
  filter: brightness(1.22) !important;
  box-shadow: 0 0 18px rgba(242,207,121,.35) !important;
}

button,
.button-link,
a.round,
[data-go] {
  transition: transform 70ms ease, filter 70ms ease, box-shadow 70ms ease !important;
  -webkit-tap-highlight-color: rgba(242,207,121,.28) !important;
}


/* Forced mobile button feedback */
.mobile-touch-flash {
  transform: scale(0.94) !important;
  filter: brightness(1.35) saturate(1.2) !important;
  box-shadow:
    0 0 0 3px rgba(242,207,121,.55),
    0 0 24px rgba(242,207,121,.65) !important;
  outline: 2px solid rgba(242,207,121,.75) !important;
}

button,
a,
.button-link,
[data-go] {
  -webkit-tap-highlight-color: rgba(242,207,121,.35) !important;
}


/* Hide removed Big Tap Morse Key */
#bigTapMorseKey,
.removedBigTapMorseKey,
.big-tap-morse-key {
  display: none !important;
}


/* Remove old Big Tap Morse Key from Academy/Certificate drill */
button[id*="big" i],
button[id*="tap" i],
button[class*="big" i],
button[class*="tap" i] {
}

/* Specific old button fallback handled by JS text removal */