body { display: flex; flex-direction: column; }

/* ---- top bar ---- */
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px clamp(14px, 3vw, 32px); }
.me { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; z-index: 10; padding: 5px; }
.menu a { display: block; color: var(--ink); text-decoration: none; font: 500 16px var(--body); padding: 9px 10px; }
.menu a:hover, .menu a:focus-visible { background: var(--title-a); color: #fff; }
.menu button { display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
               font: 500 16px var(--body); color: var(--ink); padding: 9px 10px; }
.menu button:hover, .menu button:focus-visible { background: var(--title-a); color: #fff; }

/* ---- one screen: title on the sky, windows over the water ---- */
.desk { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
        padding: clamp(4px, 2vh, 24px) clamp(14px, 3vw, 32px) clamp(16px, 3vh, 32px); }
.title h1 { margin: 0; font: 400 clamp(46px, 8.4vw, 124px)/.9 var(--display); color: #fff; letter-spacing: .01em;
            text-shadow: 4px 4px 0 var(--pink), 8px 8px 0 var(--title-a); }
.title .jp { margin: 10px 0 0; font: 900 clamp(18px, 2.2vw, 30px)/1 var(--jp); color: var(--cyan); letter-spacing: .18em;
             text-shadow: 2px 2px 0 var(--title-a); }
.title .tag { margin: 12px 0 0; font: 500 clamp(16px, 1.5vw, 20px) var(--body); color: #fff; text-shadow: 2px 2px 0 var(--title-a); }

.windows { display: grid; grid-template-columns: 1fr 1.15fr .85fr; gap: clamp(14px, 2vw, 26px); align-items: end; max-width: 1180px; }
.app .win-body { display: grid; gap: 12px; justify-items: start; }
.app p { margin: 0; font-size: 16px; }
.pic { width: 100%; aspect-ratio: 5 / 3; overflow: hidden; background: var(--ink);
       box-shadow: inset 2px 2px 0 var(--dark), inset -2px -2px 0 var(--hi); padding: 2px; position: relative; }
.pic svg, .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pic.boss img { object-position: 50% 20%; }
.badge { position: absolute; left: 8px; bottom: 8px; background: var(--gold); color: var(--ink); font: 400 14px/1 var(--display);
         padding: 6px 8px; transform: rotate(-3deg); box-shadow: 3px 3px 0 var(--title-a); }

.casino { position: relative; }
.sticker { position: absolute; right: -26px; top: -58px; width: clamp(80px, 8vw, 118px); height: auto; transform: rotate(10deg);
           animation: bob 3s ease-in-out infinite; pointer-events: none; }
@keyframes bob { 50% { transform: rotate(4deg) translateY(-6px); } }

.todo { list-style: none; margin: 0; padding: 10px 12px; width: 100%; background: var(--paper-2);
        box-shadow: inset 2px 2px 0 var(--dark), inset -2px -2px 0 var(--hi); display: grid; gap: 7px; font-size: 16px; }
.todo li { display: flex; justify-content: space-between; gap: 10px; }
.todo li b { font-weight: 500; }
.todo li b::before { content: "☐ "; color: var(--lo); }
.todo li span { color: #6a5aa0; font-size: 14px; white-space: nowrap; }
.small { font-size: 14px !important; color: #5a4c8a; }

/* tiny fish movement: two transforms, that's it */
.fish1 { animation: swim 6s steps(12) infinite alternate; }
.fish2 { animation: swim 8s steps(16) infinite alternate-reverse; }
@keyframes swim { to { transform: translateX(34px); } }
.bub { animation: rise 3s steps(10) infinite; }
.bub.b { animation-delay: 1.5s; }
@keyframes rise { to { transform: translateY(-26px); opacity: 0; } }

/* ---- dialog ---- */
dialog { border: 0; padding: 3px; width: min(380px, 100% - 24px); }
dialog::backdrop { background: rgba(20, 10, 60, .55); }
dialog label { display: block; font-weight: 500; font-size: 15px; margin: 4px 0 6px; }
dialog input { margin-bottom: 10px; }
dialog .row { display: flex; gap: 8px; justify-content: flex-end; }
dialog .error { min-height: 20px; margin: 0 0 8px; color: #c4123f; font-size: 14px; }

/* ---- smaller screens: windows stack, a little scrolling is fine ---- */
@media (max-width: 980px) {
  .windows { grid-template-columns: 1fr 1fr; }
  .notes { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .desk { justify-content: flex-start; gap: 28px; }
  .windows { grid-template-columns: 1fr; gap: 22px; }
  .sticker { right: -6px; top: -50px; width: 82px; }
  .top .btn { white-space: nowrap; padding: 9px 12px; font-size: 14px; }
  .logo { font-size: 18px; }
  .logo img { width: 36px; }
}

/* the log-in / account button arrives after a fetch; keep the bar's height so the page doesn't jump */
.top { min-height: 66px; }
[data-auth="0"] #login-btn[hidden] { display: inline-flex; }