/* Mora's GUI columns: 200 px panels, 32 px headers, 26 px rows and 26x14 switches, sized like the in-game panel. */
.cgui { user-select: none; -webkit-user-select: none; }
.cgui-cols { display: flex; align-items: flex-start; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.cgui-col { flex: none; width: 200px; display: grid; gap: 8px; }
.cgui-col:first-child { margin-left: auto; } .cgui-col:last-child { margin-right: auto; }

.cgui-pane { background: #161616; border: 1px solid #262626; }
.cgui-head { height: 32px; display: flex; align-items: center; padding: 0 11px; }
.cgui-head h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -.005em; line-height: 1; }
.cgui-count { margin-left: 7px; font-size: 11px; color: #8a8a8a; transform: translateY(1.5px); font-feature-settings: 'tnum' 1; }
.cgui-fold { margin-left: auto; width: 26px; height: 32px; margin-right: -2px; display: grid; place-items: center; border: 0; padding: 0; background: none; color: #8a8a8a; cursor: pointer; }
.cgui-fold:hover { color: #fff; }
.cgui-fold svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; overflow: visible; }
.cgui-plus-v { display: none; }
.cgui-pane.is-folded .cgui-plus-v { display: inline; }
.cgui-body { padding-bottom: 4px; }
.cgui-pane.is-folded .cgui-body { display: none; }

.cgui-row { width: 100%; height: 26px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 0; background: none; cursor: pointer;
  font: 500 15px/1 Inter, system-ui, sans-serif; color: #9a9a9a; text-align: left; transition: color .15s; }
.cgui-row:hover { color: #e6e6e6; background: rgba(255, 255, 255, .035); }
.cgui-row.is-on { color: #fff; }
.cgui-row:focus-visible { outline: 1px solid #fff; outline-offset: -1px; }
.cgui-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.cgui-warn { flex: none; width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.32; }
.cgui-chevron { flex: none; width: 10px; height: 10px; margin-right: 8px; fill: none; stroke: currentColor; stroke-width: 2.4; overflow: visible; }

.cgui-switch { position: relative; flex: none; width: 26px; height: 14px; background: #343434; transition: background-color .15s; }
.cgui-switch::after { content: ''; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; background: #fff; opacity: .55; transition: transform .15s, opacity .15s; }
.cgui-row.is-on .cgui-switch { background: #686868; }
.cgui-row.is-on .cgui-switch::after { transform: translateX(12px); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cgui-row, .cgui-switch, .cgui-switch::after { transition: none; } }

/* In game: the columns float on frosted glass over the world, exactly like the client (no borders, 75% glass density, 4.25 px frost). */
.ingame { position: relative; height: 620px; background: #6d87b4 url(../img/ingame.jpg) center 30% / cover; overflow: hidden; }
.ingame .cgui { position: absolute; left: 0; right: 0; top: 76px; }
.ingame .cgui-pane { border: 0; background: rgba(7, 7, 7, .615); -webkit-backdrop-filter: blur(4.25px); backdrop-filter: blur(4.25px); }
.ingame .cgui-row { color: #bcbcbc; }
.ingame .cgui-row:hover { color: #e8e8e8; }
.ingame .cgui-row.is-on { color: #fff; }
.ingame .cgui-count, .ingame .cgui-fold { color: #bcbcbc; }
.ingame .cgui-cols { padding: 0 16px 12px; }
.hud-badge { position: absolute; top: 12px; right: 12px; width: 124px; height: 32px; display: flex; align-items: center; gap: 10px; padding-left: 10px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 16px; }
.hud-badge svg { width: 25px; height: 15px; fill: #fff; }
.ingame-hint { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 6px 12px; text-align: center; font-size: 15px; color: #fff; background: rgba(0, 0, 0, .5); }
.ingame-hint b { margin-right: 6px; }
.ingame-hint b { font-weight: 600; }
@media (max-width: 720px) { .ingame { height: 560px; } .ingame .cgui { top: 60px; } }

.ingame-full { height: auto; padding: 64px 0 80px; }
.ingame-full .cgui { position: static; }