@import "base.css";

/* Root ZStack: full-screen blue gradient background */
ZStack.menu-root {
    background-image: url("/assets/images/ui/menu-bg.png");
    background-fit: stretch;
    align-h: center;
}

/* Main menu content layer — constrained to phone-like width */
VStack.menu-content {
    padding: 0dp, 0dp;
    width: min(100vw, 480dp);
    max-width: 480dp;
    fill-width: false;
    align-h: center;
}

/* Top bar */
HStack.menu-top-bar {
    padding: 0dp, 16dp;
}

/* Settings icon button (top-right) */
Image.settings-icon-btn {
    width: 40dp;
    height: 40dp;
    fit: contain;
}

Image.settings-icon-btn.hover {
    tint-color: #ffffff18;
}

Image.settings-icon-btn.pressed {
    width: 44dp;
    height: 44dp;
    tint-color: #00000030;
}

/* Logo */
Image.menu-logo {
    width: 380dp;
    height: 340dp;
    fit: contain;
    align-h: center;
}

/* Side buttons area (left-aligned, fills middle space) */
VStack.side-buttons-area {
    padding: 16dp, 16dp;
}

/* Side button group (codex, dev play) */
VStack.side-btn {
    /* container for icon + label */
}

VStack.side-btn.hover VStack.side-icon-wrap {
    tint-color: #ffffff18;
}

VStack.side-btn.pressed VStack.side-icon-wrap {
    tint-color: #00000030;
}

/* Purple square icon wrapper */
VStack.side-icon-wrap {
    width: 64dp;
    height: 64dp;
    background-image: url("/assets/images/ui/button-purple-square.png");
    background-fit: stretch;
    justify: center;
    align-h: center;
}

/* Icon inside the purple square */
Image.side-icon {
    width: 38dp;
    height: 38dp;
    fit: contain;
    align-h: center;
}

/* Label below side button */
Panel.side-label {
    font: display;
    font-size: 15dp;
    text-color: #ffffff;
    wrap: false;
    align-h: center;
}

/* Bottom buttons container */
VStack.bottom-buttons {
    max-width: 480dp;
    padding: 0dp, 24dp, 16dp, 24dp;
    spacing: 10dp;
}

/* Play Quest - big yellow button */
Panel.play-quest-btn {
    min-height: 84dp;
    background-image: url("/assets/images/ui/button-yellow-wide.png");
    background-fit: stretch;
    padding: 14dp, 24dp;
    corner-radius: 18dp;
}

Panel.play-quest-btn.hover {
    tint-color: #ffffff18;
}

Panel.play-quest-btn.pressed {
    tint-color: #00000022;
}

/* Secondary buttons row */
HStack.secondary-row {
    min-height: 100dp;
}

/* Secondary button (daily / free play) */
VStack.secondary-btn {
    min-height: 90dp;
    fill-width: true;
    fill-height: true;
    background-image: url("/assets/images/ui/button-blue-wide.png");
    background-fit: stretch;
    background-slice: 35,35,35,35;
    corner-radius: 18dp;
    padding: 10dp, 8dp, 4dp, 8dp;
}

VStack.secondary-btn.hover {
    tint-color: #ffffff18;
}

VStack.secondary-btn.pressed {
    tint-color: #00000022;
}

/* Secondary icon */
Image.secondary-icon {
    width: 28dp;
    height: 28dp;
    fit: contain;
}

/* Text area below icon — outline shader draws here */
Panel.secondary-text-area {
    min-height: 40dp;
}

/* Phone-like aspect overrides */
.aspect-phonelike Image.menu-logo {
    width: 340dp;
    height: 340dp;
}

.aspect-phonelike Panel.secondary-label {
    font-size: 20dp;
}

/* Tablet overrides */
.aspect-tabletlike Image.menu-logo {
    height: 320dp;
}

/* ===== Settings Popup ===== */

/* Scrim: semi-transparent overlay covering full screen */
VStack.settings-scrim {
    background-color: #00000078;
    padding: 24dp, 16dp;
    visibility: collapse;
}

VStack.settings-scrim.open {
    visibility: visible;
}

/* Card: silver gradient panel with 9-slice corners */
VStack.settings-card {
    background-image: url("/assets/images/ui/panel-silver-wide.png");
    background-fit: stretch;
    background-slice: 50,50,50,50;
    padding: 28dp, 24dp;
    width: min(100vw, 420dp);
    max-width: 420dp;
    fill-width: false;
    align-self: center;
    spacing: 10dp;
}

/* Header row */
HStack.settings-header {
    padding: 0dp, 0dp, 12dp, 0dp;
}

/* SETTING title */
Panel.settings-title {
    font: display;
    font-size: 42dp;
    text-color: #1a1a1a;
    wrap: false;
}

/* Close button */
Image.settings-close-btn {
    width: 54dp;
    height: 54dp;
    fit: contain;
}

Image.settings-close-btn.hover {
    tint-color: #ffffff18;
}

Image.settings-close-btn.pressed {
    width: 50dp;
    height: 50dp;
    tint-color: #00000030;
}

/* Toggle row with 9-slice pill background */
HStack.settings-toggle-row {
    min-height: 72dp;
    background-image: url("/assets/images/ui/bar-grey-rounded.png");
    background-fit: stretch;
    background-slice: 26,20,26,20;
    corner-radius: 16dp;
    padding: 12dp, 18dp;
}

HStack.settings-toggle-row.hover {
    tint-color: #ffffff10;
}

HStack.settings-toggle-row.pressed {
    tint-color: #00000018;
}

/* Row icon */
Image.settings-row-icon {
    width: 34dp;
    height: 34dp;
    fit: contain;
}

/* Row label */
Panel.settings-row-label {
    font: display;
    font-size: 32dp;
    text-color: #ffffff;
    wrap: false;
}

/* Toggle switch image (compact 2:1 ratio) */
Image.settings-toggle-img {
    width: 64dp;
    height: 32dp;
    fit: contain;
}

/* Toggle state text */
Panel.settings-toggle-state {
    font: display;
    font-size: 20dp;
    text-color: #cccccc;
    wrap: false;
    min-width: 36dp;
}

/* Action buttons with 9-slice corners */
Panel.settings-action-btn {
    min-height: 74dp;
    background-image: url("/assets/images/ui/button-blue-wide.png");
    background-fit: stretch;
    background-slice: 35,35,35,35;
    corner-radius: 18dp;
    padding: 14dp, 16dp;
    font: display;
    font-size: 28dp;
    text-color: #ffffff;
    wrap: false;
}

Panel.settings-action-btn.hover {
    tint-color: #ffffff18;
}

Panel.settings-action-btn.pressed {
    tint-color: #00000022;
}