* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body {
    background-color: var(--bg);
    background-size: 24px 24px;
    min-height: 100vh;
    color: var(--text-color);
    padding: 20px;
}

/* ================= HEADER ================= */
.math-header {
    width: 100%;
    max-width: 2000px;
    background-color: var(--header-bg);
    border-radius: 12px;
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0px;

    box-shadow: var(--card-shadow);
}
.brand .logo-text {
    font-size: 32px;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
}

.brand .tagline {
    font-size: 15px;
    opacity: .7;
    margin-top: 2px;
}

.page-title h2 {
    font-size: 36px;
    font-weight: 500;
    margin: 0;
}

a:link, a:visited {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
}

/* ================= MAIN LAYOUT ================= */
.main-container {
    max-width: 91%;
    margin: 30px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 100px;
    transition: filter 0.3s ease;
}

/* BLUR MAIN CONTENT WHEN MODAL OPEN */
.main-container.blurred > main,
.main-container.blurred > .sidebar-right {
    filter: blur(8px);
    pointer-events: none;
}

#modalMiniHistory, #modalAdvHistory, #modalChosenOne {
z-index: 2000 !important;
}

/* SEARCH BAR */
.search-container { margin-bottom: 25px; }
#toolSearchInput {
width: 100%;
padding: 10px 16px;
border: 1.5px solid #4a7bb0;
border-radius: 10px;
outline: none;
font-size: 16px;
background-color: var(--card-bg);
color: var(--text-color);
}

/* ================= DASHBOARD TOOLS GRID ================= */
.tools-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.card-rng {
    grid-column: 1;
    grid-row: 1;
}

.mini-tools-row {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.card-wheel {
    grid-column: 2;
    grid-row: 1 / span 2;
}

.color-card {
    grid-column: 1;
    grid-row: 3;
}

.tools-left-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mini-tools-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.tools-right-col {
    display: flex;
    flex-direction: column;
}

/* CARD COMMON STYLES */
.tool-card {
    background-color: var(--card-bg);
    border-radius: 20px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
    background-color 0.3s ease,
    border-color 0.3s ease;
}
.tool-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--card-shadow-hover, 0 8px 24px rgba(0, 0, 0, 0.15));
}
.hidden { display: none !important; }
.tool-card.hidden { display: none !important; }

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}
.card-header h3 { color: #4378f2; font-size: 20px; font-weight: 600; }
.btn-expand {
    background: transparent;
    border: none;
    color: #4378f2;
    font-size: 20px;
    cursor: pointer;
    font-weight: bold;
}

/* INPUT PILLS */
.input-pill {
    background: var(--header-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding: 6px 12px;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
}
.input-pill span { font-weight: 500; font-size: 14px; color: #333; white-space: nowrap; }
.input-pill input {
    width: 100%;
    border: none;
    background: #fff;
    border-radius: 8px;
    padding: 6px 8px;
    text-align: right;
    outline: none;
    font-size: 15px;
}

/* 1. RNG MINI CARD */
.rng-mini-body {
    display: grid;
    /* Cột 1: 140px | Cột 2 (Start): tự co theo nút | Cột 3 (Result): dãn hết phần còn lại */
    grid-template-columns: 33% max-content 1fr;
    gap: 15px;
    align-items: center;
}
.inputs-col { display: flex; flex-direction: column; gap: 10px; }
.btn-start-large {
    width: 100%; /* Cho nút lấp đầy Cột 2 đã được bóp gọn */
    padding: 0 24px; /* Chỉnh độ rộng ngang của nút bằng padding */
    background: #2eb4b0;
    color: #fff;;
    border: none;
    border-radius: 16px;
    height: 90px;
    font-size: 22px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: background 0.2s;
}
/*.btn-start-large:hover { background: #e3eeff; }*/
.btn-start-large:hover {
    background: #e3eeff;
    transform: translateY(-2px);
}
.mini-result-box {
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: 16px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    color: var(--text-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.card-footer { display: flex; gap: 15px; margin-top: 15px; font-size: 14px; color: var(--text-sub, var(--text-color));}

/* 2 & 3. DICE & COIN MINI */
.center-body { display: flex; justify-content: center; align-items: center; height: 120px; }
.dice-box {
    width: 80px; height: 80px;
    background: var(--card-bg);
    border: 2px solid var(--text-color);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer;
    transition: transform 0.2s;
}
.dice-dot { width: 14px; height: 14px; background: var(--text-color); border-radius: 50%; }
.dice-box.rolling { animation: spin 0.4s ease-in-out; }

.coin-box {
    width: 90px; height: 90px; border-radius: 50%; border: 2px solid #4a7bb0;
    display: flex; align-items: center; justify-content: center; font-weight: bold;
    color: var(--text-color); cursor: pointer; background: var(--card-bg); transition: transform 0.4s;
    font-size: 22px;
}
.coin-box.flipping { animation: flip 0.5s ease-in-out; }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes flip { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(720deg); } }



/* Fix lỗi vỡ layout Dice: Ép Card Color trải dài toàn bộ 2 cột bên trái */
#cardColor {
grid-column: 1 / span 2;
width: 100%;
box-sizing: border-box;
}

.color-card {
    padding: 24px;
    background-color: var(--card-bg);
    border-radius: 28px;
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.text-blue {
    color: #3b82f6;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

/* Khóa khung không cho tràn flexbox */
.color-card-body {
    display: flex;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

.color-left-col {
    width: 195px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.color-right-col {
    flex: 1;
    min-width: 0; /* Ép flexbox co giãn không bị tràn */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Ép gọn hàng Slider & Checkbox */
.fix-color-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
}

.fix-check-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    white-space: nowrap;
    width: 60px;
    flex-shrink: 0;
}

.fix-val-input {
    width: 36px;
    flex-shrink: 0;
    border: 1px solid var(--card-border);
    background: var(--bg);
    color: var(--text-color);
    border-radius: 8px;
    padding: 3px 2px;
    text-align: center;
    font-size: 12px;
    outline: none;
}

.color-range-slider {
    flex: 1;
    min-width: 0; /* Giúp thanh range co theo đúng diện tích còn lại */
    width: 100%;
    accent-color: #3b82f6;
}

/* Ô nhập HEX cho phép Edit */
.hex-display-box input {
    flex: 1;
    height: 80%;
    width: 50%
    margin-right: 4px;
    border: 1px solid transparent;
    border-radius: 6px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    outline: none;
    background: #fff;
    transition: border-color 0.2s;
}

.hex-display-box input:focus {
    border-color: #2563eb;
}

/* Color Picker Interactive Area */
.picker-container {
    display: flex;
    gap: 12px;
    height: 190px;
    user-select: none;
}

.sat-val-picker {
    flex: 1;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    position: relative;
    cursor: crosshair;
    background-color: hsl(197, 100%, 50%);
    background-image:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, transparent);
}

.picker-pointer {
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    background: transparent;
    border-radius: 50%;
    position: absolute;
    top: 0%;
    left: 100%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 3px rgba(0,0,0,0.8);
    pointer-events: none;
}

.hue-picker {
    width: 28px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    background: linear-gradient(to bottom, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}

.hue-slider-handle {
    width: 100%;
    height: 6px;
    background: #fff;
    border: 1px solid #000;
    border-radius: 2px;
    position: absolute;
    top: 0%;
    left: 0;
    transform: translateY(-50%);
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* HEX Box */
/* 1. SỬA LỖI Ô HEX TRÀN RA NGOÀI */
.hex-container {
    display: flex;
    align-items: center;
    background-color: #3b82f6;
    border-radius: 8px;
    padding: 4px 8px;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.hex-label {
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    padding: 0 8px;
    user-select: none;
}

.hex-input {
    flex: 1;
    width: 100%; /* Đảm bảo không bị đè bởi width % lỗi ở rule khác */
    border: none;
    outline: none;
    border-radius: 4px;
    padding: 6px 8px;
    background-color: var(--card-bg);
    font-family: monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    text-align: center;
    box-sizing: border-box;
}



/* Right Controls */
.btn-generate-color {
    background-color: #4f46e5;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.color-model-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.model-btns {
    display: flex;
    gap: 10px;
    width: 100%;
}

.btn-model {
    flex: 1;
    padding: 6px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: var(--panel-bg, #e1eeff);
    color: var(--text-color);
    cursor: pointer;
}

.btn-model.active {
    background: #facc15;
    font-weight: bold;
}

.fix-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fix-group.hidden {
    display: none !important;
}

.fix-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.fix-check-label {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 70px; /* Giảm từ 115px xuống 85px để kéo ô trắng sát lại gần text */
}

.fix-val-input {
    width: 70px; /* Tăng từ 45px lên 60px để ô pill dài hơn */
    border: none;
    background: #fff;
    border-radius: 8px;
    padding: 4px;
    text-align: center;
    outline: none;
    color: #1a1a1a !important;
}

.color-range-slider {
    flex: 1;
    accent-color: #3b82f6;
}

/* Bottom Grid Details */
.color-details-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* Ép 3 cột chia đều không vỡ khung */
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.detail-box {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.detail-title {
    font-size: 12px;
    color: var(--text-sub, var(--text-color));
}

.detail-inputs {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    box-sizing: border-box;
}

.detail-inputs span {
    font-size: 11px;
    color: var(--text-color);
    flex-shrink: 0;
}

.detail-inputs input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--card-border);
    border-radius: 4px;
    padding: 4px 1px;
    text-align: center;
    font-size: 11px;
    font-weight: 500;
    outline: none;
    background: var(--bg);
    color: var(--text-color);
    box-sizing: border-box;
}

.detail-inputs input:focus {
    border-color: #3b82f6;
}





/* 4. RANDOM WHEEL MINI CARD */
.card-wheel { width: 100%; }
.wheel-body { display: flex; flex-direction: column; gap: 15px; }
.wheel-display {
    display: flex;
    gap: 25px;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}
.wheel-wrapper {
    position: relative;
    width: 260px;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wheel-pointer {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    color: #ff4757;
    z-index: 10;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: color 0.1s ease;
}
#wheelCanvas {
width: 260px;
height: 260px;
border-radius: 50%;
box-shadow: var(--card-shadow);
}
.wheel-actions { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.wheel-info-bar, .wheel-results-info { display: flex; gap: 15px; margin-top: 10px; font-size: 14px; color: var(--text-color); }
.wheel-results-info strong { color: #4378f2; }
.btn-sub {
    padding: 6px 14px; border: 1px solid #4378f2; background: var(--input-bg);
    border-radius: 6px; color: #4378f2; cursor: pointer; font-weight: 900;
    font-size: 17px;
}
.btn-sub:hover { background: #e8f0ff; }
.wheel-input-area textarea {
    width: 100%; height: 120px; border-radius: 16px; border: 1.3px solid var(--card-border);
    padding: 15px; outline: none; resize: vertical; font-size: 16px;
    background: var(--input-bg); color: var(--text-color);
}

/* ================= BASE MODAL STYLES ================= */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex; justify-content: center; align-items: center; z-index: 1000;
    filter: none !important;
    pointer-events: auto !important;
}
.modal-overlay.hidden { display: none !important; }

/* Dùng làm khung chuẩn cho tất cả Modal */
.modal-card {
    background: var(--card-bg);
    color: var(--text-color);
    border: 1px solid var(--card-border);
    width: 55vw;
    max-height: 90vh;
    border-radius: 28px;
    padding: 30px;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    overflow-y: auto;
}
.modal-close, .modal-close2 {
    position: sticky;
    top: -1px;
    float: right;
    width: 42px;
    height: 42px;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    border-radius: 50%;
    font-size: 32px;
    line-height: 1;
    color: #4a7bb0;
    cursor: pointer;
    z-index: 30;
    box-shadow: var(--card-shadow);
}
.modal-title { color: #4378f2; font-size: 24px; font-weight: 700; margin-bottom: 4px; }
.title-underline, .sub-underline { height: 2px; background: #4378f2; width: 140px; margin-bottom: 20px; }

/* ================= SPECIFIC MODAL OVERRIDES ================= */
/* Khai báo SAU .modal-card để ghi đè kích thước chuẩn xác */
.modal-adv-wheel {
    width: 90vw !important;
    max-width: 1400px !important;
    max-height: 90vh;
    padding: 25px;
}

.modal-adv-dice {
    width: 880px !important;
    max-width: 95vw !important;
    max-height: 90vh;
}

.mini-history-card {
    width: 360px !important;
    max-height: 400px;
}

.modal-chosen-card {
    width: 380px !important;
    text-align: center;
}

#modalMiniHistory, #modalChosenOne {
z-index: 2000 !important;
}

/* ================= MODAL ADVANCED WHEEL CONTENT ================= */
.adv-wheel-layout {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 20px;
    align-items: start;
}

.adv-wheels-container {
    display: grid;
    gap: 30px;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 65vh;
    /*background: var(--bg);*/
    border-radius: 20px;
    padding: 15px;
    align-items: center;
    justify-items: center;

}

.adv-wheels-container.grid-1 { grid-template-columns: 1fr; }
.adv-wheels-container.grid-2 { grid-template-columns: 1fr 1fr; }
.adv-wheels-container.grid-3,
.adv-wheels-container.grid-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

.adv-wheel-item {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.adv-wheel-item canvas {
    max-width: 100%;
    max-height: 100%;
    border-radius: 50%;
    box-shadow: var(--card-shadow);
}

.adv-pointer-right {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #eccc68;
    z-index: 20;
    pointer-events: none;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}

.adv-controls-container { display: flex; flex-direction: column; gap: 12px; }
.spin-buttons-group { display: flex; gap: 10px; }
.btn-spin-main {
    flex: 1; background: #4e73df; color: #fff; border: none; padding: 12px;
    border-radius: 10px; font-size: 18px; font-weight: bold; cursor: pointer; transition: background 0.2s;
}
.btn-spin-main:hover { background: #375a7f; }
.btn-spin-all {
    flex: 1; background: #a29bfe; color: #fff; border: none; padding: 12px;
    border-radius: 10px; font-size: 18px; font-weight: bold; cursor: pointer;
}

.actions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.actions-grid .btn-sub:disabled { background: #e0e0e0; border-color: #ccc; color: #888; cursor: not-allowed; }
.options-bar, .stats-bar { display: flex; gap: 20px; font-size: 14px; }

/* Khung chứa các tab */
.wheels-tabs-bar {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Chia làm 2 cột bằng nhau */
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    width: 100%; /* Đảm bảo khung cha full chiều ngang */
}

/* Từng tab đơn lẻ (Sửa lỗi bị phình dọc và giúp xếp hàng ngang) */
.wheel-tab {
    display: flex;            /* Bật flexbox để input và nút x nằm cùng 1 dòng */
    align-items: center;       /* Căn giữa ô nhập và nút xóa theo chiều dọc */
    justify-content: space-between; /* Đẩy input sang trái, nút x sang phải */
    box-sizing: border-box;    /* Tính toán chuẩn kích thước bao gồm cả padding */
    height: 40px;             /* Cố định chiều cao dòng để không bị dài ra theo chiều dọc */

    padding: 0 12px;          /* Giảm bớt padding để fit vừa 2 cột */
    border: 2px solid #4e73df;
    border-radius: 8px;
    background: #fff;
    color: #333;
    cursor: pointer;
}

/* Áp dụng font size 16px chuẩn (Không dùng dấu * chung với padding nữa) */
.wheel-tab, .wheel-tab-input {
    font-size: 16px;
    font-weight: 700;
}

/* Khi tab được active */
.wheel-tab.active {
    background: #eef2fe; /* Hoặc var(--input-bg) của bạn */
    border: 2px solid #4e73df;
    color: #4e73df;
    box-shadow: 0 2px 5px rgba(78,115,223,0.2);
}

/* Ô input chữ bên trong tab */
.wheel-tab-input {
    width: 100%;              /* Tự động kéo giãn hết khoảng trống bên trái */
    min-width: 0;             /* Bắt buộc phải có để tránh input làm tràn khung Grid */
    border: none;
    background: transparent;
    outline: none;
    color: inherit;
}

/* Nút xóa (Dấu x màu đỏ) */
.wheel-tab-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #ff4757;
    font-size: 20px;          /* Thu nhỏ xuống 20px để cân đối với khung nút */
    line-height: 1;
    cursor: pointer;
    padding: 0 0 4px 4px;     /* Căn nhẹ để dấu x nằm chính giữa */
    flex-shrink: 0;           /* Không cho nút x bị bóp méo khi thu nhỏ màn hình */
}



.adv-textarea { width: 100%; height: 180px; border-radius: 12px; border: 1px solid #ccc; padding: 10px; outline: none; resize: vertical; }
/* Khung container cha */
.adv-entries-container {
    height: 70%;
    max-height: 260px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;            /* Ép container không vượt quá thớ cha của nó */
    box-sizing: border-box; /* Rất quan trọng để tính toán width chuẩn xác */
}

/* Danh sách cuộn */
.entries-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    width: 100%;            /* Giới hạn chiều ngang luôn bằng container */
    box-sizing: border-box;
}

/* Từng hàng nhập liệu (SỬA LỖI TRÀN TẠI ĐÂY) */
.entry-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg);
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--card-border);
    width: 100%;            /* Ép hàng luôn fit vừa vặn thớ chứa */
    box-sizing: border-box;  /* Ngăn padding và border đẩy hàng dài ra thêm */
}

/* Ô nhập text (SỬA LỖI TRÀN TẠI ĐÂY) */
.entry-row input[type="text"] {
    flex: 1;
    min-width: 0;           /* BẮT BUỘC: Ngăn input giữ size mặc định làm tràn hàng flex */
    padding: 6px;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    color: var(--text-color);
    border-radius: 6px;
    box-sizing: border-box;
}

/* Các thành phần bổ sung cố định kích thước, không cho co bóp */
.entry-color-picker {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;         /* Không cho biến dạng chiều ngang */
}

.entry-thumb {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.btn-entry-image {
    width: 34px;
    height: 32px;
    border: 1px solid #ced4da;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    flex: 0 0 auto;         /* Không cho giãn hay co */
}

/* Khung chỉnh trọng số */
.weight-control {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    padding: 2px 6px;
    border-radius: 6px;
    border: 1px solid #ced4da;
    flex-shrink: 0;         /* Đảm bảo giữ nguyên độ rộng */
}

/* Ô input nhập số */
.weight-control input {
    width: 40px;
    text-align: center;
    border: none;
    outline: none;
    box-sizing: border-box;
}

/* Nút xóa hàng */
.btn-del-entry {
    background: transparent;
    border: none;
    color: #ff4757;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;         /* Giữ nguyên nút xóa không bị móp */
}

/* Nút thêm hàng mới */
.btn-add-entry {
    flex: 0 0 auto;
    position: sticky;
    bottom: 0;
    padding: 8px;
    background: #e3eeff;
    border: 1px dashed #4e73df;
    color: #4e73df;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    width: 100%;            /* Nút bấm luôn rộng bằng container */
    box-sizing: border-box;
}


.history-list { padding-left: 20px; max-height: 280px; overflow-y: auto; }
.history-list li { padding: 6px 0; border-bottom: 1px solid #eee; font-size: 15px; }

.chosen-results-box { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-top: 15px; }
.chosen-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.chosen-item img { width: 100px; height: 100px; object-fit: cover; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
.chosen-item .chosen-text { font-size: 22px; font-weight: bold; color: #2d3436; }

/* ================= MODAL ADVANCED RNG CONTENT ================= */
.adv-params-grid { display: grid; grid-template-columns: 180px 140px 150px 200px 80px; gap: 15px; align-items: start; margin-bottom: 25px; }
.chk-col { display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.sort-group { display: flex; gap: 10px; }

.separator-box { border: 1px solid #4378f2; border-radius: 6px; display: inline-flex; overflow: hidden; }
.separator-box span { background: #fff; padding: 4px 6px; font-size: 12px; border-right: 1px solid #4378f2; }
.separator-box input { width: 40px; border: none; padding: 4px; text-align: center; outline: none; }
.separator-box.disabled { border-color: #aaa !important; background: #e0e0e0 !important; opacity: 0.6; }
.separator-box.disabled input, .separator-box.disabled span { background: #e0e0e0 !important; color: #777; cursor: not-allowed; }

.btn-adv-start { background: #8ec5fc; border: none; border-radius: 14px; height: 90px; font-size: 18px; font-weight: 600; color: #111; cursor: pointer; transition: all 0.2s; }
.btn-adv-start:hover { background: #6daef5; }

.section-sub-title { color: #4378f2; font-size: 20px; margin-bottom: 4px; }
.results-grid-container { max-height: 240px; overflow-y: auto; margin-bottom: 20px; padding-right: 5px; }
.results-grid-container.hidden { display: none; }
.results-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }

.res-card-item {
    background: #fff; border-radius: 12px; height: 50px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: bold; color: #333; transition: box-shadow 0.3s ease;
}
.res-card-item.glow { box-shadow: 0 0 5px 3px #3b82f6; }

.output-wrapper { display: flex; gap: 12px; align-items: stretch; margin-top: 10px; }
.export-sidebar { display: flex; flex-direction: column; gap: 8px; justify-content: flex-start; }
.btn-export {
    background: #fff; border: 1px solid #ff7b7b; border-radius: 10px; padding: 8px 14px;
    color: #ff5252; cursor: pointer; font-weight: 600; font-size: 13px; transition: all 0.2s ease;
    white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 4px;
}
.btn-export:hover { background: #ffebeb; transform: translateY(-1px); }

#advTextOutput {
flex: 1; height: 90px; border-radius: 16px; border: none; padding: 12px 15px;
outline: none; resize: vertical; font-size: 14px; line-height: 1.5; background: #fff; color: #333;
}

/* ================= MODAL ADVANCED DICE CONTENT ================= */
.adv-dice-layout { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
.dice-display-area {
    background: var(--bg); border-radius: 20px; padding: 20px;
    min-height: 380px; height: 100%; display: flex; align-items: center; justify-content: center;
}
.dice-grid { display: grid; gap: 15px; width: 100%; justify-items: center; align-items: center; }

.dice-grid.grid-1 { grid-template-columns: 1fr; }
.dice-grid.grid-1 .dice-item { width: 220px; height: 220px; font-size: 72px; }

.dice-grid.grid-2 { grid-template-columns: repeat(2, 1fr); }
.dice-grid.grid-2 .dice-item { width: 130px; height: 130px; font-size: 48px; }

.dice-grid.grid-multi { grid-template-columns: repeat(4, 1fr); }
.dice-grid.grid-multi .dice-item { width: 70px; height: 70px; font-size: 24px; border-radius: 10px; }

.dice-item {
    background: var(--card-bg); border: 3px solid var(--text-color); border-radius: 18px;
    display: flex; align-items: center; justify-content: center; font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); overflow: hidden; user-select: none; transition: transform 0.2s;
}
.dice-item img { width: 100%; height: 100%; object-fit: cover; }

.dice-controls-sidebar { display: flex; flex-direction: column; gap: 12px; }
.top-action-row { display: flex; gap: 10px; }
.btn-dice-action { flex: 1; padding: 10px; border-radius: 10px; border: none; font-weight: bold; font-size: 16px; cursor: pointer; }
.btn-blue { background: #4e73df; color: #fff; }
.btn-light-blue { background: #b8d7ff; color: #222; }
.config-pill { background: #cce3ff; padding: 8px 14px; }
.options-inline { display: flex; justify-content: space-around; font-size: 14px; }
.dice-list-title { color: #4e73df; text-align: center; font-size: 18px; margin-top: 5px; }

.dice-config-list { display: flex; flex-direction: column; gap: 10px; max-height: 250px; overflow-y: auto; padding-right: 4px; }
.dice-card-item { border: 1.5px solid #a3c7f7; border-radius: 14px; padding: 8px 10px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.dice-card-row { display: flex; align-items: center; gap: 6px; }
.dice-name-input { width: 90px; padding: 4px 8px; border: 1px solid #b8d7ff; border-radius: 8px; font-size: 13px; outline: none; }
.dice-sides-wrapper { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.dice-sides-input { width: 42px; padding: 4px; border: 1px solid #b8d7ff; border-radius: 6px; text-align: center; outline: none; }

.btn-face-upload {
    width: 28px; height: 26px; border: 1px solid #8ec5fc; background: #f0f7ff;
    border-radius: 6px; cursor: pointer; font-weight: bold; display: flex;
    align-items: center; justify-content: center; font-size: 14px; transition: all 0.2s;
}
.btn-face-upload.has-img { background: #4e73df; color: #fff; }
.btn-face-upload:disabled { background: #e0e0e0 !important; border-color: #ccc !important; color: #aaa !important; cursor: not-allowed; }

.btn-del-dice { background: transparent; border: none; color: #4e73df; font-size: 22px; font-weight: bold; cursor: pointer; margin-left: auto; line-height: 1; }
.btn-add-dice { padding: 10px; background: #b8d7ff; border: 1px dashed #4e73df; border-radius: 10px; color: #111; font-weight: bold; cursor: pointer; }

/* ================= RIGHT SIDEBAR ================= */
.sidebar-right { position: relative; }
.sticky-wrapper {
    position: sticky;
    top: 20px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    border-radius: 24px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.ad-box, .extra-box {
    background: var(--bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 25px 20px;
    text-align: center;
    color: var(--text-color);
}
.ad-box { min-height: 120px; }
.extra-box { min-height: 200px; }
.center-underline { margin: 0 auto 15px auto; }
.text-center { text-align: center; }





/* MODAL COIN STYLES */
.modal-coin-card {
    width: 850px;
    max-width: 95vw;
    background-color: var(--card-bg);
    border-radius: 28px;
    padding: 30px;
    position: relative;
    font-family: inherit;
}

.coin-modal-body {
    display: flex;
    gap: 35px;
}

.coin-left-section {
    flex: 1.2;
    display: flex;
    flex-direction: column;
}

.coin-right-section {
    flex: 0.9;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 35px;
}

.coin-section-title h2 {
    font-size: 18px;
    color: #3b82f6;
    margin: 0;
    font-weight: 600;
}

.coin-section-title .title-underline {
    height: 2px;
    background-color: #3b82f6;
    width: 100px;
    margin-top: 4px;
    margin-bottom: 15px;
}

/* Coin Display Area */
.coins-display-area {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 15px;
}

.coin-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid #3b82f6;
    background: var(--card-bg);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;    --coin-border:
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

.coin-gif-single {
    width: 100px;
    height: 100px;
    object-fit: contain;
}

/* Stats & Result Grid */
.coin-stats-result-grid {
    display: flex;
    gap: 15px;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    flex: 1;
}

.stat-box {
    background: var(--bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.stat-header {
    background-color: #bae6fd;
    color: #000;
    padding: 6px 4px;
    font-size: 13px;
    text-align: center;
    font-weight: 500;
}

.stat-val {
    padding: 10px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.result-box-container {
    flex: 1.1;
    background-color: var(--bg); /* Giữ nguyên nền tối của bạn */
    color: var(--text-color);   /* Thêm màu chữ sáng (hoặc #fff) cho chế độ tối */
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.result-header {
    background-color: #bae6fd;
    text-align: center;
    color: #000;
    padding: 8px;
    font-weight: bold;
    font-size: 15px;
}
.result-box-container .result-content,
.result-box-container textarea,
.result-box-container div:not(.result-header) {
    flex: 1;
    background-color: transparent !important; /* Để lộ nền tối var(--bg) của thẻ cha */
    color: inherit;                           /* Hưởng màu chữ sáng từ thẻ cha */
    padding: 12px;
    border: none;
    outline: none;
    font-size: 14px;
}


.coin-result-output {
    border: none;
    resize: none;
    padding: 10px;
    width: 100%;
    height: 100%;
    outline: none;
    font-size: 16px;
    color: var(--text-color);
}

/* Controls Right Column */
.btn-flip-primary {
    background-color: #93c5fd;
    border: 1px solid #60a5fa;
    padding: 8px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 10px;
    transition: background 0.2s;
}

.btn-flip-primary:hover {
    background-color: #60a5fa;
    color: #fff;
}

.coin-input-group {
    display: flex;
    background: #bae6fd;
    border-radius: 20px;
    overflow: hidden;
    align-items: center;
}

.coin-input-group .input-label {
    flex: 1;
    padding: 8px 15px;
    font-size: 13px;
    color: #000;
}

.coin-input-group input {
    width: 70px;
    border: none;
    background: #fff;
    padding: 8px;
    text-align: center;
    outline: none;
    font-weight: 500;
}

.coin-checkbox-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    margin-top: 4px;
}

.coin-checkbox-row.align-center {
    align-items: center;
}

.separator-input-box {
    display: flex;
    border: 1px solid #3b82f6;
    border-radius: 4px;
    overflow: hidden;
}

.separator-input-box span {
    background: #fff;
    padding: 2px 6px;
    font-size: 12px;
}

.separator-input-box input {
    width: 30px;
    border: none;
    text-align: center;
    outline: none;
}

.btn-coin-reset {
    background-color: #fef9c3;
    border: 1px solid #fde047;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 10px;
}

.btn-coin-reset:hover {
    background-color: #fef08a;
}



/* ==========================================================
 *  RESPONSIVE / MOBILE LAYOUT
 *  ========================================================== */

@media (max-width: 1100px) {
    .main-container {
        max-width: 100%;
        width: 100%;
        padding: 0 16px;
        gap: 24px;
        grid-template-columns: minmax(0, 1fr) 280px;
    }

    .tools-layout {
        gap: 16px;
    }

    .color-left-col {
        width: 175px;
    }

    .adv-wheel-layout {
        grid-template-columns: minmax(0, 1fr) 340px;
    }

    .modal-adv-wheel {
        width: 94vw !important;
    }
}

@media (max-width: 850px) {
    .math-header {
        width: 100%;
    }

    .main-container {
        display: block;
        width: 100%;
        max-width: 100%;
        padding: 0;
        margin: 20px auto;
    }

    .sidebar-right {
        display: none;
    }

    .tools-layout {
        grid-template-columns: 1fr;
    }

    .tools-left-col,
    .tools-right-col {
        width: 100%;
        min-width: 0;
    }

    .mini-tools-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #cardColor {
    grid-column: 1;
    }


    .color-card-body {
        flex-direction: column;
    }

    .color-left-col {
        width: 100%;
    }

    .picker-container {
        height: 220px;
    }

    .color-right-col {
        width: 100%;
    }

    .wheel-display {
        flex-wrap: wrap;
    }

    .wheel-actions {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

    .wheel-actions .btn-sub {
        flex: 1 1 calc(33.333% - 8px);
        min-width: 90px;
    }

    .wheel-info-bar,
    .wheel-results-info {
        flex-wrap: wrap;
    }

    .adv-wheel-layout,
    .adv-dice-layout {
        grid-template-columns: 1fr;
    }

    .adv-controls-container,
    .dice-controls-sidebar {
        width: 100%;
    }

    .adv-wheels-container {
        max-height: none;
        aspect-ratio: auto;
        min-height: 320px;
    }

    .adv-params-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .modal-adv-wheel,
    .modal-adv-dice,
    .modal-coin-card,
    .modal-adv-rng {
        width: 94vw !important;
        max-width: 94vw !important;
    }
}

@media (max-width: 600px) {
    body {
        padding: 12px;
        padding-bottom: 90px;
        overflow-x: hidden;
    }

    .math-header {
        padding: 14px 16px;
        border-radius: 12px;
        gap: 8px;
    }

    .brand .logo-text,
    a:link,
    a:visited {
        font-size: 26px;
    }

    .brand .tagline {
        font-size: 12px;
    }

    .page-title h2 {
        font-size: 26px;
    }

    .main-container {
        margin: 16px 0;
        padding: 0;
    }

    .search-container {
        margin-bottom: 16px;
    }

    #toolSearchInput {
    min-height: 44px;
    font-size: 15px;
    padding: 10px 14px;
    }

    .tools-layout,
    .tools-left-col,
    .tools-right-col {
        gap: 14px;
    }

    .mini-tools-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .tool-card,
    .color-card {
        padding: 14px;
        border-radius: 16px;
    }

    .card-header {
        margin-bottom: 12px;
    }

    .card-header h3,
    .text-blue {
        font-size: 17px;
    }

    .btn-expand {
        font-size: 18px;
        padding: 4px;
    }

    .rng-mini-body {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .btn-start-large,
    .mini-result-box {
        height: 60px;
    }

    .btn-start-large {
        padding: 0 16px;
        font-size: 18px;
    }

    .mini-result-box {
        font-size: 22px;
    }

    .card-footer {
        flex-wrap: wrap;
        gap: 8px 14px;
    }

    .center-body {
        height: 105px;
    }

    .dice-box {
        width: 68px;
        height: 68px;
    }

    .coin-box {
        width: 76px;
        height: 76px;
        font-size: 18px;
    }

    .color-card-body {
        gap: 14px;
    }

    .picker-container {
        height: 180px;
    }

    .hue-picker {
        width: 22px;
    }

    .hex-container {
        padding: 4px 6px;
    }

    .hex-label {
        font-size: 13px;
        padding: 0 5px;
    }

    .hex-input {
        min-width: 0;
        font-size: 13px;
    }

    .model-btns {
        gap: 6px;
    }

    .btn-model {
        padding: 8px 4px;
        font-size: 13px;
    }

    .fix-color-row {
        gap: 5px;
    }

    .fix-check-label {
        width: 76px;
        font-size: 11px;
    }

    .fix-val-input {
        width: 42px;
    }

    .color-details-grid {
        grid-template-columns: 1fr;
    }

    .detail-box {
        padding: 8px 6px;
    }

    .wheel-wrapper {
        width: min(72vw, 260px);
        height: min(72vw, 260px);
    }

    #wheelCanvas {
    width: 100%;
    height: 100%;
    }

    .wheel-actions .btn-sub {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        padding: 8px 10px;
        font-size: 14px;
    }

    .wheel-input-area textarea {
        min-height: 100px;
        font-size: 14px;
    }

    /* ---------- MODALS ---------- */
    .modal-overlay {
        padding: 10px;
        align-items: flex-start;
        overflow-y: auto;
    }

    .modal-card,
    .modal-adv-wheel,
    .modal-adv-dice,
    .modal-coin-card,
    .modal-adv-rng,
    .mini-history-card,
    .modal-chosen-card {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 20px);
        margin: 0;
        padding: 18px;
        border-radius: 18px;
    }

    .modal-close,
    .modal-close2 {
        width: 36px;
        height: 36px;
        font-size: 26px;
    }

    .modal-title {
        font-size: 20px;
        padding-right: 40px;
    }

    .adv-wheel-layout,
    .adv-dice-layout,
    .coin-modal-body {
        grid-template-columns: 1fr;
        display: grid;
        gap: 18px;
    }

    .coin-right-section {
        margin-top: 0;
    }

    .coin-stats-result-grid {
        flex-direction: column;
    }

    .coins-display-area {
        height: 100px;
    }

    .adv-wheels-container {
        min-height: 0;
        padding: 8px;
        gap: 12px;
    }

    .adv-wheels-container.grid-2,
    .adv-wheels-container.grid-3,
    .adv-wheels-container.grid-4 {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .adv-wheel-item {
        min-height: 220px;
    }

    .adv-controls-container {
        gap: 10px;
    }

    .actions-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .options-bar,
    .stats-bar {
        flex-wrap: wrap;
        gap: 8px 16px;
    }

    .wheels-tabs-bar {
        grid-template-columns: 1fr;
    }

    .wheel-tab {
        min-width: 0;
    }

    .adv-textarea {
        height: 140px;
    }

    .adv-entries-container {
        max-height: 300px;
    }

    .entry-row {
        flex-wrap: wrap;
    }

    .entry-row input[type="text"] {
        flex-basis: calc(100% - 40px);
    }

    .adv-params-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .sort-group {
        flex-wrap: wrap;
    }

    .output-wrapper {
        flex-direction: column;
    }

    .export-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .btn-export {
        flex: 1;
    }

    #advTextOutput {
    min-height: 100px;
    }

    .dice-display-area {
        min-height: 240px;
        padding: 12px;
    }

    .dice-grid.grid-1 .dice-item {
        width: min(55vw, 180px);
        height: min(55vw, 180px);
        font-size: 56px;
    }

    .dice-grid.grid-2 .dice-item {
        width: min(30vw, 110px);
        height: min(30vw, 110px);
        font-size: 40px;
    }

    .dice-grid.grid-multi {
        grid-template-columns: repeat(3, 1fr);
    }

    .dice-grid.grid-multi .dice-item {
        width: min(20vw, 70px);
        height: min(20vw, 70px);
    }

    .dice-card-row {
        flex-wrap: wrap;
    }

    .dice-name-input {
        flex: 1;
        min-width: 100px;
    }

    .coin-checkbox-row {
        flex-wrap: wrap;
        gap: 8px 14px;
    }
}

@media (max-width: 380px) {
    body {
        padding: 8px;
        padding-bottom: 84px;
    }

    .math-header {
        padding: 12px;
    }

    .brand .logo-text,
    a:link,
    a:visited {
        font-size: 23px;
    }

    .page-title h2 {
        font-size: 23px;
    }

    .tool-card,
    .color-card {
        padding: 12px;
    }

    .picker-container {
        height: 155px;
    }

    .wheel-actions .btn-sub {
        flex-basis: 100%;
    }

    .actions-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
 *  MOBILE TOOL ORDER
 *  RNG → DICE + COIN → WHEEL → COLOR
 *  ========================================================== */


/* ================= MOBILE ================= */
/* Hiển thị trên Desktop ( > 768px ) */
@media (min-width: 769px) {
    .mobile-only-layout {
        display: none !important;
    }
    .desktop-only-layout {
        display: grid !important;
    }
}

/* Hiển thị trên Mobile ( <= 768px ) */
@media (max-width: 768px) {
    .tools-layout {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px;
        width: 100% !important;
    }

    .tools-left-col,
    .tools-right-col {
        display: contents !important;
    }

    /* Ép tất cả các khối card tràn đủ 100% chiều rộng màn hình */
    .card-wheel,
    .mini-tools-row,
    .card-rng,
    #cardColor {
    width: 100% !important;
    box-sizing: border-box !important;
    }

    /* Thứ tự hiển thị */
    .card-wheel { order: 1 !important; }
    .mini-tools-row { order: 2 !important; }
    .card-rng { order: 3 !important; }
    #cardColor { order: 4 !important; }

    /* Chia 2 cột 50-50 cho Dice và Coin */
    .mini-tools-row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px;
    }

    .mini-tools-row > * {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* ==========================================================
 *  ADVANCED WHEEL POINTER FIX
 *  ========================================================== */

/*
 * Cho mỗi wheel-item có kích thước thực sự bằng canvas.
 * Như vậy pointer top:0 sẽ nằm đúng ngay trên wheel,
 * thay vì nằm trên đầu toàn bộ grid cell.
 */
.adv-wheel-item {
    position: relative;

    width: min(100%, 300px);
    max-width: 100%;

    aspect-ratio: 1 / 1;
    height: auto;

    display: flex;
    align-items: center;
    justify-content: center;
}

.adv-wheel-item canvas {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none;
    max-height: none;

    border-radius: 50%;
    box-shadow: var(--card-shadow);
}

.adv-pointer-right {
    position: absolute;

    top: -6px;
    left: 50%;

    transform: translateX(-50%);

    width: 0;
    height: 0;

    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #eccc68;

    z-index: 20;
    pointer-events: none;

    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.2));
}