/* Layout fixes kept on their own (2026-10-01), independent of any visual theme:
   the phone top bar on one line, the compact quest note. */

/* Phones (owner, 2026-10-01): the study timer sits on the top bar's one line
   with everything else -- [player | timer | currencies + buttons] -- compacted
   so nothing overlaps from 360 to 430 px. */
@media (max-width: 600px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto auto !important; column-gap: 6px !important; row-gap: 0 !important; padding: 6px 8px !important; }
  .topbar > .player { grid-column: 1 !important; grid-row: 1 !important; gap: 6px; }
  .topbar > #pomodoroMount { grid-column: 2 !important; grid-row: 1 !important; justify-content: center; }
  .topbar > .currencies { grid-column: 3 !important; grid-row: 1 !important; gap: 4px !important; }
  .topbar .avatar { width: 40px !important; height: 40px !important; flex: none; }
  .topbar .player-name { font-size: 13px !important; }
  .topbar .hpbar { min-width: 0 !important; width: 100% !important; }
  .topbar .pomodoro-pill { padding: 3px 7px !important; min-height: 26px !important; font-size: 12px !important; gap: 4px !important; }
  .topbar .pomodoro-icon { width: 14px !important; height: 14px !important; }
  .topbar .currency-pill { padding: 4px 7px !important; gap: 4px !important; font-size: 12px; }
  .topbar .currency-pill :is(.coin, .gem) { width: 16px !important; height: 16px !important; }
  .topbar .icon-btn { width: 32px !important; height: 32px !important; min-width: 32px !important; padding: 4px !important; }
}
@media (max-width: 380px) {
  .topbar .pomodoro-icon { display: none !important; } /* the clock alone still says what it is */
  .topbar .avatar { width: 34px !important; height: 34px !important; }
}
@media (max-width: 600px) {
  /* the HP bar is the priority: coins and gems stack, the bar gets the room */
  .topbar .currency-pill { display: grid !important; grid-template-columns: auto auto; grid-auto-rows: 15px; align-items: center; column-gap: 3px !important; row-gap: 2px; padding: 3px 7px !important; font-size: 11px !important; line-height: 1; }
  .topbar .currency-pill :is(.coin, .gem) { width: 13px !important; height: 13px !important; }
  .topbar .player-level { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; min-width: 0; }
  .topbar .player-level .level-badge { flex: none; transform: scale(.85); transform-origin: left center; }
  .topbar .hpbar { flex: 1 1 auto; min-width: 70px !important; }
  .topbar .hpbar #hpText { font-size: 10px; white-space: nowrap; }
}
@media (max-width: 600px) { .topbar .pomodoro-icon :is(svg, .ui-icon) { width: 14px !important; height: 14px !important; } .topbar .pomodoro-pill { column-gap: 5px !important; } }

/* A finished quest / all due cards done (owner: the big opaque parchment was
   ugly): a compact see-through glass note with a gold hairline -- clearly a
   moment, far below a level-up. */
[data-theme=stone] .reward-banner:is([data-occasion=quest],[data-occasion=dueClear]) {
  top: 14% !important; width: min(320px, calc(100vw - 40px)) !important; padding: 10px 18px 12px !important;
  background: rgb(24 23 20 / .58) !important; backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border: 1px solid #c8a04a99 !important; border-radius: 10px !important; box-shadow: inset 0 1px #ffffff14, 0 8px 22px #0006 !important;
}
[data-theme=stone] .reward-banner:is([data-occasion=quest],[data-occasion=dueClear]) .reward-art { width: 34px !important; height: 34px !important; margin: 0 auto 2px !important; }
[data-theme=stone] .reward-banner:is([data-occasion=quest],[data-occasion=dueClear]) .reward-art > .ui-icon { width: 30px !important; height: 30px !important; }
[data-theme=stone] .reward-banner:is([data-occasion=quest],[data-occasion=dueClear]) h3 { font: 600 17px/1.2 Cinzel, Georgia, serif !important; letter-spacing: .04em; color: #e9d9a8 !important; margin: 0 0 2px !important; }
[data-theme=stone] .reward-banner:is([data-occasion=quest],[data-occasion=dueClear]) p { font-size: 13px !important; color: var(--ink) !important; opacity: .9; }

/* icons.js: a badge drawn over a painted icon (HP regen's "+") */
svg.ui-icon > .icon-badge { display: inline !important; }

/* Equip is green, Unequip red, whatever the theme's button colour (owner: red only for negative actions). */
.invw-action.is-equip { background: linear-gradient(180deg, #4a7f3c, #2f5a27) !important; border-color: #7fa865 !important; color: #f2f7ea !important; }
.invw-action.is-unequip { background: linear-gradient(180deg, #a8443a, #6e2620) !important; border-color: #c9766a !important; color: #fbecea !important; }
/* The inventory's four tabs fit on a phone (Equip, Materials, Classes, Look). */
@media (max-width: 600px) {
  .invr-tabs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px !important; }
  .invr-tab { min-width: 0 !important; padding: 7px 2px !important; font-size: 11px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}