:root { --o: #f28a1c; --ink: #e9e6df; --dim: #8d8a84; --bg: #07080b; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 14px/1.45 system-ui, "Segoe UI", sans-serif; overflow: hidden; }
#game { position: absolute; display: block; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }

#hud { position: fixed; inset: 0; pointer-events: none; }
#hud > div { position: absolute; }
.h-left { top: 10px; left: 14px; display: flex; gap: 12px; align-items: center; background: rgba(0,0,0,.55); padding: 6px 14px; border-radius: 10px; }
#h-clock { font: 800 30px/1 ui-monospace, "SF Mono", Consolas, monospace; color: #ffd27a; letter-spacing: 1px; text-shadow: 0 0 12px rgba(255,190,80,.4); }
#h-title { font-weight: 700; }
#h-left { color: var(--dim); font-size: 12px; }
.h-mid { top: 14px; left: 50%; transform: translateX(-50%); width: 300px; text-align: center; background: rgba(0,0,0,.55); padding: 8px 12px; border-radius: 10px; font-size: 12px; }
.bar { height: 8px; background: #26282e; border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
#h-bar { height: 100%; width: 0; background: linear-gradient(90deg, #f28a1c, #ffd27a); transition: width .3s; }
.h-right { top: 14px; right: 60px; display: flex; gap: 12px; font-weight: 700; }
.h-right span:not(:empty) { background: rgba(0,0,0,.55); padding: 8px 12px; border-radius: 10px; }

#cards { bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; pointer-events: auto; }
.card { display: flex; gap: 10px; align-items: center; width: 370px; box-sizing: border-box; overflow: hidden; text-align: left; background: rgba(10,11,15,.92); border: 2px solid #383d48; border-radius: 14px; padding: 8px 12px 8px 6px; transition: all .15s; opacity: .8; }
.card.active { opacity: 1; border-color: var(--o); box-shadow: 0 0 0 2px var(--o), 0 8px 28px rgba(242,138,28,.35); }
.card.droid.active { border-color: #ffd27a; box-shadow: 0 0 0 2px #ffd27a, 0 8px 28px rgba(255,210,122,.3); }
.card.biggy.active { border-color: #7d93ab; box-shadow: 0 0 0 2px #7d93ab, 0 8px 28px rgba(125,147,171,.35); }
.card canvas { width: 62px; height: 62px; }
.card .txt { display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; flex: 1; min-width: 0; }
/* text that changes while playing stays on one line of fixed width, so nothing on the card moves */
.card .txt > b, .card .txt > i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .mood { display: inline-block; min-width: 100px; font-size: 15px; font-weight: 700; }
.card b { font-size: 15px; color: #ffffff; } .card i { color: #ffa23a; font-style: normal; font-size: 12.5px; font-weight: 600; } .card span { color: #d0ccc4; }

#toasts { position: fixed; bottom: calc(var(--cardsH, 136px) + 8px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; z-index: 10; } /* above the robot cards, not over the rooms */
.toast { background: rgba(8,9,14,.95); border: 2px solid #555; padding: 10px 20px; border-radius: 22px; font-size: 15.5px; font-weight: 600; transition: opacity .35s; text-shadow: 0 1px 3px rgba(0,0,0,.9); text-align: center; }
.toast.good { border-color: #ffd166; color: #fff1b8; background: rgba(18,16,10,.96); } .toast.bad { border-color: #ff6b6b; color: #ffd6d6; background: rgba(22,10,10,.96); }
.toast.out { opacity: 0; }
#h-floor { position: absolute; top: 60px; right: 12px; pointer-events: auto; background: rgba(0,0,0,.6); border: 1px solid #3a3e48; border-radius: 10px; padding: 6px 12px; font-weight: 700; font-size: 12px; }
#h-floor:hover { border-color: var(--o); }
#h-ai { position: absolute; top: 60px; right: 100px; pointer-events: auto; background: rgba(0,0,0,.6); border: 1px solid #3a3e48; border-radius: 10px; padding: 6px 12px; font-weight: 700; font-size: 12px; }
#h-ai:hover { border-color: var(--o); }
/* watching (the AI runs all three): what to do, where the 🤖 AI button usually is */
#h-watch { position: absolute; top: 60px; right: 100px; background: rgba(0,0,0,.6); border: 1px solid rgba(123,220,107,.5); color: #7bdc6b; border-radius: 10px; padding: 6px 12px; font-weight: 700; font-size: 12px; }
/* the pace of the day: under the floor button (on a touch screen, beside ⏸) */
#h-speed { position: absolute; top: 104px; right: 12px; pointer-events: auto; background: rgba(0,0,0,.6); border: 1px solid #3a3e48; border-radius: 10px; padding: 6px 12px; font-weight: 700; font-size: 12px; }
#h-speed:hover { border-color: var(--o); } #h-speed.fast { border-color: #ffd27a; color: #ffd27a; }
body.touch #h-speed { right: 64px; height: 36px; }
.hook { font-size: 22px; line-height: 1.35; margin: 4px 0 12px; color: #f3e6d4; font-weight: 600; }
.hook b { color: var(--o); }
/* touch screens: a virtual stick and a hold-E button, above the robot cards */
#touch { position: absolute; inset: 0; pointer-events: none; }
#stick { position: absolute; left: 22px; bottom: calc(var(--cardsH, 136px) + 18px); width: 124px; height: 124px; border-radius: 50%; background: rgba(255,255,255,.06); border: 2px solid rgba(255,255,255,.2); pointer-events: auto; touch-action: none; }
#knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(242,138,28,.55); border: 2px solid rgba(255,210,122,.85); }
#btn-e { position: absolute; right: 22px; bottom: calc(var(--cardsH, 136px) + 26px); width: 96px; height: 96px; border-radius: 50%; background: rgba(123,220,107,.16); border: 2px solid rgba(123,220,107,.75); font-size: 30px; font-weight: 800; pointer-events: auto; touch-action: none; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; user-select: none; -webkit-user-select: none; }
#btn-e small { font-size: 11px; font-weight: 600; margin-top: 3px; }
#touch.watching #stick, #touch.watching #btn-e { display: none; } /* watching: nothing to steer, more room for the map */
#btn-e:active { background: rgba(123,220,107,.4); }
#btn-pause { position: absolute; top: 104px; right: 12px; pointer-events: auto; background: rgba(0,0,0,.6); border: 1px solid #3a3e48; border-radius: 10px; width: 44px; height: 36px; }
#rotate { display: none; }
@media (orientation: portrait) { body.touch:not(.rotate-ok) #hud:not(.hidden) ~ #rotate { display: flex; flex-direction: column; align-items: center; gap: 8px; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(80vw, 280px); background: rgba(8,9,14,.95); border: 1px solid #ffd27a; color: #fff1b8; padding: 16px 18px; border-radius: 16px; font-size: 15px; font-weight: 600; text-align: center; z-index: 20; box-shadow: 0 10px 40px rgba(0,0,0,.6); } }
#rotate .phone { font-size: 34px; animation: tilt 1.6s ease-in-out infinite; }
#rotate small { font-size: 11px; font-weight: 500; color: #b9b4a8; }
@keyframes tilt { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
/* smaller screens: compact cards, and a simpler top bar */
@media (max-width: 1150px), (max-height: 620px) {
  #h-title { max-width: 150px; overflow: hidden; text-overflow: ellipsis; } .h-mid { width: 200px; } /* the top bar never overlaps itself */
  .card { width: calc(33vw - 12px); max-width: 300px; height: auto; padding: 6px 8px 6px 4px; }
  .card canvas { width: 44px; height: 44px; }
}
@media (max-width: 760px), (max-height: 480px) {
  #h-stack, .h-right, .card .txt > i { display: none; }
  .h-mid { left: auto; right: 60px; transform: none; width: 150px; padding: 6px 8px; }
  #h-clock { font-size: 22px; } #h-title { max-width: 130px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .card b { font-size: 13px; } .card .mood { display: none; }
  .hook { font-size: 18px; }
  .toast { font-size: 12.5px; padding: 6px 12px; max-width: 62vw; }
}
#h-stack { position: absolute; top: 64px; left: 14px; width: 200px; height: 142px; pointer-events: auto; cursor: pointer; border-radius: 10px; }
#mute { position: fixed; top: 12px; right: 12px; background: rgba(0,0,0,.55); border: 0; border-radius: 10px; width: 38px; height: 38px; font-size: 16px; z-index: 5; }

.overlay { position: fixed; inset: 0; display: grid; place-items: start center; background: radial-gradient(ellipse at center, rgba(7,8,11,.55), rgba(7,8,11,.92)); z-index: 4; overflow: auto; padding: 20px; }
.overlay > .panel { margin: auto 0; } /* centred when it fits, from the top when it's taller than the screen */
.panel { max-width: 560px; background: rgba(14,15,20,.92); border: 1px solid #2a2d35; border-radius: 16px; padding: 28px 32px; box-shadow: 0 20px 80px rgba(0,0,0,.6); text-align: center; }
.panel.wide { max-width: 820px; }
.kicker { color: var(--o); font-size: 11px; letter-spacing: 2.5px; font-weight: 700; }
h1 { font: 900 64px/1 "Arial Black", system-ui; margin: 8px 0 10px; letter-spacing: -1px; background: linear-gradient(180deg, #ffd27a, #f28a1c); -webkit-background-clip: text; background-clip: text; color: transparent; }
h2 { margin: 6px 0 12px; font-size: 26px; }
h3 { margin: 18px 0 8px; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); }
.lead { color: #c9c5bd; max-width: 640px; margin: 0 auto; }
.lead.spaced > span { display: block; margin: 10px 0; }
.opt { display: block; margin: 10px 0 0; font-size: 13.5px; color: #d8d3c9; cursor: pointer; } .opt small { color: #9a968e; }
.opt input { accent-color: var(--o); vertical-align: -2px; margin-right: 6px; }
.touchkeys { display: none; } body.touch .touchkeys { display: block; } body.touch .kbkeys { display: none; } /* a phone gets its own how-to */
.pick .aihow { display: block; margin-top: 8px; } /* how to take over, on its own line */ /* the three lines of the title screen, with some air between them */
.lead .yourjob { color: #f3e6d4; font-weight: 600; } .lead .yourjob b { color: var(--o); font-weight: 800; } /* what the player does: the line that matters */
#hero { display: flex; justify-content: center; gap: 10px; margin: 10px 0 2px; }
#hero canvas { width: 110px; height: 110px; }
.primary, .panel button { background: #22252c; border: 1px solid #3a3e48; border-radius: 10px; padding: 10px 22px; margin: 4px; font-weight: 700; }
.panel .primary, .primary { background: var(--o); border-color: var(--o); color: #1a0e02; }
.primary:hover { filter: brightness(1.1); }
#r-rows small { color: #8d8a84; font-size: 10px; }
/* the three title steps share one cell: the panel keeps the size of the biggest, so it never jumps between steps */
/* the start and end screens cover the whole screen: nothing of the game shows behind (the pause menu still does) */
#title, #results, #week { background: radial-gradient(ellipse at center, #12141b, var(--bg) 75%); }
#title .panel, #results .panel, #week .panel { background: none; border: 0; box-shadow: none; }
#title .panel { display: grid; }
#title .step { grid-area: 1 / 1; visibility: hidden; align-self: center; } #title .step.on { visibility: visible; }
/* on a phone the steps are very different heights (the three robots stack up): one size for all would mean scrolling
   past empty space on the welcome step, so there each step keeps its own height (they are all full width anyway) */
@media (max-width: 560px), (max-height: 560px) {
  #title .panel { display: block; }
  #title .step { display: none; visibility: visible; } #title .step.on { display: block; }
}
#title h2 { margin: 4px 0 6px; }
.pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0; }
.pick button { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 12px 10px; margin: 0; border-radius: 14px; background: #16181d; border: 1px solid #33363f; font-weight: 400; }
.pick button:hover { border-color: #5a5e68; }
.pick .all-ai { grid-column: 1 / -1; gap: 4px; padding: 10px 14px; } /* laid out like the robot cards: title, then text */
.pick button.on { border-color: var(--rc, var(--o)); box-shadow: 0 0 0 2px var(--rc, var(--o)), 0 8px 26px color-mix(in srgb, var(--rc, var(--o)) 25%, transparent); }
.pick canvas { width: 96px; height: 96px; }
.pick b { font-size: 15px; } .pick .role { color: var(--rc, var(--o)); font-size: 12px; font-weight: 700; }
.pick .job { color: #d8d3c9; font-size: 12px; flex: 1; } .pick .hate { color: #ff9f9f; font-size: 11.5px; min-height: 2.9em; } /* the stress lines line up at the bottom of every card */
.pick .all-ai .job { flex: none; max-width: 640px; }
.days { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 6px 0 2px; }
.days button { display: flex; flex-direction: column; align-items: center; min-width: 96px; padding: 6px 10px; margin: 0; border-radius: 9px; background: #1a1c21; border: 1px solid #33363f; }
.days button b { font-size: 12px; } .days button small { font-size: 9.5px; color: #9a968e; }
.days button.on { border-color: var(--o); box-shadow: 0 0 0 1px var(--o); }
.days button:disabled { opacity: .45; cursor: not-allowed; }
.keys { color: var(--dim); font-size: 11.5px; margin: 12px 0 0; }
#r-stars { font-size: 44px; color: #ffd166; letter-spacing: 6px; text-shadow: 0 0 20px rgba(255,209,102,.4); }
.confetti { position: absolute; pointer-events: none; border-radius: 2px; z-index: 10; opacity: 0.9; }
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(80vh) rotate(720deg); opacity: 0; }
}
#r-rows { margin: 8px auto 16px; border-collapse: collapse; min-width: 380px; }
#r-rows td { padding: 6px 10px; border-bottom: 1px solid #25272e; text-align: left; }
#r-rows td:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; }

/* Overclocked */
.h-right { gap: 8px; }
.h-right span { background: rgba(0,0,0,.55); padding: 8px 12px; border-radius: 10px; font-size: 14px; min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
#h-left, #h-sat { font-variant-numeric: tabular-nums; }
#h-title { white-space: nowrap; }
.card .calm { display: flex; align-items: center; gap: 5px; } .card .calm small { font-size: 9px; color: #8d8a84; text-transform: uppercase; letter-spacing: .05em; }
.card .pat { flex: 1; height: 6px; background: #26282e; border-radius: 3px; overflow: hidden; margin: 3px 0 2px; }
.card .pat div { height: 100%; width: 100%; transition: width .2s, background .2s; }
.card .mood { font-style: normal; font-size: 12px; margin-left: 4px; }
.card { position: relative; }
.card .follow { position: absolute; top: 4px; right: 6px; font-size: 13px; line-height: 1; padding: 3px 6px; border-radius: 8px; background: rgba(255,255,255,.08); opacity: .7; cursor: pointer; }
.card .follow:hover { opacity: 1; }
.card.following .follow { opacity: 1; background: #3a6ea8; box-shadow: 0 0 0 1px #9fdcff; }
.card .who { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .04em; padding: 1px 5px; border-radius: 4px; margin-right: 6px; background: #3a3d46; color: #cfd3da; vertical-align: 1px; }
.card.active .who { background: var(--o); color: #1a1206; }
.card.rogue .who { background: #ff7ad9; color: #2a0b22; }
.card.rogue { opacity: 1; border-color: #ff7ad9; box-shadow: 0 0 0 1px #ff7ad9, 0 0 22px rgba(255,122,217,.4); animation: rogueglow .8s infinite alternate; }
.card.danger { border-color: #ff5a4a; box-shadow: 0 0 0 1px #ff5a4a, 0 0 18px rgba(255,90,74,.4); animation: dangerglow .6s infinite alternate; }
@keyframes dangerglow { from { opacity: .7; } to { opacity: 1; border-color: #ff3a2a; } }
@keyframes rogueglow { from { box-shadow: 0 0 0 1px #ff7ad9, 0 0 8px rgba(255,122,217,.25); } to { box-shadow: 0 0 0 1px #ff7ad9, 0 0 26px rgba(255,122,217,.6); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
.rules { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 14px 0 4px; font-size: 12.5px; color: #d8d3c9; }
.goal { color: #ffd27a; margin: 10px 0 14px; }
.card .task { text-decoration: none; color: #b5b1a9; font-style: italic; }

/* phones held upright and very narrow windows: the menus fit the width, no sideways scrolling */
@media (max-width: 560px) {
  .overlay { padding: 10px; place-items: start center; }
  .panel, .panel.wide { width: 100%; padding: 18px 14px; }
  h1 { font-size: clamp(30px, 11vw, 48px); letter-spacing: 0; }
  .hook { font-size: 16px; }
  #hero { gap: 2px; } #hero canvas { width: min(76px, 26vw); height: min(76px, 26vw); }
  .panel, .panel.wide { min-width: 0; }
  .pick { grid-template-columns: 1fr; }
  .pick .all-ai { flex-direction: column; gap: 6px; text-align: center; } /* like the three robot cards above it */
  .rules { gap: 8px; }
}

/* phones held upright: the day and the satisfaction bar on two lines, the messages below them */
@media (max-width: 520px) {
  .h-mid { top: 64px; left: 14px; right: auto; width: min(200px, 48vw); }
  /* a phone held upright: three taller cards, the robot on top, a big energy bar across the whole card */
  #cards { left: 8px; right: 8px; transform: none; gap: 6px; }
  .card { flex: 1 1 0; width: auto; max-width: none; flex-direction: column; align-items: stretch; gap: 3px; padding: 6px 6px 8px; }
  .card .pic { display: flex; justify-content: center; }
  .card canvas { width: 38px; height: 38px; }
  .card .txt > b { text-align: center; font-size: 12px; }
  .card .who { display: block; width: fit-content; margin: 0 auto 3px; }
  .card .calm small { display: none; }
  .card .pat { height: 10px; border-radius: 5px; margin: 2px 0 0; }
  .card .follow { top: 3px; right: 3px; padding: 2px 4px; font-size: 12px; }
  #h-ai, #h-watch { right: 96px; }
}
/* the results on a phone: the table fits the screen (it had a 380px minimum and the numbers were cut off) */
@media (max-width: 560px) {
  #r-rows { min-width: 0; width: 100%; font-size: 13px; }
  #r-rows td { padding: 6px 4px; }
  #r-rows td:nth-child(2) { white-space: nowrap; padding-left: 8px; }
}

/* the results screen: the moment of the day, the three robots, then the numbers */
.moment { font-size: 15px; font-weight: 600; color: #fff1b8; margin: 6px 0 10px; line-height: 1.5; }
#r-robots { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 4px 0 10px; }
.rrob { display: flex; align-items: center; gap: 6px; text-align: left; }
.rrob canvas { width: 44px; height: 44px; }
.rrob b { font-size: 13px; } .rrob small { font-size: 11px; color: #a9a59c; }
.rbar { width: 90px; height: 7px; background: #26282e; border-radius: 4px; overflow: hidden; margin: 3px 0 2px; }
.rbar div { height: 100%; }
.newbest { font-size: 13px; color: #7bdc6b; font-weight: 800; letter-spacing: 0; vertical-align: middle; }
.days .dstars { display: block; font-style: normal; color: #ffd27a; font-size: 11px; letter-spacing: 1px; }
/* the results screen: one column, the next step first */
.row.stack { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.row.stack button { width: min(320px, 100%); margin: 0; }

/* what the next star needs, the week's total, and the finale after Friday */
.next { font-size: 12.5px; color: #cfcac0; margin: 2px 0 6px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.next .met { color: #7bdc6b; } .next .miss { color: #ffb08a; } .next small { color: #9a968e; }
.next .tip { color: #ffd27a; max-width: 440px; }
.weekline { margin: 0 0 4px; color: #ffd27a; font-size: 13px; }
.panel .linkbtn { background: none; border: 0; border-radius: 0; color: #8d8a84; font-size: 12px; font-weight: 400; text-decoration: underline; cursor: pointer; margin: 0; padding: 0 2px; }
.panel .linkbtn:hover { color: #cfcac0; }
.panel .linkbtn.armed { color: #ff9f7a; font-weight: 700; }
.resetline { margin: 22px 0 0; min-height: 18px; font-size: 12px; color: #7bdc6b; } /* well apart from Back / Open the doors: a rare action */
.week { margin: 6px auto 12px; padding: 12px 14px; border: 1px solid #3a3325; border-radius: 12px; background: rgba(255,210,122,.05); max-width: 480px; }
.week h3 { margin: 0 0 8px; font-size: 15px; color: #ffd27a; }
.wdays { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.wdays span { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: #ffd166; letter-spacing: 1px; }
.wdays b { color: #cfcac0; font-size: 11px; letter-spacing: 0; }
.wrobs { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.wrob { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.wrob canvas { width: 36px; height: 36px; flex: none; }
.wend { margin: 10px 0 8px; font-size: 13px; color: #fff1b8; }

/* the start and end screens: bigger, easier-to-read text, the same size for the same kind of text on every screen
   (a phone keeps a bit less so it still fits) */
#title .lead, #results .moment { font-size: 16px; }
#title .rules, #results #r-rows td { font-size: 14.5px; }
#title .goal, #results .goal, #week .goal { font-size: 15.5px; }
#title .pick b { font-size: 17px; } #title .pick .role { font-size: 13.5px; }
#title .pick .job { font-size: 14px; } #title .pick .hate { font-size: 13px; }
#title .weekline { font-size: 14.5px; }
#title .days button b { font-size: 13.5px; } #title .days button small { font-size: 11px; }
#title .keys { font-size: 12.5px; }
#title .row button, #t-start, #results .row button, #week .row button { font-size: 16px; }
#title .resetline, #title .panel .linkbtn { font-size: 13px; }
@media (max-width: 560px) {
  #title .lead, #title .goal, #results .moment, #results .goal, #week .goal { font-size: 15px; }
  #title .rules, #title .pick .job, #results #r-rows td { font-size: 13.5px; }
  #title .pick .hate { font-size: 12.5px; }
}
/* the five days: one row on a computer or a tablet, one under the other on a phone */
#title .days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
#title .days button { min-width: 0; justify-content: center; }
#title .days button small { line-height: 1.25; }
@media (max-width: 560px) { #title .days { grid-template-columns: 1fr; } }
/* on a phone, the step buttons too: one under the other, full width, the main one first */
@media (max-width: 560px) {
  #title .row { display: flex; flex-direction: column-reverse; align-items: stretch; gap: 8px; margin-top: 8px; }
  #title .row button { width: 100%; margin: 0; }
}