@font-face {
    font-family: 'Franklin';
    src: url('franklin.ttf') format('truetype');
}

@font-face {
    font-family: 'Pedra';
    src: url('pedra.ttf') format('truetype');
}

/* ============================================================
   GAME-CLIENT LOCAL TOKENS
   The battle UI keeps its own scroll/parchment scope (separate
   from brand.css). These tokens just name the existing hardcoded
   colors — values are unchanged, so the battle UI is visually
   identical; this only makes the palette maintainable.
   Shinobi reading: warm parchment combat scrolls, crimson
   "your turn"/accent, red enemy/damage, chakra-blue info.
   ============================================================ */
:root {
    --na-crimson:     #c41e3a; /* battle accent / active / your-turn */
    --na-danger:      #e74c3c; /* enemy / damage red */
    --na-parchment:   #fbe9b8; /* scroll card / panel interior */
    --na-scroll:      #d4c9a8; /* scroll surface */
    --na-scroll-2:    #c4b896; /* deeper scroll surface */
    --na-scroll-edge: #8b7d5c; /* scroll border / stroke */
    --na-chakra-blue: #56b0ff; /* chakra / info */
    --na-ink:         #141414; /* dark text on parchment */

    /* Game Client Dimensions
       The remaster (1100x800) is the permanent game client.
       The legacy 770x560 values are kept as named variables for reference
       only; no live selectors use them.
    */
    --game-current-w: 770px;
    --game-current-h: 560px;
    --game-remaster-window-w: 1280px;
    --game-remaster-window-h: 800px;
    --game-remaster-stage-w: 1100px;
    --game-remaster-stage-h: 800px;
    --game-remaster-side-gutter: 90px;
    /* Live aliases always point at the remaster stage. */
    --game-stage-w: var(--game-remaster-stage-w);
    --game-stage-h: var(--game-remaster-stage-h);
    --selection-bg-image: url("selectionbg-remaster.png?v=2");
    --ingame-bg-image: url("ingamebg-remaster.png?v=2");

    /* Future Remaster Asset Slots
       These filenames are placeholders for later Photoshop/export
       handoff. They are intentionally not used by default live
       selectors, so missing remaster files do not affect the 770x560
       client.
    */
    --selection-bg-remaster-image: url("selectionbg-remaster.png?v=2");
    --ingame-bg-remaster-image: url("ingamebg-remaster.png?v=2");
    --login-panel-remaster-image: url("loginscroll-remaster.png?v=2");
    --selection-panel-remaster-image: url("selectionpage-remaster.png?v=2");
    --selection-skill-panel-remaster-image: url("skillpage-remaster.png?v=2");
    --selection-scroll-remaster-image: url("selectionscroll-remaster.png?v=2");
    --skill-scroll-remaster-image: url("skillscroll-remaster.png?v=2");
    --modal-panel-remaster-image: url("searchingscroll-remaster.png?v=2");
    --battle-skill-row-remaster-image: url("ingameskillscroll-remaster.png?v=2");
    --battle-skill-info-remaster-image: url("ingamebottomscroll-remaster.png?v=2");
    --battle-end-panel-remaster-image: url("endscroll-remaster.png?v=2");
    --battle-scroll-behind-remaster-image: url("ingamescrollbehind-remaster.png?v=2");
    --options-button-remaster-image: url("optionscroll-remaster.png?v=2");
    --ladder-button-remaster-image: url("ladderbutton-remaster.png");
    --quick-button-remaster-image: url("quickbutton-remaster.png");
    --private-button-remaster-image: url("privatebutton-remaster.png");
    --logout-button-remaster-image: url("logout-remaster.png");
    --search-art-remaster-image: url("sasukesearch-remaster.png");
    --surrender-art-remaster-image: url("surrenderimage-remaster.png?v=2");
    --render-remaster-image: url("render-remaster.png?v=2");
    --win-remaster-image: url("win-remaster.png?v=2");
    --lose-remaster-image: url("lose-remaster.png?v=2");
    --dead-character-remaster-image: url("deadcharacter-remaster.png?v=2");
    --found-remaster-image: url("found-remaster.png");
    --loading-remaster-image: url("loading-remaster.png");
    --sharingan-remaster-image: url("sharingan-remaster.png");
    --skill-queue-remaster-image: url("skillqqueue-remaster.png?v=2");

    /* Future Remaster Asset Sizes
       Reference slots only. Existing elements keep their current
       dimensions until later .game-remaster layout phases wire these
       values into scoped rules.
    */
    --selection-panel-remaster-w: 997px;
    --selection-panel-remaster-h: 317px;
    --selection-skill-panel-remaster-w: 997px;
    --selection-skill-panel-remaster-h: 317px;
    --modal-panel-remaster-w: 559px;
    --modal-panel-remaster-h: 415px;
    --battle-skill-row-remaster-w: 545px;
    --battle-skill-row-remaster-h: 113px;
    --battle-skill-info-remaster-w: 748px;
    --battle-skill-info-remaster-h: 192px;
    --battle-end-panel-remaster-w: 918px;
    --battle-end-panel-remaster-h: 460px;
    --remaster-wide-button-w: 275px;
    --remaster-wide-button-h: 82px;
    --remaster-small-button-w: 260px;
    --remaster-small-button-h: 66px;
    --remaster-character-face: 107px;
    --remaster-skill-icon: 80px;
}

/* ============================================================
   GAME CLIENT REMASTER MODE
   Disabled by default.

/* ============================================================
   GAME-CLIENT REMASTER LAYOUT SCOPE
   The remaster (1100x800) is the permanent, only game client.
   The .game-remaster class is applied unconditionally to
   <body> in selection.html and ingame.html. These rules scope
   all remaster-specific layout overrides safely.
   ============================================================ */
.game-remaster {
    --game-stage-w: var(--game-remaster-stage-w);
    --game-stage-h: var(--game-remaster-stage-h);
    --remaster-selection-panel-left: 82px;
    --remaster-selection-panel-top: 468px;
    --remaster-panel-shadow:
        drop-shadow(0 10px 14px rgba(0, 0, 0, 0.38))
        drop-shadow(0 24px 42px rgba(0, 0, 0, 0.28));
    --remaster-button-shadow:
        drop-shadow(0 5px 6px rgba(0, 0, 0, 0.42))
        drop-shadow(0 13px 18px rgba(0, 0, 0, 0.26));
}

.game-remaster .background {
    background-image: var(--selection-bg-remaster-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.game-remaster .backgroundingame {
    background-image: var(--ingame-bg-remaster-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

/* Game Client Remaster Asset Hooks
   These selectors are documentation scaffolds for future phases.
   The full-stage backgrounds above are wired because their exports
   match the disabled 1100x800 remaster stage. Other panels/buttons
   require the layout phase before their larger assets can be safely
   applied without cropping or distortion.

   Planned mappings:
   .game-remaster .selectionpage     -> --selection-panel-remaster-image
   .game-remaster .skillpage         -> --selection-skill-panel-remaster-image
   .game-remaster modal panels       -> --modal-panel-remaster-image
   .game-remaster .skillscrollingame -> --battle-skill-row-remaster-image
   .game-remaster .skillinformation  -> --battle-skill-info-remaster-image
   .game-remaster .battle-end-panel  -> --battle-end-panel-remaster-image
*/

/* ============================================================
   SELECTION SCREEN REMASTER LAYOUT
   Disabled by default. Active only under .game-remaster.

   Manual testing note: temporarily add `game-remaster` to the
   selection page body or stage wrapper in browser devtools. Do not
   commit that class to selection.html until the remaster is ready.
   ============================================================ */
.game-remaster .background {
    width: var(--game-remaster-stage-w);
    height: var(--game-remaster-stage-h);
}

.game-remaster .shop-icon-glyph {
    width: 28px;
    height: 28px;
    font-size: 15px;
}

.game-remaster .shop-icon-balance {
    font-size: 13px;
}

.game-remaster .selectionpage {
    background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    width: var(--selection-panel-remaster-w);
    height: var(--selection-panel-remaster-h);
    left: var(--remaster-selection-panel-left);
    top: var(--remaster-selection-panel-top);
    z-index: 1;
}

.game-remaster .selectionpage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--selection-panel-remaster-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    filter: var(--remaster-panel-shadow);
    pointer-events: none;
    z-index: 0;
}

.game-remaster .selectionscroll {
    content: var(--selection-scroll-remaster-image);
    background-image: none;
    width: 66px;
    height: 342px;
    left: calc(var(--remaster-selection-panel-left) - 49px);
    top: calc(var(--remaster-selection-panel-top) - 12px);
    z-index: 2;
    filter: var(--remaster-panel-shadow);
}

.game-remaster .slot-list {
    grid-template-columns: repeat(7, 72px);
    gap: 14px;
    left: 62px;
    top: 40px;
    z-index: 3;
}

.game-remaster .slot-item {
    width: 72px;
    height: 72px;
    box-shadow: 0 3px 7px rgba(45, 21, 7, 0.38);
}

.game-remaster .selected-character-slot-list {
    position: absolute;
    gap: 22px;
    left: 704px;
    right: auto;
    top: 206px;
    z-index: 5;
}

.selected-count-label {
    font-family: 'Franklin', Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    color: #000000;
    margin: 0 0 6px;
    transition: color 0.2s ease;
}

.selected-count-label.ready {
    color: #1f7a3f;
}

.game-remaster .selected-count-label {
    position: absolute;
    left: 679px;
    top: 172px;
    width: 310px;
    margin: 0;
    z-index: 5;
    pointer-events: none;
}

.game-remaster .selected-character-slot {
    width: 72px;
    height: 72px;
    bottom: auto;
    left: auto;
    font-size: 30px;
    box-shadow: 0 3px 7px rgba(45, 21, 7, 0.38);
}

.game-remaster .player-card {
    position: absolute;
    width: 300px;
    left: 704px;
    bottom: auto;
    top: 34px;
    gap: 16px;
    padding: 0;
    font-size: 13px;
    align-items: flex-start;
    background: transparent;
    border: 0;
    box-shadow: none;
    z-index: 5;
}

.game-remaster .player-avatar {
    width: 107px;
    height: 107px;
    flex: 0 0 auto;
    margin-right: 0;
    border: 2px solid #000000;
    box-shadow: 0 4px 9px rgba(45, 21, 7, 0.42);
}

.game-remaster .player-infoselection {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
    flex: 1;
    line-height: 1.16;
}

.game-remaster .player-nameselection {
    color: var(--na-crimson);
    font-size: 13px;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 2px;
    overflow-wrap: anywhere;
}

.game-remaster .player-card .player-stat {
    margin-bottom: 0;
    padding: 0;
    border-top: 0;
    overflow-wrap: anywhere;
}

.game-remaster .skillviewer {
    left: 0;
    bottom: auto;
    top: -437px;
}

.game-remaster .skillscroll {
    content: var(--skill-scroll-remaster-image);
    background-image: none;
    width: 66px;
    height: 342px;
    left: 930px;
    top: -12px;
    filter: var(--remaster-panel-shadow);
}

.game-remaster .skillpage {
    background-image: var(--selection-skill-panel-remaster-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    width: var(--selection-skill-panel-remaster-w);
    height: var(--selection-skill-panel-remaster-h);
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 25px 80px 25px 30px;
    box-sizing: border-box;
    filter: var(--remaster-panel-shadow);
}

.game-remaster .skillviewer.collapsed {
    transform: translateX(-980px) scaleX(0.9);
}

.game-remaster .skillviewer.collapsed .skillscroll {
    transform: translateX(-360px) rotate(-15deg) scaleX(0.7);
}

.game-remaster .skillviewer.collapsed .skillpage {
    transform: translateX(-310px) scaleX(0);
}

.game-remaster .skill-card {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* skill-header: character info takes all remaining space; skill thumbnails anchor right */
.game-remaster .skill-header {
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 0;
}

/* character-info becomes a horizontal row: portrait | name+bio */
.game-remaster .character-info {
    flex: 1;
    min-width: 0;
    max-width: none;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}

/* portrait: fixed size, does not shrink */
.game-remaster .character-portrait {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
}

/* skill thumbnails in header: small, fixed, anchored right */
.game-remaster .skill-image {
    width: 62px;
    height: 62px;
}

.game-remaster .skill-images {
    flex: 0 0 auto;
    gap: 10px;
    margin-left: 0;
    margin-top: 0;
    max-width: none;
    align-self: center;
    padding: 6px;
}

.game-remaster .character-name {
    width: auto;
    min-height: 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    overflow-wrap: anywhere;
    margin-bottom: 5px;
}

.game-remaster .skill-detail-card {
    position: relative;
    bottom: auto;
    left: auto;
    right: auto;
    margin-top: 26px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}

.game-remaster .skill-detail-head {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 8px;
}

.game-remaster .skill-detail-image {
    width: 78px;
    height: 78px;
}

.game-remaster .skill-name {
    font-size: 17px;
    line-height: 1.15;
    overflow-wrap: anywhere;
    color: #ca1414;
}

.game-remaster .skill-description {
    font-size: 13px;
    line-height: 1.4;
    max-height: 60px;
    text-transform: uppercase;
}

.game-remaster .skill-detail-meta {
    font-size: 11px;
    margin-top: 5px;
    padding: 6px 10px;
    justify-content: space-evenly;
    border-radius: 4px;
    background: #1b2330;
    color: #fff;
}

.game-remaster .sdm-seg {
    padding: 0 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.game-remaster .sdm-lbl {
    color: rgba(255, 255, 255, 0.75);
}

.game-remaster .skill-classes,
.game-remaster .class-type,
.game-remaster .cooldown-value {
    color: #fff;
}

.game-remaster .energy-none {
    color: rgba(255, 255, 255, 0.6);
}

.game-remaster .energy-pip {
    width: 11px;
    height: 11px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background-color: rgba(255, 255, 255, 0.15);
}

.game-remaster .energy-pip.filled.energy-random {
    background:
        repeating-linear-gradient(135deg, #070707 0 4px, #b6bcc4 4px 8px);
    border-color: rgba(255, 255, 255, 0.82);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 0 6px rgba(255, 255, 255, 0.35);
}

.game-remaster .character-bio,
.game-remaster .skill-description {
    text-shadow: none;
    color: #1a0d04;
}

.game-remaster .button-container {
    position: absolute;
    left: 0;
    right: auto;
    top: -102px;
    width: var(--selection-panel-remaster-w);
    padding: 0 30px;
    box-sizing: border-box;
    gap: 0;
    justify-content: space-between;
    z-index: 5;
}

.game-remaster .game-button {
    position: static;
    bottom: auto;
    right: auto;
}

.training-dummy-button {
    display: none;
}

.game-remaster .training-dummy-button:not([hidden]) {
    position: absolute;
    right: 18px;
    top: -48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 156px;
    height: 32px;
    padding: 0 16px;
    border: 1px solid rgba(255, 184, 77, 0.55);
    border-radius: 999px;
    color: #ffe7af;
    background: rgba(12, 10, 9, 0.82);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.34);
    font-family: 'Franklin', Arial, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 7;
}

.selection-hub-shop-grid,
.selection-hub-mission-grid,
.selection-hub-inventory-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    align-content: start;
    gap: 14px 12px;
    padding: 14px;
    box-sizing: border-box;
    color: #f4efe2;
    background: #0d1118;
    border: 1px solid #3a3225;
    border-radius: 10px;
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.7);
}

.game-remaster .selection-hub-shop-grid,
.game-remaster .selection-hub-mission-grid,
.game-remaster .selection-hub-inventory-grid {
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 22px 18px;
    padding: 22px;
}

.selection-hub-env-empty {
    grid-column: 1 / -1;
    padding: 54px 18px;
    color: #d0c8b8;
    text-align: center;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.selection-hub-shop-card,
.selection-hub-mission-card,
.selection-hub-inventory-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
    background: linear-gradient(145deg, #1e2636 0%, #121722 100%);
    border: 1px solid #c49a45;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.selection-hub-shop-card:hover,
.selection-hub-mission-card:hover,
.selection-hub-inventory-card:hover {
    border-color: #ffae42;
    box-shadow: 0 10px 28px rgba(255, 174, 66, 0.35);
    transform: translateY(-3px);
}

.selection-hub-shop-face,
.selection-hub-mission-art {
    position: relative;
    overflow: hidden;
    background: #090c12;
    border: 2px solid #ffae42;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.selection-hub-shop-face {
    width: 88px;
    height: 88px;
    margin-bottom: 12px;
}

.selection-hub-shop-face img,
.selection-hub-mission-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.selection-hub-shop-name,
.selection-hub-mission-name {
    height: 38px;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.selection-hub-shop-price {
    margin: 8px 0 10px;
    color: #ffc107 !important;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.selection-hub-shop-buy {
    width: 100%;
    height: 33px;
    border: 1px solid #ffae42;
    border-radius: 6px;
    color: #2a1402 !important;
    background: linear-gradient(135deg, #ffae42 0%, #e8801a 100%) !important;
    font-family: 'Libre Franklin', 'Franklin', Arial, sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    transition: all 0.15s ease;
}

.selection-hub-shop-buy:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffffff, #fbe9b8);
    border-color: #c49a45;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 174, 66, 0.3);
}

.selection-hub-shop-buy:disabled {
    color: #6c7585;
    background: #2a2e38;
    border-color: #3d4350;
    cursor: default;
    box-shadow: none;
}

.game-remaster .training-dummy-button:not([hidden]):hover {
    color: #ffffff;
    border-color: rgba(255, 184, 77, 0.8);
    background: rgba(33, 21, 11, 0.9);
}

.game-remaster .training-dummy-button:disabled {
    opacity: 0.45;
    cursor: default;
}

.game-remaster .ladder-button img {
    content: var(--ladder-button-remaster-image);
}

.game-remaster .quick-button img {
    content: var(--quick-button-remaster-image);
}

.game-remaster .private-button img {
    content: var(--private-button-remaster-image);
}

.game-remaster .game-button img {
    width: var(--remaster-wide-button-w);
    height: var(--remaster-wide-button-h);
    filter: var(--remaster-button-shadow);
}

.game-remaster .logout-button img {
    content: var(--logout-button-remaster-image);
    width: 169px;
    height: var(--remaster-wide-button-h);
    filter: var(--remaster-button-shadow);
}

.game-remaster .game-button:hover img,
.game-remaster .logout-button:hover img {
    filter: brightness(1.06) var(--remaster-button-shadow);
}

.game-remaster .game-button:disabled,
.game-remaster .game-button[aria-disabled="true"],
.game-remaster .roster-page-button:disabled,
.selection-hub-shop-buy:disabled,
.selection-hub-story-begin:disabled,
.selection-hub-gauntlet-action:disabled,
.selection-hub-gauntlet-route-node:disabled,
.ok-button:disabled,
.private-match-ok:disabled,
.private-match-cancel:disabled,
.cancel-button:disabled {
    cursor: default;
}

.game-remaster .game-button:disabled img,
.game-remaster .game-button[aria-disabled="true"] img {
    filter: grayscale(0.18) brightness(0.78) var(--remaster-button-shadow);
}

.game-remaster .game-button:disabled:hover img,
.game-remaster .game-button[aria-disabled="true"]:hover img {
    filter: grayscale(0.18) brightness(0.78) var(--remaster-button-shadow);
}

body.selection-client-page,
body.ingame-client-page {
    min-width: var(--game-stage-w);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000000 !important;
    background-image: none !important;
}

.game-remaster .nextpage,
.game-remaster .lastpage {
    appearance: none;
    width: 28px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(45, 21, 7, 0.24);
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(255, 249, 225, 0.82), rgba(230, 184, 105, 0.82));
    color: #5a3214;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 3px 8px rgba(45, 21, 7, 0.22);
    cursor: pointer;
    z-index: 6;
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.22));
    transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s ease;
}

.game-remaster .roster-page-button span {
    display: block;
    font-family: 'Franklin', Arial, sans-serif;
    font-size: 24px;
    font-weight: 900;
    line-height: 0.8;
    transform: translateY(-2px);
}

.game-remaster .roster-page-button:hover {
    filter: brightness(1.06) drop-shadow(0 5px 8px rgba(0, 0, 0, 0.26));
}

.game-remaster .roster-page-button:disabled:hover {
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.22));
}

.game-remaster .nextpage {
    left: 662px;
    top: 140px;
}

.game-remaster .lastpage {
    left: 26px;
    top: 140px;
    transform: none;
}

.game-remaster .lastpage:hover {
    transform: none;
}

.game-remaster .searchingscroll,
.game-remaster .private-match-modal {
    background: var(--modal-panel-remaster-image) no-repeat center / contain;
    width: var(--modal-panel-remaster-w);
    height: var(--modal-panel-remaster-h);
    --remaster-modal-tan-left: 146px;
    --remaster-modal-tan-right: 28px;
    --remaster-modal-content-left: 160px;
    --remaster-modal-content-right: 42px;
    top: 0;
    left: 0;
    filter: var(--remaster-panel-shadow);
}

.game-remaster .sasukesearch {
    content: var(--search-art-remaster-image);
    width: 275px;
    height: 179px;
}

.game-remaster .sharingan {
    content: var(--sharingan-remaster-image);
    position: absolute;
    width: 92px;
    height: 92px;
    margin-top: 0;
    margin-left: 0;
    top: 153px;
    left: calc(var(--remaster-modal-tan-left) + ((var(--modal-panel-remaster-w) - var(--remaster-modal-tan-left) - var(--remaster-modal-tan-right)) / 2) - 42px);
    z-index: 3;
    pointer-events: none;
    transform-origin: 50% 50%;
    animation: spin 1s linear infinite;
}

/* Remaster searching modal inner content */
.game-remaster .searching {
    position: absolute;
    top: 92px;
    left: var(--remaster-modal-tan-left);
    right: var(--remaster-modal-tan-right);
    width: auto;
    margin: 0;
    text-align: center;
}

.game-remaster .sasukesearch {
    display: block;
    position: absolute;
    top: 114px;
    left: calc(var(--remaster-modal-tan-left) + ((var(--modal-panel-remaster-w) - var(--remaster-modal-tan-left) - var(--remaster-modal-tan-right) - 275px) / 2));
    margin: 0;
    z-index: 2;
}

.game-remaster .cancel-button {
    left: calc(var(--remaster-modal-tan-left) + ((var(--modal-panel-remaster-w) - var(--remaster-modal-tan-left) - var(--remaster-modal-tan-right) - 88px) / 2));
    top: 314px;
}

/* Backdrop z-index must beat .button-container (z-index:5) in the selectionpage stacking context */
.game-remaster .searching-backdrop,
.game-remaster .private-match-backdrop {
    z-index: 20;
}

/* Hub tab bar (Play/Shop/Missions/Inventory/Story) is a built-in, always-on
   part of the game screen now -- not gated behind the Remaster Mode preview
   toggle. Base rule below fits the classic 770x560 stage; .game-remaster
   overrides it with larger dimensions for the 1100x800 stage. */
.selection-hub-nav {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    width: 100%;
    height: 36px;
    padding: 0 10px;
    box-sizing: border-box;
    background: #080a12;
    border-bottom: 1px solid rgba(232, 128, 26, 0.22);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.55);
    font-family: 'Franklin', Arial, sans-serif;
    font-size: 10px;
    color: #f0ede8;
}

.game-remaster .selection-hub-nav {
    height: 52px;
    padding: 0 22px;
    font-size: 12px;
}

.selection-hub-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    min-width: 54px;
}


.selection-hub-mark {
    width: 32px;
    height: 37px;
    display: block;
    overflow: visible;
}

.selection-hub-mark polygon {
    fill: rgba(232, 128, 26, 0.06);
    stroke: #e8801a;
    stroke-width: 1.5;
}

.selection-hub-mark text {
    fill: #7c4dff;
    font-family: system-ui, sans-serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0;
}

.selection-hub-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 28px;
}

.selection-hub-tab {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 4px 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #d7cabc;
    font-family: 'Franklin', Arial, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
}

.selection-hub-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: transparent;
}

.selection-hub-tab:hover,
.selection-hub-tab.active {
    color: #ffb84d;
    background: transparent;
    border-color: transparent;
}

.selection-hub-tab:focus-visible,
.selection-hub-ryo:focus-visible,
.selection-hub-settings:focus-visible,
.roster-page-button:focus-visible,
.game-button:focus-visible,
.training-dummy-button:focus-visible {
    outline: 2px solid rgba(255, 184, 77, 0.9);
    outline-offset: 3px;
}

.selection-hub-tab.active::after {
    background: linear-gradient(90deg, #e8801a, #7c4dff);
}

@keyframes selection-nav-auto-hide {
    0%,
    72% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0.72;
        transform: translateY(-44px);
    }
}

.game-remaster .selection-hub-nav {
    z-index: 80;
    animation: selection-nav-auto-hide 5s ease 1.4s forwards;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.game-remaster .selection-hub-nav::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -18px;
    height: 18px;
}

.game-remaster .selection-hub-nav::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -11px;
    width: 48px;
    height: 11px;
    transform: translateX(-50%);
    border: 1px solid rgba(232, 128, 26, 0.36);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    background:
        linear-gradient(rgba(255, 184, 77, 0.72), rgba(255, 184, 77, 0.72)) center 3px / 18px 2px no-repeat,
        linear-gradient(rgba(255, 184, 77, 0.48), rgba(255, 184, 77, 0.48)) center 7px / 18px 2px no-repeat,
        rgba(8, 10, 18, 0.9);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.36);
    pointer-events: none;
}

.game-remaster .selection-hub-nav:hover,
.game-remaster .selection-hub-nav:focus-within {
    opacity: 1;
    transform: translateY(0);
    animation: none;
}

.selection-hub-ryo {
    height: 31px;
    margin-left: 0;
    min-width: 88px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px 0 6px;
    border: 1px solid rgba(232, 128, 26, 0.35);
    border-radius: 999px;
    color: #f0ede8;
    background: rgba(232, 128, 26, 0.1);
    font-size: 12px;
    font-weight: 800;
    box-shadow: none;
}

.selection-hub-coin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #4a2a05;
    background: radial-gradient(circle at 32% 28%, #ffe6a8, #ffb84d 55%, #e8801a 100%);
    font-size: 10px;
}

.selection-hub-settings {
    position: relative;
    margin-left: 7px;
    flex: 0 0 auto;
}

.selection-hub-settings-button {
    width: 31px;
    height: 31px;
    border: 1px solid rgba(232, 128, 26, 0.35);
    border-radius: 50%;
    color: #ffb84d;
    background: rgba(232, 128, 26, 0.1);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.selection-hub-settings-button:hover,
.selection-hub-settings.open .selection-hub-settings-button {
    color: #f0ede8;
    background: rgba(232, 128, 26, 0.22);
    border-color: rgba(232, 128, 26, 0.6);
}

.selection-hub-settings-menu {
    position: absolute;
    right: 0;
    top: 39px;
    width: 210px;
    padding: 10px;
    box-sizing: border-box;
    background: #0b0d15;
    border: 1px solid rgba(232, 128, 26, 0.3);
    border-radius: 8px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    z-index: 80;
}

.selection-hub-settings-menu[hidden] {
    display: none;
}

.selection-hub-settings-menu .remaster-preview-toggle {
    position: static;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 0 8px;
    border: 0;
    border-bottom: 1px solid rgba(232, 128, 26, 0.26);
    border-radius: 0;
    color: #f0ede8;
    background: transparent;
    font-size: 11px;
}

.selection-hub-settings-menu .sound-controller {
    position: static;
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 0;
    font-size: 11px;
    font-weight: 900;
}

.selection-hub-setting-label {
    color: #f0ede8;
}

.selection-hub-environment[hidden],
.selection-hub-env-panel[hidden] {
    display: none !important;
}

/* Any non-"play" tab covers the whole stage, so the roster/team-pick UI
   underneath doesn't need to be hidden separately -- it's fully obscured. */
body.hub-view-shop .selectionscroll,
body.hub-view-shop .selectionpage,
body.hub-view-missions .selectionscroll,
body.hub-view-missions .selectionpage,
body.hub-view-inventory .selectionscroll,
body.hub-view-inventory .selectionpage,
body.hub-view-story .selectionscroll,
body.hub-view-story .selectionpage {
    display: none;
}

.selection-hub-environment {
    position: absolute;
    display: block;
    left: 0;
    top: 36px;
    z-index: 12;
    width: 100%;
    height: calc(100% - 36px);
    box-sizing: border-box;
    overflow: hidden;
    color: #f0ede8;
    font-family: 'Libre Franklin', 'Franklin', Arial, sans-serif;
}

.game-remaster .selection-hub-environment {
    left: 42px;
    top: 76px;
    width: 1016px;
    height: 688px;
}

.selection-hub-env-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 12px 14px 14px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 14% 8%, rgba(232, 128, 26, 0.16), transparent 34%),
        radial-gradient(ellipse at 86% 4%, rgba(44, 156, 219, 0.08), transparent 32%),
        linear-gradient(155deg, #05070e 0%, #0c0c10 42%, #000000 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.68);
}

.game-remaster .selection-hub-env-panel {
    padding: 22px 24px 24px;
}

.selection-hub-env-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex: 0 0 auto;
    margin-bottom: 10px;
}

.selection-hub-env-header h1 {
    margin: 0 0 -4px;
    color: #e8801a;
    font-family: 'Libre Franklin', 'Franklin', Arial, sans-serif;
    font-size: 26px;
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.game-remaster .selection-hub-env-header h1 {
    margin: 0 0 -8px;
    font-size: 54px;
}

.selection-hub-env-header p {
    margin: 6px 0 0;
    color: #a36bff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.3;
    text-transform: uppercase;
}

.game-remaster .selection-hub-env-header p {
    margin: 9px 0 0;
    font-size: 12px;
    letter-spacing: 0.1em;
    line-height: 1.35;
}

.selection-hub-env-close {
    flex: 0 0 auto;
    min-width: 90px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(232, 128, 26, 0.42);
    border-radius: 4px;
    color: #f0ede8;
    background: rgba(232, 128, 26, 0.12);
    font-family: 'Libre Franklin', 'Franklin', Arial, sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.game-remaster .selection-hub-env-close {
    min-width: 116px;
    height: 34px;
    padding: 0 14px;
    font-size: 11px;
    letter-spacing: 0.07em;
}

.selection-hub-env-close:hover {
    color: #05070e;
    background: #e8801a;
}

.selection-hub-env-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-height: 36px;
    margin-bottom: 10px;
    padding: 6px 10px;
    box-sizing: border-box;
    background: #000000;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.game-remaster .selection-hub-env-toolbar {
    gap: 11px;
    min-height: 52px;
    margin-bottom: 16px;
    padding: 10px 14px;
}

.selection-hub-env-status {
    color: #c8c4bc;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.selection-hub-rank {
    height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: #c8c4bc;
    background: transparent;
    font-family: 'Libre Franklin', 'Franklin', Arial, sans-serif;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.selection-hub-rank:hover,
.selection-hub-rank.active {
    color: #ffffff;
    border-color: rgba(124, 77, 255, 0.72);
    background: rgba(124, 77, 255, 0.14);
}

.selection-hub-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    color: #c8c4bc;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.selection-hub-search input {
    width: 188px;
    height: 30px;
    padding: 0 6px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    outline: 0;
    color: #f0ede8;
    background: transparent;
    font: inherit;
    font-size: 11px;
    text-transform: none;
}

.selection-hub-search input:focus {
    border-bottom-color: #a36bff;
}

.selection-hub-shop-grid,
.selection-hub-mission-grid,
.selection-hub-inventory-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    align-content: start;
    gap: 14px 12px;
    padding: 14px;
    box-sizing: border-box;
    color: #1b2330;
    background: #faf8f3;
    border: 1px solid rgba(27, 35, 48, 0.12);
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

.game-remaster .selection-hub-shop-grid,
.game-remaster .selection-hub-mission-grid,
.game-remaster .selection-hub-inventory-grid {
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 22px 18px;
    padding: 22px;
}

.selection-hub-env-empty {
    grid-column: 1 / -1;
    padding: 54px 18px;
    color: #69707c;
    text-align: center;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.selection-hub-shop-card,
.selection-hub-mission-card,
.selection-hub-inventory-card {
    display: block;
    color: #1b2330;
    text-decoration: none;
}

.selection-hub-shop-face,
.selection-hub-mission-art {
    position: relative;
    overflow: hidden;
    background: #111111;
    border: 1px solid rgba(27, 35, 48, 0.16);
}

.selection-hub-shop-face {
    width: 84px;
    height: 84px;
    margin-bottom: 10px;
}

.selection-hub-shop-face img,
.selection-hub-mission-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.selection-hub-shop-name,
.selection-hub-mission-name {
    height: 36px;
    color: #1b2330;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.selection-hub-shop-price {
    margin: 8px 0 10px;
    color: #4c5562;
    font-size: 12px;
    font-weight: 900;
}

.selection-hub-shop-buy {
    width: 100%;
    height: 31px;
    border: 0;
    color: #05070e;
    background: #e8801a;
    font-family: 'Libre Franklin', 'Franklin', Arial, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.selection-hub-shop-buy:disabled {
    color: #8a8680;
    background: #ebe5d7;
    cursor: default;
}

.selection-hub-mission-level {
    color: #1f7a3f;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    min-height: 12px;
}

.selection-hub-mission-section {
    height: 27px;
    margin: 5px 0 8px;
    color: #69707c;
    font-size: 12px;
    font-style: italic;
    line-height: 1.2;
    text-transform: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.selection-hub-mission-art {
    aspect-ratio: 5 / 4;
    width: 100%;
}

.selection-hub-mission-card:hover .selection-hub-mission-art {
    border-color: #e8801a;
}

.selection-hub-mission-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 10px 10px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.92));
}

.selection-hub-mission-feature {
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.18;
}

.selection-hub-mission-rankline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
}

.selection-hub-mission-rank {
    color: #cdc9c2;
    font-size: 10px;
}

.selection-hub-status-pill {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 999px;
    color: #cdfbd9;
    background: #1f7a3f;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.selection-hub-status-pill.locked {
    color: #ffffff;
    background: #d52235;
}

.selection-hub-status-pill.completed {
    color: #ffffff;
    background: #69707c;
}

.selection-hub-status-pill.hard {
    color: #231507;
    background: #f6b73c;
}

.selection-hub-mission-view {
    margin-top: 8px;
    color: #4c5562;
    text-align: right;
    font-size: 11px;
    font-style: italic;
    text-transform: none;
}

.selection-hub-inventory-card {
    min-height: 148px;
    padding: 18px;
    box-sizing: border-box;
    border: 1px solid rgba(27, 35, 48, 0.12);
    background: #fffdf8;
}

.selection-hub-inventory-card span {
    display: block;
    color: #69707c;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.selection-hub-inventory-card strong {
    display: block;
    margin-top: 10px;
    color: #1b2330;
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
}

/* Story tab: episode-guide list (built in, no navigation away from the game
   screen) -- a light "sheet" scrolling inside the dark hub panel, mirroring
   how the shop/missions grids already sit on the panel's dark background. */
.selection-hub-story-list[hidden],
.selection-hub-story-briefing[hidden],
.selection-hub-gauntlet[hidden],
.selection-hub-mission-detail[hidden],
.selection-hub-mission-grid[hidden] {
    display: none !important;
}

.selection-hub-pve-tabs {
    flex: 0 0 auto;
}

.selection-hub-story-list,
.selection-hub-gauntlet {
    flex: 0 1 auto;
    max-height: 100%;
    min-height: 0;
    overflow: auto;
    box-sizing: border-box;
}

.game-remaster .selection-hub-story-list,
.game-remaster .selection-hub-gauntlet {
    padding: 22px;
}

.selection-hub-gauntlet {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #f7f3ea;
}

.selection-hub-gauntlet-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(27, 35, 48, 0.1);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(27, 35, 48, 0.96), rgba(42, 31, 24, 0.96));
    color: #f7f3ea;
}

.selection-hub-gauntlet-eyebrow {
    margin: 0 0 4px;
    color: #f8ae42;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.selection-hub-gauntlet-hero h2 {
    margin: 0;
    color: #f7f3ea;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.selection-hub-gauntlet-hero p {
    max-width: 560px;
    margin: 5px 0 0;
    color: rgba(247, 243, 234, 0.78);
    font-size: 11px;
    line-height: 1.45;
    text-transform: none;
}

.selection-hub-gauntlet-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 230px;
}

.selection-hub-gauntlet-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 14px;
    min-height: 0;
}

.selection-hub-gauntlet-main,
.selection-hub-gauntlet-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.selection-hub-gauntlet-side {
    position: sticky;
    top: 0;
    align-self: start;
}

.selection-hub-gauntlet-section,
.selection-hub-gauntlet-card {
    border: 1px solid rgba(27, 35, 48, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.66);
    padding: 12px;
}

.selection-hub-gauntlet-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.selection-hub-gauntlet-section-head h3,
.selection-hub-gauntlet-title {
    margin: 0;
    color: #1b2330;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.selection-hub-gauntlet-section-head p {
    margin: 0;
    color: #69707c;
    font-size: 10px;
    line-height: 1.3;
    text-align: right;
    text-transform: none;
}

.selection-hub-gauntlet-copy,
.selection-hub-gauntlet-status,
.selection-hub-gauntlet-meta {
    margin: 0;
    color: #4c5562;
    font-size: 11px;
    line-height: 1.45;
    text-transform: none;
}

.selection-hub-gauntlet-guide {
    background: rgba(255, 255, 255, 0.58);
}

.selection-hub-gauntlet-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.selection-hub-gauntlet-steps span {
    min-height: 44px;
    padding: 8px;
    border: 1px solid rgba(27, 35, 48, 0.12);
    border-radius: 7px;
    color: #69707c;
    background: rgba(255, 255, 255, 0.42);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.selection-hub-gauntlet-steps span.active {
    border-color: rgba(232, 128, 26, 0.65);
    color: #1b2330;
    background: rgba(232, 128, 26, 0.16);
}

.selection-hub-gauntlet-steps span.done {
    color: #1f7a3f;
}

.selection-hub-gauntlet-status.error {
    color: #d52235;
}

.selection-hub-gauntlet-status.success {
    color: #1f7a3f;
}

.selection-hub-gauntlet-actions,
.selection-hub-gauntlet-resources,
.selection-hub-gauntlet-team,
.selection-hub-gauntlet-offers {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.selection-hub-gauntlet-select {
    height: 34px;
    min-width: 170px;
    padding: 0 10px;
    border: 1px solid rgba(27, 35, 48, 0.18);
    border-radius: 6px;
    background: #fffdf8;
    color: #1b2330;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.selection-hub-gauntlet-node,
.selection-hub-gauntlet-resource,
.selection-hub-gauntlet-member {
    border: 1px solid rgba(27, 35, 48, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.54);
}

.selection-hub-gauntlet-resources {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.selection-hub-gauntlet-resource {
    padding: 9px;
}

.selection-hub-gauntlet-resource span,
.selection-hub-gauntlet-node span {
    display: block;
    color: #69707c;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.selection-hub-gauntlet-resource strong {
    display: block;
    margin-top: 2px;
    color: #1b2330;
    font-size: 15px;
}

.selection-hub-gauntlet-resource em,
.selection-hub-gauntlet-node em {
    display: block;
    margin-top: 4px;
    color: #69707c;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.25;
    text-transform: none;
}

.selection-hub-gauntlet-choice-list,
.selection-hub-gauntlet-event-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.selection-hub-gauntlet-choice {
    padding: 10px;
    border: 1px solid rgba(27, 35, 48, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.54);
}

.selection-hub-gauntlet-choice strong {
    display: block;
    color: #1b2330;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.selection-hub-gauntlet-choice p {
    margin: 4px 0 8px;
    color: #4c5562;
    font-size: 11px;
    line-height: 1.35;
    text-transform: none;
}

.selection-hub-gauntlet-team {
    display: grid;
    grid-template-columns: 1fr;
}

.selection-hub-gauntlet-member {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
}

.selection-hub-gauntlet-member img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    background: #111;
}

.selection-hub-gauntlet-member strong,
.selection-hub-gauntlet-node strong {
    display: block;
    color: #1b2330;
    font-size: 11px;
    font-weight: 900;
}

.selection-hub-gauntlet-map {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
}

.selection-hub-gauntlet-row {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.selection-hub-gauntlet-row-label {
    color: #69707c;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.selection-hub-gauntlet-nodes {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.selection-hub-gauntlet-node {
    min-height: 76px;
    padding: 8px;
    color: #1b2330;
    cursor: default;
    text-align: left;
    font-family: inherit;
}

.selection-hub-gauntlet-node.reachable {
    border-color: rgba(232, 128, 26, 0.65);
    box-shadow: 0 0 0 1px rgba(232, 128, 26, 0.22);
    cursor: pointer;
}

.selection-hub-gauntlet-node.visited {
    opacity: 0.55;
}

.selection-hub-gauntlet-node.locked {
    opacity: 0.36;
}

.selection-hub-gauntlet-node.reachable:hover {
    background: rgba(232, 128, 26, 0.12);
}

.selection-hub-gauntlet-next {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid rgba(232, 128, 26, 0.38);
    background: rgba(232, 128, 26, 0.1);
}

.selection-hub-gauntlet-next span {
    display: block;
    margin-bottom: 2px;
    color: #9b5a07;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.selection-hub-gauntlet-next strong {
    display: block;
    color: #1b2330;
    font-size: 15px;
    font-weight: 900;
    text-transform: uppercase;
}

.selection-hub-gauntlet-next p,
.selection-hub-gauntlet-callout p {
    margin: 3px 0 0;
    color: #4c5562;
    font-size: 11px;
    line-height: 1.35;
    text-transform: none;
}

.selection-hub-gauntlet-callout,
.selection-hub-gauntlet-last {
    margin-top: 10px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(232, 128, 26, 0.1);
}

.selection-hub-gauntlet-last span {
    display: block;
    color: #69707c;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.selection-hub-gauntlet-last strong {
    display: block;
    margin-top: 2px;
    color: #1b2330;
    font-size: 12px;
    line-height: 1.3;
}

.selection-hub-gauntlet {
    gap: 12px;
    background: #f4eee2;
}

.selection-hub-gauntlet-hero {
    align-items: center;
    border-color: rgba(27, 35, 48, 0.08);
    border-radius: 8px;
    background: linear-gradient(135deg, #202833, #332720);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.selection-hub-gauntlet-command {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(168, 103, 24, 0.28);
    border-radius: 8px;
    background: #fff8ec;
}

.selection-hub-gauntlet-command span {
    display: block;
    color: #b76611;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.selection-hub-gauntlet-command strong {
    display: block;
    margin-top: 2px;
    color: #1b2330;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.selection-hub-gauntlet-command-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.selection-hub-gauntlet-command .selection-hub-gauntlet-command-hint {
    min-width: 180px;
    color: #667080;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-align: right;
    text-transform: none;
}

.selection-hub-gauntlet-choice-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.selection-hub-story-begin.compact {
    min-width: 92px;
    height: 32px;
    padding: 0 14px;
}

.selection-hub-gauntlet-dashboard {
    grid-template-columns: minmax(0, 1fr) 272px;
}

.selection-hub-gauntlet-section,
.selection-hub-gauntlet-card {
    border: 0;
    border-top: 1px solid rgba(27, 35, 48, 0.12);
    border-radius: 0;
    background: transparent;
    padding: 12px 0 0;
}

.selection-hub-gauntlet-main .selection-hub-gauntlet-section:first-child,
.selection-hub-gauntlet-side .selection-hub-gauntlet-section:first-child,
.selection-hub-gauntlet-side .selection-hub-gauntlet-card:first-child {
    border-top: 0;
    padding-top: 0;
}

.selection-hub-gauntlet-guide {
    background: transparent;
}

.selection-hub-gauntlet-steps {
    gap: 6px;
}

.selection-hub-gauntlet-steps span {
    min-height: 38px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.42);
}

.selection-hub-gauntlet-resources {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.selection-hub-gauntlet-resource,
.selection-hub-gauntlet-member,
.selection-hub-gauntlet-choice {
    border-radius: 7px;
    background: rgba(255, 252, 246, 0.72);
}

.selection-hub-gauntlet-relic-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.selection-hub-gauntlet-relic {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    padding: 6px 9px;
    border: 1px solid rgba(168, 103, 24, 0.32);
    border-radius: 999px;
    color: #1b2330;
    background: #fff8ec;
    cursor: help;
}

.selection-hub-gauntlet-relic strong {
    overflow: hidden;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.selection-hub-gauntlet-relic.curse {
    border-color: rgba(170, 43, 43, 0.34);
    color: #8f2424;
    background: #fff1f0;
}

.selection-hub-gauntlet-relic::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    z-index: 20;
    display: none;
    width: 220px;
    padding: 9px 10px;
    border: 1px solid rgba(27, 35, 48, 0.18);
    border-radius: 7px;
    color: #f7f3ea;
    background: rgba(27, 35, 48, 0.96);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.3);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35;
    text-transform: none;
    white-space: normal;
}

.selection-hub-gauntlet-relic:hover::after,
.selection-hub-gauntlet-relic:focus::after {
    display: block;
}

.selection-hub-gauntlet-route {
    padding: 12px;
    border: 1px solid rgba(27, 35, 48, 0.12);
    border-radius: 8px;
    background: rgba(255, 252, 246, 0.64);
}

.selection-hub-gauntlet-route .selection-hub-gauntlet-section-head {
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(27, 35, 48, 0.1);
}

.selection-hub-gauntlet-map {
    gap: 7px;
    margin-top: 10px;
    padding: 12px;
    border-radius: 8px;
    background: linear-gradient(180deg, #242832, #211c18);
}

.selection-hub-gauntlet-row {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 9px;
}

.selection-hub-gauntlet-row-label {
    color: rgba(247, 243, 234, 0.72);
}

.selection-hub-gauntlet-nodes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.selection-hub-gauntlet-node {
    position: relative;
    min-height: 68px;
    padding: 9px 10px 8px;
    border: 1px solid rgba(247, 243, 234, 0.14);
    border-left: 4px solid #858b95;
    border-radius: 6px;
    color: #1b2330;
    background: #fffaf0;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease, opacity 120ms ease;
}

.selection-hub-gauntlet-node.type-battle {
    border-left-color: #d26d22;
}

.selection-hub-gauntlet-node.type-elite-battle {
    border-left-color: #9a6dff;
}

.selection-hub-gauntlet-node.type-event {
    border-left-color: #4d8dc8;
}

.selection-hub-gauntlet-node.type-rest-camp {
    border-left-color: #4e9b62;
}

.selection-hub-gauntlet-node.type-merchant {
    border-left-color: #c99d2f;
}

.selection-hub-gauntlet-node.type-scroll-cache {
    border-left-color: #e4c857;
}

.selection-hub-gauntlet-node span {
    color: #687180;
}

.selection-hub-gauntlet-node strong {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.15;
}

.selection-hub-gauntlet-node em {
    color: #5b6572;
}

.selection-hub-gauntlet-node.reachable {
    border-color: rgba(248, 174, 66, 0.92);
    border-left-color: #f08a18;
    box-shadow: 0 0 0 2px rgba(248, 174, 66, 0.18), 0 8px 20px rgba(0, 0, 0, 0.2);
}

.selection-hub-gauntlet-node.reachable:hover {
    transform: translateY(-1px);
    background: #fff3dc;
}

.selection-hub-gauntlet-node.visited {
    opacity: 0.58;
}

.selection-hub-gauntlet-node.locked {
    opacity: 0.28;
    filter: grayscale(0.2);
}

.selection-hub-story-chapter {
    margin-bottom: 6px;
}

.selection-hub-story-chapter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 6px 10px;
    border-bottom: 2px solid rgba(232, 128, 26, 0.35);
}

.selection-hub-story-chapter-title {
    margin: 0;
    color: #1b2330;
    font-family: 'Libre Franklin', 'Franklin', Arial, sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.selection-hub-story-chapter-progress {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #8a8680;
    white-space: nowrap;
}

.selection-hub-story-row {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 6px;
    border-bottom: 1px solid rgba(27, 35, 48, 0.08);
    color: #1b2330;
    text-decoration: none;
    cursor: pointer;
    border-radius: 6px;
    transition: background 0.12s ease;
}

.selection-hub-story-row:last-child {
    border-bottom: 0;
}

.selection-hub-story-row:hover {
    background: rgba(124, 77, 255, 0.08);
}

.selection-hub-story-row.locked {
    opacity: 0.68;
}

.selection-hub-story-row.locked:hover {
    background: transparent;
}

.selection-hub-story-begin.hard {
    background: #f6b73c;
    color: #231507;
}

.selection-hub-story-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
    background: #111;
    border: 1px solid rgba(27, 35, 48, 0.16);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.selection-hub-story-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.selection-hub-story-title {
    margin: 0 0 3px;
    font-family: 'Libre Franklin', 'Franklin', Arial, sans-serif;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #1b2330;
}

.selection-hub-story-meta {
    margin: 0;
    font-size: 10px;
    letter-spacing: 0.02em;
    color: #69707c;
}

.game-remaster .selection-hub-story-title {
    font-size: 14px;
}

/* Inline briefing sub-view: replaces the list within the same panel when a
   battle is selected -- no page navigation happens here at all. */
.selection-hub-story-briefing {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 0 1 auto;
    max-height: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: 20px;
    overflow: auto;
    color: #1b2330;
    font-family: 'Libre Franklin', 'Franklin', Arial, sans-serif;
    background: #faf8f3;
    border: 1px solid rgba(27, 35, 48, 0.12);
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

.selection-hub-story-back {
    align-self: flex-start;
    border: 0;
    background: none;
    color: #4c5562;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
}

.selection-hub-story-back:hover {
    color: #7c4dff;
}

.selection-hub-story-briefing-title {
    margin: 2px 0 0;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #1b2330;
}

.selection-hub-story-briefing-line {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    text-transform: none;
    color: #4c5562;
}

.selection-hub-story-briefing-line strong {
    color: #1b2330;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 10px;
}

.selection-hub-mission-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 0 1 auto;
    max-height: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: 18px;
    overflow: auto;
    color: #1b2330;
    font-family: 'Libre Franklin', 'Franklin', Arial, sans-serif;
    background: #faf8f3;
    border: 1px solid rgba(27, 35, 48, 0.12);
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

.selection-hub-mission-back {
    align-self: flex-start;
    border: 0;
    background: none;
    color: #4c5562;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
}

.selection-hub-mission-back:hover {
    color: #7c4dff;
}

.selection-hub-mission-detail-level {
    margin-top: 2px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1f7a3f;
}

.selection-hub-mission-detail-title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #1b2330;
}

.selection-hub-mission-detail-body {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.selection-hub-mission-detail-art {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    border: 1px solid rgba(27, 35, 48, 0.18);
    border-radius: 6px;
}

.selection-hub-mission-detail-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.selection-hub-mission-detail-head {
    margin-top: 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7c4dff;
}

.selection-hub-mission-detail-head:first-child {
    margin-top: 0;
}

.selection-hub-mission-detail-head.reward {
    color: #e8801a;
}

.selection-hub-mission-detail-line {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    text-transform: none;
    color: #4c5562;
}

.selection-hub-mission-detail-line strong {
    color: #1b2330;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 10px;
}

.selection-hub-mission-reward-char {
    display: flex;
    align-items: center;
    gap: 8px;
}

.selection-hub-mission-reward-char img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid rgba(27, 35, 48, 0.25);
}

.selection-hub-mission-reward-name {
    font-size: 12px;
    font-weight: 700;
    color: #1b2330;
}

@media (max-width: 560px) {
    .selection-hub-mission-detail-body {
        grid-template-columns: 1fr;
    }
}

.selection-hub-story-team-label {
    margin: 8px 0 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #69707c;
}

.selection-hub-story-team-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.selection-hub-story-team-member {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 64px;
}

.selection-hub-story-team-portrait {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(27, 35, 48, 0.18);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
    background: #111;
}

.selection-hub-story-team-name {
    font-size: 9px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #4c5562;
    line-height: 1.25;
}

.selection-hub-story-actions {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid rgba(27, 35, 48, 0.1);
    display: flex;
    align-items: center;
    gap: 14px;
}

.selection-hub-story-begin {
    height: 36px;
    padding: 0 24px;
    border: 0;
    color: #05070e;
    background: linear-gradient(180deg, #ffae42, #e8801a);
    box-shadow: 0 3px 8px rgba(232, 128, 26, 0.35);
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 999px;
    transition: filter 0.12s ease, transform 0.12s ease;
}

.selection-hub-story-begin:hover:not(:disabled) {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

.selection-hub-story-begin:disabled {
    color: #8a8680;
    background: #ebe5d7;
    box-shadow: none;
    cursor: default;
}

.selection-hub-story-status {
    font-size: 11px;
    color: #69707c;
}

.selection-hub-story-status.error {
    color: #d52235;
}

.game-remaster .button-container {
    top: -102px;
}

body {
    font-family: 'Franklin', sans-serif;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

body.selection-client-page {
    min-width: var(--game-stage-w);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000000;
}

.selection-client-page .background {
    flex: 0 0 auto;
}

.remaster-preview-toggle {
    position: fixed;
    top: 34px;
    right: 12px;
    z-index: 10000;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    color: #f9e6b0;
    background: rgba(0, 0, 0, 0.68);
    border: 1px solid rgba(249, 190, 86, 0.55);
    border-radius: 4px;
    font-family: 'Franklin', Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.remaster-preview-toggle input {
    margin: 0;
    accent-color: var(--na-crimson);
}

body.custom-game-cursor,
body.custom-game-cursor * {
    cursor: url('cursor.png') 0 0, auto !important;
}

body.custom-game-cursor.cursor-clicking,
body.custom-game-cursor.cursor-clicking * {
    cursor: url('cursor_click.png') 0 0, auto !important;
}

h1, h2, h3 {
    font-family: 'Petra', serif;
}

.background {
    background-image: var(--selection-bg-image);
    width: var(--game-stage-w);
    height: var(--game-stage-h);
    position: relative;
}

.sound-controller {
    position: absolute;
    right: 12px;
    z-index: 7000;
    display: flex;
    align-items: center;
    padding: 5px 8px;
}

.sound-volume {
    width: 88px;
    accent-color: var(--na-crimson);
}

/* Superseded everywhere by the hub nav's Shop tab. */
.shop-icon {
    display: none;
}

.shop-icon:hover {
    background: rgba(0, 0, 0, 0.82);
    box-shadow: 0 0 0 2px rgba(249, 190, 86, 0.35), 0 4px 12px rgba(0, 0, 0, 0.4);
    transform: translateY(-1px) scale(1.04);
}

.shop-icon:active {
    transform: scale(0.96);
}

.shop-icon-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #ffe6a8, #ffb84d 55%, var(--na-crimson) 100%);
    color: #4a2a05;
    font-size: 12px;
    font-weight: 900;
}

.shop-icon-balance {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ingame-sound-controller {
    position: absolute;
    top: 480px;
    left: 40px;
    z-index: 7000;
    display: flex;
    align-items: center;
    padding: 5px 8px;
}

.ingame-sound-volume {
    width: 88px;
    accent-color: var(--na-crimson);
}

.login {
        background-image: url('loginscroll.png');
            width: 391px;
    height: 290px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.logintext {
    font-family: 'Franklin';
    font-size: 16px;
    position: absolute;
    top: 25px;
    left: 50px;
    text-align: center;
    width: 300px;
    left: 18%;
}

.login-form {
    position: absolute;
    top: 100px;
    left: 80px;
    width: 300px;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 18px;
    flex-wrap: wrap;
    width: 300px;
    gap: 10px;
}

.login-form input {
    width: 170px;
    height: 20px;
}

.password-input {
    left: -1px;
    position: relative;
}

.ok-button {
    position: absolute;
    top: 120px;
    left: 100px;
    background-color: var(--na-parchment);
    border: 1px solid #000000;
    color: var(--na-ink);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    width: 88px;
    height: 25px;
    font-family: 'Pedra';
    outline: none;
    box-shadow: none;
}


.ok-buttonendturn {
    position: absolute;
    top: 230px;
    left: 120px;
    background-color: var(--na-parchment);
    border: 1px solid #000000;
    color: var(--na-ink);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    width: 88px;
    height: 25px;
    font-family: 'Pedra';
    outline: none;
    box-shadow: none;
}

.cancel-buttonendturn {
    position: absolute;
    top: 230px;
    left: 230px;
    background-color: var(--na-parchment);
    border: 1px solid #000000;
    color: var(--na-ink);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    width: 88px;
    height: 25px;
    font-family: 'Pedra';
    outline: none;
    box-shadow: none;
}



.ok-button:focus {
    outline: none;
}

.ok-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.login-status {
    flex-basis: 100%;
    font-size: 16px;
    color: var(--na-crimson);
    min-height: 18px;
    margin-top: 6px;
    text-align: center
}

.login-status[data-variant="info"] {
    color: #333333;
}

.login-status[data-variant="success"] {
    color: #0f8a1f;
}

.selectionscroll {
    background-image: url('selectionscroll.png');
    width: 46px;
    height: 239px;
    position: absolute;
    left: 3%;
    top: 55%;
        z-index: 2;
}

.selectionpage {
    background-image: url('selectionpage.png');
    width: 697px;
    height: 222px;
    position: absolute;
    left: 7%;
    top: 56.5%;
    z-index: 1;
    background-position: 50% 50%;
    animation: stage-bg-drift 22s ease-in-out infinite alternate;
}

.slot-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(7, 50px);
    gap: 10px;
    left: 5.5%;
    top: 11.5%;
    position: relative;
    z-index: 2;
}

.slot-item {
    width: 50px;
    height: 50px;
    position: relative;
    background-color: var(--na-scroll);
    border: 1px solid #2d1507;
    box-sizing: border-box;
    cursor: grab;
    user-select: none;
    /* manipulation (not none): keeps taps/double-taps firing reliably on
       touch devices and disables double-tap-to-zoom, since native HTML5
       drag-and-drop doesn't work over touch anyway -- touch users rely
       entirely on tap / double-tap here. */
    touch-action: manipulation;
    box-shadow: 0 2px 4px rgba(45, 21, 7, 0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.slot-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: grab;
    user-select: none;
    touch-action: manipulation;
}

.slot-item:hover {
    border-color: #000000;
    box-shadow: 0 4px 8px rgba(45, 21, 7, 0.45);
    transform: translateY(-1px);
}

.slot-item.slot-locked {
    cursor: not-allowed;
    filter: grayscale(0.85);
    opacity: 0.55;
}

.slot-item.slot-locked:hover {
    transform: none;
    box-shadow: 0 2px 4px rgba(45, 21, 7, 0.35);
}

.slot-item.slot-locked .slot-image {
    cursor: not-allowed;
}

.slot-lock-label {
    position: absolute;
    left: 3px;
    right: 3px;
    bottom: 3px;
    box-sizing: border-box;
    background: rgba(20, 20, 20, 0.82);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.55);
    font-family: 'Franklin', Arial, sans-serif;
    font-size: 8px;
    line-height: 1.3;
    text-align: center;
    pointer-events: none;
}

.slot-image.drag-hidden {
    visibility: hidden;
}

.player-card {
    display: flex;
    color: #000000;
    font-family: 'Franklin', Arial, sans-serif;
    font-size: 13px;
    padding: 5px;
    width: 305px;
    left: 67%;
    bottom: 67.8%;
    position: relative;
text-transform: uppercase;
}

.player-avatar {
    width: 100px;
    height: 100px;
    border: 2px solid #000000;
    margin-right: 10px;
    box-shadow: 0 3px 6px rgba(45, 21, 7, 0.4);
}

.player-info {
    display: flex;
    flex-direction: column;
    position:relative;
        max-width: 183px;
      min-width: 183px;
    left: -66px;
        align-items: flex-end;
}

.player-inforight {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position:relative;
    left: -4px;
    top: 1px;
}


.player-stat {
    margin-bottom: 2px;
}

.player-level-block {
    margin: 3px 25px 4px 0;
}

.player-level-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
}

.player-level-value {
    color: var(--na-crimson);
}

.player-level-xp {
    font-size: 9px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.55);
    letter-spacing: 0.02em;
    text-transform: none;
}

.player-level-bar-track {
    margin-top: 2px;
    height: 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.15);
    overflow: hidden;
}

.player-level-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--na-crimson), #ff8a3d);
    border-radius: 999px;
    transition: width 0.4s ease;
}

.selected-character-slot-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
    position: relative;
    z-index: 3;
}

.selected-character-slot {
    width: 50px;
    height: 50px;
    background-color: var(--na-scroll-2);
    border: 1px solid #2d1507;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Pedra', Arial, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #ebebeb;
    position: relative;
    bottom: 140px;
    left: 480px;
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: 0 2px 4px rgba(45, 21, 7, 0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.selected-character-slot:hover {
    border-color: #000000;
    box-shadow: 0 4px 8px rgba(45, 21, 7, 0.45);
    transform: translateY(-1px);
}

.selected-character-slot.drag-over {
    box-shadow: 0 0 0 2px var(--na-crimson) inset, 0 0 6px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.selected-slot-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.button-container {
    display: flex;
    gap: 15px;
    align-items: center;
}

.game-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    bottom: 385px;
    right: 30px;
    position: relative;
}

.game-button img {
    display: block;
    width: 192px;
    height: 57px;
}

.logout-button img{
        display: block;
    width: 118px;
    height: 57px;
}

.game-button:hover {
    opacity: 0.9;
}

.game-button:active {
    opacity: 0.8;
}

.skillviewer {
    position: absolute;
    bottom: 280px;
    left: 80px;
    transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
    transform-origin: left center;
}

.skillscroll {
    z-index: 2;
    position: relative;
    left: 520px;
    cursor: pointer;
    transition: transform 0.45s ease-in-out;
}

.skillpage {
    background-image: url('skillpage.png');
    width: 530px;
    height: 222px;
    position: absolute;
    z-index: 1;
    top: 9px;
    left: 10px;
    transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
}

.skillviewer.collapsed {
    transform: translateX(-700px) scaleX(0.9);
    opacity: 0;
    pointer-events: none;
}

.skillviewer.collapsed .skillscroll {
    transform: translateX(-260px) rotate(-15deg) scaleX(0.7);
}

.skillviewer.collapsed .skillpage {
    transform: translateX(-200px) scaleX(0);
    opacity: 0;
}

.skill-card {
    font-family: 'Franklin', Arial, sans-serif;
    position: relative;
    top: 12px;
    left: 30px;
    width: 460px;
}

.skill-header {
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
}

.character-info {
    display: flex;
    flex-direction: column;
}

.character-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.character-bio {
    display: none;
}

.game-remaster .character-bio {
    display: block;
    font-size: 12px;
    line-height: 1.45;
    text-transform: uppercase;
    color: #3a2a10;
    margin: 0;
    max-height: 65px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(45, 21, 7, 0.35) transparent;
}

.character-name {
    color: #ca1414;
    font-size: 16px;
    margin-bottom: 5px;
    text-transform: uppercase;
    width: 300px;
}

.character-portrait {
    width: 75px;
    height: 75px;
    border: 1px solid #000;
}

.skill-images {
    display: flex;
    gap: 8px;
    top: 0px;
    position: relative;
    margin-left: -182px;
    max-width: 332px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 6px 6px 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(126, 54, 195, 0.95) rgba(45, 21, 7, 0.18);
    transform: scaleY(-1);
}

.skill-images > * {
    transform: scaleY(-1);
}

.skill-images::-webkit-scrollbar {
    height: 6px;
}

.skill-images::-webkit-scrollbar-track {
    background: rgba(45, 21, 7, 0.18);
    border-radius: 999px;
}

.skill-images::-webkit-scrollbar-thumb {
    background: rgba(126, 54, 195, 0.95);
    border-radius: 999px;
}

.skill-images::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.skill-image {
    width: 75px;
    height: 75px;
    border: 1px solid #000;
    cursor: pointer;
    transition: outline 0.1s, box-shadow 0.1s;
}

.skill-image.active {
    outline: 2px solid var(--na-crimson);
    box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.25);
}

.skill-image.alternate-skill {
    border-color: #7e36c3;
    box-shadow: 0 0 0 2px rgba(126, 54, 195, 0.45), 0 0 10px rgba(126, 54, 195, 0.65);
}

.skill-image.alternate-skill.active {
    outline-color: #a855f7;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.35), 0 0 14px rgba(168, 85, 247, 0.85);
}

/* ── Skill Detail Card (selection screen modern panel) ─────── */

.skill-detail-card {
    background: transparent;
    border: none;
    padding: 0;
}

.skill-detail-head {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    margin-bottom: 6px;
}

.skill-detail-image {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border: 1px solid rgba(27, 35, 48, 0.22);
    border-radius: 5px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
    background: rgba(27, 35, 48, 0.06);
}

.skill-detail-kicker {
    font-family: 'Franklin', Arial, sans-serif;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 1px;
}

.skill-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--na-crimson);
    text-transform: uppercase;
    line-height: 1.1;
    margin: 1px 0 3px;
}

.skill-description {
    font-size: 10px;
    line-height: 1.4;
    color: #2a2a2a;
    text-transform: none;
    max-height: 40px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(45, 21, 7, 0.4) transparent;
    margin: 0;
}

/* ── Skill Detail Meta rail ─────────────────────────────────── */

.skill-detail-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: #1b2330;
    border-radius: 999px;
    padding: 5px 6px;
    gap: 0;
    font-family: 'Franklin', Arial, sans-serif;
    font-size: 8px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
}

.sdm-seg {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.sdm-seg--last {
    border-right: none;
}

.sdm-lbl {
    color: #99a0ad;
    font-weight: 700;
    white-space: nowrap;
}

.energy-bar {
    display: flex;
    align-items: center;
    gap: 3px;
}

.energy-pip {
    width: 9px;
    height: 9px;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.15);
    display: inline-block;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08);
    transition: box-shadow 0.15s ease;
}

.energy-pip.filled {
    background-color: #00a651;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.45), 0 0 3px rgba(0, 166, 81, 0.55);
}

.energy-pip.filled.energy-ninjutsu {
    background-color: var(--na-chakra-blue);
}

.energy-pip.filled.energy-bloodline {
    background-color: var(--na-danger);
}

.energy-pip.filled.energy-random {
    background:
        repeating-linear-gradient(135deg, #1f2329 0 3px, #a8adb5 3px 6px);
    border-color: rgba(255, 255, 255, 0.78);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}

.energy-pip.filled.energy-genjutsu {
    background-color: #e8e8e8;
    border-color: rgba(0, 0, 0, 0.25);
}

.energy-pip.filled.energy-taijutsu {
    background-color: #0fec7a;
}

.energy-none {
    color: #99a0ad;
    font-style: italic;
}

.skill-classes {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    color: #fff;
    font-weight: 700;
    font-style: italic;
}

.class-type {
    color: #fff;
}

.cooldown-value {
    color: #fff;
    font-weight: 700;
    font-style: italic;
}

.cooldown-icon {
    width: 16px;
    height: 16px;
}

.hidden {
    display: none !important;
}

.gauntlet-battle-indicator {
    position: absolute;
    left: 824px;
    top: 500px;
    transform: translate(-50%, -50%);
    z-index: 180;
    font-family: 'Libre Franklin', 'Franklin', Arial, sans-serif;
    text-transform: none;
}

.gauntlet-battle-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid rgba(248, 174, 66, 0.55);
    border-radius: 999px;
    color: #f7ead2;
    background: rgba(12, 10, 9, 0.78);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.34);
    font-family: inherit;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: default;
}

.gauntlet-battle-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #f8ae42;
    box-shadow: 0 0 10px rgba(248, 174, 66, 0.78);
}

.gauntlet-battle-popover {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 36px;
    width: 230px;
    max-height: 170px;
    overflow: auto;
    transform: translateX(-50%);
    padding: 11px;
    border: 1px solid rgba(248, 174, 66, 0.38);
    border-radius: 8px;
    color: #f7ead2;
    background: rgba(12, 10, 9, 0.94);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.44);
}

.gauntlet-battle-indicator:hover .gauntlet-battle-popover,
.gauntlet-battle-indicator:focus-within .gauntlet-battle-popover {
    display: block;
}

.gauntlet-battle-title {
    margin: 0 0 3px;
    color: #f8ae42;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.gauntlet-battle-line,
.gauntlet-battle-empty {
    margin: 0;
    color: rgba(247, 234, 210, 0.78);
    font-size: 10px;
    line-height: 1.35;
}

.gauntlet-battle-mods {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 9px;
}

.gauntlet-battle-mod {
    padding-top: 7px;
    border-top: 1px solid rgba(247, 234, 210, 0.11);
}

.gauntlet-battle-mod strong {
    display: block;
    color: #f7ead2;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.gauntlet-battle-mod.curse strong {
    color: #ff8d8d;
}

.gauntlet-battle-mod span {
    display: block;
    margin-top: 2px;
    color: rgba(247, 234, 210, 0.72);
    font-size: 10px;
    line-height: 1.3;
}

.searching-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--game-stage-w);
    height: var(--game-stage-h);
}

.searching-backdrop.visible {
    display: flex;
}

.private-match-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--game-stage-w);
    height: var(--game-stage-h);
}

.private-match-backdrop.visible {
    display: flex;
}

.private-match-modal {
    background: url("searchingscroll.png") no-repeat;
    width: 391px;
    height: 290px;
    position: relative;
    top: -30px;
    left: -10px;
    z-index: 6;
}

.private-match-title {
    margin-top: 50px;
    margin-left: 125px;
    width: 200px;
    text-align: center;
}

.private-match-input {
    position: absolute;
    top: 120px;
    left: 120px;
    width: 200px;
    height: 24px;
    padding: 2px 6px;
    font-family: 'Franklin', Arial, sans-serif;
    font-size: 14px;
    text-transform: none;
    box-sizing: border-box;
    text-align: center;
}

.private-match-error {
    position: absolute;
    top: 136px;
    left: 48px;
    width: 295px;
    min-height: 18px;
    margin: 0;
    color: var(--na-crimson);
    font-size: 12px;
    text-align: center;
    text-transform: none;
}

.private-match-ok,
.private-match-cancel {
    position: absolute;
    top: 215px;
    background-color: var(--na-parchment);
    border: 1px solid #000000;
    color: var(--na-ink);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    width: 88px;
    height: 25px;
    font-family: 'Pedra';
    outline: none;
    box-shadow: none;
}

.private-match-ok {
    left: 120px;
}

.private-match-cancel {
    left: 230px;
}

.searchingscroll {
    background: url("searchingscroll.png") no-repeat;
    width: 391px;
    height: 290px;
    position: relative;
    top: -30px;
    left: -10px;
    z-index: 6;
}

.searching {
    margin-top: 45px;
    margin-bottom: 0;
    margin-left: 125px;
    width: 200px;
    text-align: center;
}

.sasukesearch {
    margin-left: 125px;
}

.sharingan {
    position: absolute;
    margin-top: 30px;
    margin-left: 195px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.cancel-button {
    position: absolute;
    text-transform: uppercase;
    top: 220px;
    left: 175px;
    background-color: var(--na-parchment);
    border: 1px solid #000000;
    color: var(--na-ink);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    width: 88px;
    height: 25px;
    font-family: 'Pedra';
    outline: none;
    box-shadow: none;
}

.player-infoselection {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.backgroundingame {
    background-image: var(--ingame-bg-image);
    width: var(--game-stage-w);
    height: var(--game-stage-h);
    position: relative;
    background-position: 50% 50%;
    background-size: 101% 101%;
    animation: stage-bg-drift 18s ease-in-out infinite alternate;
}

@keyframes stage-bg-drift {
    from {
        background-position: 49% 50%;
    }
    to {
        background-position: 51% 50%;
    }
}

/* Story Mode cinematic dialogue: a scrim + bottom-anchored dialogue box that
   plays over the already-rendered battlefield (intro before the fight is
   playable, outro after it ends) instead of navigating to a separate page. */
.story-dialogue-overlay {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 6500;
    background: rgba(5, 4, 10, 0.55);
    align-items: flex-end;
    justify-content: center;
    padding: 20px;
    pointer-events: none;
}

.story-dialogue-overlay.visible {
    display: flex;
    pointer-events: auto;
}

.story-dialogue-box {
    width: 100%;
    max-width: 480px;
    background: rgba(10, 8, 16, 0.95);
    border: 2px solid #a36bff;
    border-radius: 10px;
    padding: 16px 18px;
    color: #f0ede8;
    font-family: 'Libre Franklin', Arial, sans-serif;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.story-dialogue-box-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.story-dialogue-portrait {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.25);
    flex: 0 0 auto;
    background: #111;
}

.story-dialogue-speaker {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #a36bff;
    margin: 0 0 4px;
}

.story-dialogue-text {
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

.story-dialogue-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

.story-dialogue-progress {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    margin-right: auto;
}

.story-dialogue-btn {
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid #a36bff;
    background: #a36bff;
    color: #150c26;
    cursor: pointer;
}

.story-dialogue-btn:hover {
    filter: brightness(1.08);
}

.game-remaster .story-dialogue-box {
    max-width: 620px;
    padding: 22px 26px;
}

.game-remaster .story-dialogue-portrait {
    width: 68px;
    height: 68px;
}

.game-remaster .story-dialogue-speaker {
    font-size: 13px;
}

.game-remaster .story-dialogue-text {
    font-size: 15px;
}

.game-hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    font-family: 'Franklin', Arial, sans-serif;
    text-transform: uppercase;
    position:relative
}

.player-left {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    left: 77px;
    top: -12px;
}

.player-info {
    display: flex;
    flex-direction: column;
}

.player-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row;
    position:relative;
    left: -68px;
    top: -12px;
            max-width: 183px;
      min-width: 183px;
    left: -61px;
}

.player-name {
    font-size: 19px;
    position: relative;
    top: 7px;
    left: 1px;
}


.player-name.red {
    color: var(--na-crimson);
}

.player-status {
    font-size: 16px;
    left: 2px;
    top: 6px;
    position:relative;
    color: #000;
}

.player-avatar-left,
.player-avatar-right {
    width: 48px;
    height:48px;
    border: 1px solid #000;
}

.player-avatar-left {
    left: 126px;
    position: absolute
}

.ready-section {
    text-align: center;
    top: 20px;
    left: 330px;
}

.ready-text {
    color: #000000;
    font-size: 16px;
    margin-bottom: 8px;
}

.chakra-display {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    margin-toP: 5px;
    margin-left: 5px;
}

.chakra-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.chakra-box {
    width: 8px;
    height: 8px;
    border: 1px solid #000;
}

.chakra-box.red {
    background-color: var(--na-danger);
}

.chakra-box.blue {
    background-color: #3498db;
}

.chakra-box.green {
    background-color: #2ecc71;
}

.chakra-box.white {
    background-color: #ecf0f1;
}
.chakra-box.black {
    background:
        repeating-linear-gradient(135deg, #111111 0 4px, #777777 4px 8px);
    border-color: #000;
}

.chakra-icon {
    font-weight: bold;
    font-size: 16px;
    color: #000;
}

.chakra-item.random-chakra .chakra-icon {
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
    border-radius: 50%;
    color: #ffffff;
    background:
        repeating-linear-gradient(135deg, #101010 0 4px, #6f747c 4px 8px);
    font-size: 12px;
    line-height: 1;
}

.chakra-count {
    font-size: 13px;
    color: #000;
}

.exchange-label {
    font-size: 12px;
    color: #000;
    position:relative;
    top: -5px;
    left: 5px;
}

.timer-track {
    width: 191px;
    height: 10px;
    background: #fff;
    border: 1px solid #000;
    margin-top: -8px;
    margin-left: 8px;
    position: relative;
    overflow: hidden;
}

.timer-bar {
    width: 191px;
    height: 100%;
    background-color: var(--na-crimson);
    position: absolute;
    top: 0;
    left: 0;
}

.character-card {
    width: 75px;
}

.game-remaster .story-dialogue-portrait {
    width: 68px;
    height: 68px;
}

.game-remaster .story-dialogue-speaker {
    font-size: 13px;
}

.game-remaster .story-dialogue-text {
    font-size: 15px;
}

.game-hud {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    font-family: 'Franklin', Arial, sans-serif;
    text-transform: uppercase;
    position:relative
}

.player-left {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    left: 77px;
    top: -12px;
}

.player-info {
    display: flex;
    flex-direction: column;
}

.player-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-direction: row;
    position:relative;
    left: -68px;
    top: -12px;
            max-width: 183px;
      min-width: 183px;
    left: -61px;
}

.player-name {
    font-size: 19px;
    position: relative;
    top: 7px;
    left: 1px;
}


.player-name.red {
    color: var(--na-crimson);
}

.player-status {
    font-size: 16px;
    left: 2px;
    top: 6px;
    position:relative;
    color: #000;
}

.player-avatar-left,
.player-avatar-right {
    width: 48px;
    height:48px;
    border: 1px solid #000;
}

.player-avatar-left {
    left: 126px;
    position: absolute
}

.ready-section {
    text-align: center;
    top: 20px;
    left: 330px;
}

.ready-text {
    color: #000000;
    font-size: 16px;
    margin-bottom: 8px;
}

.chakra-display {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    margin-toP: 5px;
    margin-left: 5px;
}

.chakra-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.chakra-box {
    width: 8px;
    height: 8px;
    border: 1px solid #000;
}

.chakra-box.red {
    background-color: var(--na-danger);
}

.chakra-box.blue {
    background-color: #3498db;
}

.chakra-box.green {
    background-color: #2ecc71;
}

.chakra-box.white {
    background-color: #ecf0f1;
}
.chakra-box.black {
    background:
        repeating-linear-gradient(135deg, #111111 0 4px, #777777 4px 8px);
    border-color: #000;
}

.chakra-icon {
    font-weight: bold;
    font-size: 16px;
    color: #000;
}

.chakra-item.random-chakra .chakra-icon {
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
    border-radius: 50%;
    color: #ffffff;
    background:
        repeating-linear-gradient(135deg, #101010 0 4px, #6f747c 4px 8px);
    font-size: 12px;
    line-height: 1;
}

.chakra-count {
    font-size: 13px;
    color: #000;
}

.exchange-label {
    font-size: 12px;
    color: #000;
    position:relative;
    top: -5px;
    left: 5px;
}

.timer-track {
    width: 191px;
    height: 10px;
    background: #fff;
    border: 1px solid #000;
    margin-top: -8px;
    margin-left: 8px;
    position: relative;
    overflow: hidden;
}

.timer-bar {
    width: 191px;
    height: 100%;
    background-color: var(--na-crimson);
    position: absolute;
    top: 0;
    left: 0;
}

.character-card {
    width: 75px;
    position: relative;
    z-index: 1;
}

.character-card:nth-child(1),
.game-remaster .character-card:nth-child(1) { z-index: 30; }
.character-card:nth-child(2),
.game-remaster .character-card:nth-child(2) { z-index: 20; }
.character-card:nth-child(3),
.game-remaster .character-card:nth-child(3) { z-index: 10; }

.character-face {
    width: 75px;
    height: 75px;
    border: 1px solid #000;
    display: block;
    position: relative;
    z-index: 2;
    transition: opacity 700ms ease, filter 700ms ease, transform 700ms ease;
}

.character-face.death-fade {
    opacity: 0.24;
    filter: grayscale(1) brightness(0.7);
    transform: scale(0.94);
}

.dynamic-queued-target-icon {
    width: 24px !important;
    height: 24px !important;
    border: 2px solid rgba(255, 200, 0, 0.98) !important;
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(255, 200, 0, 0.85);
}

@keyframes hit-flash-anim {
    0% {
        filter: brightness(1) saturate(1);
        transform: translateX(0);
    }
    12% {
        filter: brightness(2.4) saturate(0.3) drop-shadow(0 0 10px rgba(255, 50, 50, 0.9));
        transform: translateX(-4px);
    }
    30% {
        transform: translateX(4px);
    }
    48% {
        transform: translateX(-3px);
    }
    66% {
        transform: translateX(2px);
        filter: brightness(1.4) saturate(0.7);
    }
    100% {
        filter: brightness(1) saturate(1);
        transform: translateX(0);
    }
}

.character-face.hit-flash {
    animation: hit-flash-anim 1.1s ease-out;
}

.character-card {
    margin-left: 32px;
    margin-top: -28px;
}

.target-overlay {
    position: absolute;
    top: 0;
    left: 1px;
    width: 75px;
    height: 75px;
    background: rgba(255, 215, 0, 0.42);
    border: 3px solid rgba(255, 230, 120, 0.95);
    pointer-events: none;
    animation: target-blink 1s ease-in-out infinite;
    box-sizing: border-box;
    z-index: 2;
}

@keyframes target-blink {
    0% {
        opacity: 0.5;
        box-shadow: 0 0 6px 2px rgba(255, 215, 0, 0.55);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 18px 6px rgba(255, 215, 0, 0.95);
    }
    100% {
        opacity: 0.5;
        box-shadow: 0 0 6px 2px rgba(255, 215, 0, 0.55);
    }
}

.health-bar-container {
    position: relative;
    width: 75px;
    height: 13px;
    top: 2px;
    background-color: #ffffff;
    border: 1px solid #000;
    box-sizing: content-box;
    z-index: 100;
}

@keyframes health-drop-flash-anim {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 30, 30, 0);
        outline: 2px solid rgba(255, 30, 30, 0);
    }
    20% {
        box-shadow: 0 0 12px 4px rgba(255, 30, 30, 0.95);
        outline: 2px solid rgba(255, 30, 30, 0.9);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 30, 30, 0);
        outline: 2px solid rgba(255, 30, 30, 0);
    }
}

.health-bar-container.health-drop-flash {
    animation: health-drop-flash-anim 1.1s ease-out;
    z-index: 3;
}

.health-bar {
    background-color: #1eee5d;
    width: 75px;
    height: 13px;
    position: static;
    transition: width 950ms cubic-bezier(0.22, 0.78, 0.2, 1), background-color 350ms ease;
}

.health-bar.hp-mid {
    background-color: #f1d424;
}

.health-bar.hp-low {
    background-color: #e53030;
}

.health-text {
    position: absolute;
    width: 75px;
    left: 0;
    top: 0.4px;
    line-height: 13px;
    text-align: center;
    font-family: 'Franklin', Arial, sans-serif;
    font-size: 12px;
    color: #000000;
    z-index: 2;
}

.player-characters {
    gap: 56px;
    display: flex;
    position:relative;
    left: -2px;
    flex-direction: column;
}

.skillholder {
    z-index: -1;
    position: absolute;
    top: 19px;
    left: 50px;
}

.skillscrollingame {
    background-image: url('ingameskillscroll.png');
    width: 381px;
    height: 79px;
    position: absolute;
    left: 24px;
    top: 4px;
    gap: 6px;
    display: flex;
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.35s ease, left 0.35s ease;
}

.skillqueue {
    position: relative;
    z-index: 5;
}

.skillimage.selected-target {
    position: relative;
    z-index: 7;
    transition: transform 0.35s ease, opacity 0.2s ease;
}

.skillimage.targeting-skill {
    outline: 2px solid #f6d365;
    outline-offset: 2px;
    filter: brightness(1.12);
}


.skillscrollingame.not-turn {
    clip-path: inset(0 0 0 80px);
    left: -56px;
}

.skillimage {
    width: 54px;
    height: 54px;
    border: 1px solid black;
    top: 11px;
    left: 40px;
    position: relative;
    transition: transform 0.35s ease, opacity 0.2s ease;
}

.skill-cooldown-badge {
    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
    font-family: 'Pedra', 'Libre Franklin', serif;
    font-size: 45px;
    color: #000000;
    pointer-events: none;
    z-index: 12;
    margin-top: 3px;
    top: 11px;
    width: 54px;
    height: 54px;
}

.skill-cooldown-badge[data-skill-idx="0"] {
    left: 101px;
}

.skill-cooldown-badge[data-skill-idx="1"] {
    left: 161px;
}

.skill-cooldown-badge[data-skill-idx="2"] {
    left: 221px;
}

.skill-cooldown-badge[data-skill-idx="3"] {
    left: 281px;
}

.skillqueue {
    width: 55px;
    height: 55px;
    top: 11px;
    left: 20px;
    position: relative;
}

.enemy-characters {
    gap: 53px;
    display: flex;
    flex-direction: column;
    top: 92px;
    position: absolute;
    transform: scaleX(-1);
    left: 661px;
    z-index: 10;
}


.enemy-characters .health-text {
    transform: scaleX(-1);
}

/* ── Battle screen skill info panel ─────────────────────────── */

.skillinformation {
    background-image: url('ingamebottomscroll.png');
    width: 523px;
    height: 134px;
    position: absolute;
    left: 247px;
    top: 426px;
    box-sizing: border-box;
    padding: 30px 24px 12px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: 'Franklin', 'Libre Franklin', Arial, sans-serif;
}

.skill-info-head {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex: 1;
    min-height: 0;
}

.skillviewimage {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    object-fit: cover;
    border: 1px solid #1a140e;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    background: #111;
    position: static;
}

.skill-info-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
}

.skill-info-kicker {
    font-family: 'Franklin', Arial, sans-serif;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #888;
    line-height: 1;
    margin-bottom: 0;
}

.ingameskillname {
    font-size: 15px;
    font-weight: 800;
    color: #b71c1c;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0 0 3px;
    letter-spacing: 0.03em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.ingameskilldescription {
    font-size: 10px;
    line-height: 1.38;
    color: #1f1f1f;
    overflow: visible;
    max-height: none;
    margin: 0;
}

.desc-highlight-damage {
    color: #b71c1c;
    font-weight: 800;
}

.desc-highlight-heal {
    color: #2e7d32;
    font-weight: 800;
}

/* ── Inline Bottom Meta Bar ── */
.skill-info-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(122, 98, 73, 0.35);
    padding-top: 5px;
    margin-top: 4px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    height: auto;
    font-size: 10px;
    font-weight: 800;
    color: #4a3828;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.sim-seg {
    display: flex;
    align-items: center;
    gap: 5px;
    border-right: none;
    padding: 0;
}

.sim-lbl {
    color: #7a6249;
    font-weight: 800;
    font-size: 9.5px;
    letter-spacing: 0.05em;
}

.ingameclasses, .ingamecooldown {
    color: #1a140e;
    font-weight: 800;
    margin: 0;
    display: inline;
}

.energytext {
    display: flex;
    align-items: center;
    gap: 3px;
}

/* ── Embedded Compact Character Navigation Bar (Top-Right of Scroll Interior) ── */
.skill-browse-nav {
    position: absolute;
    top: 26px;
    right: 22px;
    height: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(18, 22, 30, 0.94);
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    padding: 2px 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    z-index: 10;
}

.skill-browse-char-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.skill-browse-label {
    font-size: 9.5px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.skill-browse-prev,
.skill-browse-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    background: #111822;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.skill-browse-prev:hover,
.skill-browse-next:hover {
    background: #2a3b54;
    border-color: rgba(255, 255, 255, 0.7);
}

.skill-browse-skills-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

.skill-browse-icon-box {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    background: #000;
    overflow: hidden;
    cursor: pointer;
    box-sizing: border-box;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.skill-browse-icon-box:hover {
    transform: scale(1.15);
    border-color: #fff;
}

.skill-browse-icon-box.active {
    border: 1.5px solid #e53935;
    box-shadow: 0 0 6px rgba(229, 57, 53, 0.85);
}

.skill-browse-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── In-Game Profile View ── */
.skillinformation.profile-summary {
    padding: 22px 16px 12px 18px;
}

.skillinformation.profile-summary .skill-info-head,
.skillinformation.profile-summary .skill-info-meta,
.skillinformation.profile-summary .skill-browse-nav {
    display: none !important;
}

.profile-summary-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.profile-avatar-box {
    width: 82px;
    height: 82px;
    flex: 0 0 82px;
    border: 2px solid #2b1f14;
    border-radius: 4px;
    background: #111;
    box-sizing: border-box;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-details-column {
    flex: 1;
    min-width: 0;
    margin-left: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: 'Franklin', 'Libre Franklin', Arial, sans-serif;
}

.profile-username {
    font-size: 18px;
    font-weight: 900;
    color: #b71c1c;
    text-transform: uppercase;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.profile-rank-badge {
    font-size: 11px;
    font-weight: 800;
    color: #3b2a1d;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.1;
    margin-top: 1px;
    margin-bottom: 5px;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(122, 98, 73, 0.25);
    width: fit-content;
}

.profile-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    line-height: 1.25;
}

.profile-lbl {
    font-size: 10.5px;
    font-weight: 800;
    color: #7a6249;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.profile-val {
    font-size: 11.5px;
    font-weight: 800;
    color: #1a140e;
    text-transform: uppercase;
}

.profile-team-section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: 16px;
    flex-shrink: 0;
}

.profile-team-header {
    font-size: 9.5px;
    font-weight: 800;
    color: #7a6249;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.profile-team-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-team-face-box {
    width: 64px;
    height: 64px;
    border: 2px solid #2b1f14;
    border-radius: 4px;
    background: #111;
    box-sizing: border-box;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0.2, 1);
}

.profile-team-face-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}

.profile-team-face-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sim-lbl {
    color: #99a0ad;
    font-weight: 700;
    white-space: nowrap;
    font-size: 8px;
}

.energytext {
    display: flex;
    align-items: center;
    gap: 3px;
    position: static;
    right: auto;
    top: auto;
    font-size: 8px;
}

.energytext .chakra-box {
    margin-top: 0;
}

.ingameclasses {
    font-size: 8px;
    color: #fff;
    font-weight: 700;
    font-style: italic;
    margin: 0;
    position: static;
    left: auto;
    top: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.ingamecooldown {
    font-size: 8px;
    color: #fff;
    font-weight: 700;
    font-style: italic;
    margin: 0;
    position: static;
    display: block;
    right: auto;
    top: auto;
}

.ingameclasspicker {
    display: none;
    align-items: center;
    gap: 5px;
    padding: 0 7px;
    position: static;
    right: auto;
    top: auto;
    font-size: 8px;
}

.ingame-class-picker-field {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 3px;
    height: 16px;
    font-size: 8px;
    font-family: 'Franklin', Arial, sans-serif;
    color: #fff;
}

.class-choice-popup {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2500;
    background: rgba(0, 0, 0, 0.7);
}

.class-choice-popup.visible {
    display: flex;
}

.class-choice-popup-panel {
    background: #faedcd;
    border: 1px solid #000000;
    border-radius: 0;
    padding: 12px;
    position:absolute;
    left: 300px;
    top: 200px;

}


.class-choice-popup-title {
    margin: 0 0 10px;
    font-size: 14px;
    color: #000000;
}

.class-choice-popup-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.class-choice-popup-options button,
.class-choice-popup-cancel {
    background: #faedcd;
    border: 1px solid #000000;
    border-radius: 0;
    color: #000000;
    font-family: 'Franklin', Arial, sans-serif;
    font-size: 15px;
    padding: 4px 8px;
    cursor: pointer;
    text-align: center;
    display: block;
    width: fit-content;
    margin: 0 auto;
    text-transform: uppercase;
}

.bottomrender {
        width: 153px;
        height: 149px;
        overflow: hidden;
        left: 125px;
        top: 15px;
        position: relative;
}

.render {
    width: 153px;
    display: block;
    position: relative; /* Add this */
    z-index: 2;
}

.surrenderbutton {
    background-image: url('optionscroll.png');
    width: 182px;
    height: 46px;
    position: absolute;
    left: 30px;
    top: 425px;
    z-index: 1;
}

.sound {
    background-image: url('optionscroll.png');
    width: 182px;
    height: 46px;
    position: absolute;
    left: 30px;
    top: 470px;
    z-index: 1;
}

.surrenderbutton span {
    position: relative;
    left: 20px;
    top: 13px;
    font-size: 14px;
}

.endturnscroll {
    background-image: url("searchingscroll.png");
    width: 391px;
    height: 290px;
    position: absolute;
    left: 200px;
    top: 85px;
    z-index: 2;
    display: none;
}

.chakrachoose {
    position: absolute;
    top: 25px;
    left: 130px;
    text-align: center;
    font-size: 16px;
}

.chakrachoosered {
    color: #cb0400
}

.chakra-container {
    display: flex;
    gap: 20px;
    padding: 10px;
    font-size: 14px;
    top: 60px;
    left: 70px;
    position: absolute;
}

.chakra-column {
    display: flex;
    flex-direction: column;
}

.chakra-columnright {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chakra-title {
    color: #000;
    margin-bottom: 3px;
    font-size: 13px;
}

.chakra-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.chakra-box {
    width: 8px;
    height: 8px;
    border: 1px solid #000;
    display: inline-block;
}

.chakra-box.red {
    background-color: var(--na-danger);
}

.chakra-box.blue {
    background-color: #3498db;
}

.chakra-box.green {
    background-color: #2ecc71;
}

.chakra-box.white {
    background-color: #ecf0f1;
}
.chakra-box.black {
    background-color: #000;
}

.chakra-name {
    color: #000;
    min-width: 60px;
}

.chakra-amount {
    color: #000;
    margin-left: 8px;
}

.chakra-divider {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 0 8px;
}

.chakra-buttons {
    display: flex;
    gap: 3px;
    margin-left: 15px;
}


.minus-button,
.plus-button {
    background-color: transparent;
    border: none;
    color: #000;
    font-size: 18px;
    cursor: pointer;
    user-select: none;
    padding: 0px 5px;
}

.minus-button {
    top: -1px;
    position: relative;
}

.minus-button:hover,
.plus-button:hover {
    opacity: 0.7;
}


.ChakraChooseEndTurn {
    z-index: 5999;
    position: absolute;
    background-image: url('searchingscroll.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 391px;
    height: 290px;
    top: 100px;
    left: 180px;
    position: absolute;
    visibility: hidden;
}

.exchange_chakra {
    z-index: 5999;
    position: absolute;
    background-image: url('searchingscroll.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 391px;
    height: 290px;
    top: 100px;
    left: 180px;
    visibility: hidden;
}

.exchange_chakra_title {
    position: absolute;
    top: 34px;
    left: 0;
    width: 440px;
    text-align: center;
    font-size: 17px;
    margin: 0;
}

.exchange_chakra_choices {
    position: absolute;
    top: 60px;
    left: 0;
    width: 440px;
    display: flex;
    justify-content: center;
    gap: 11px;
}

.exchange_chakra_choice {
    width: 14px;
    height: 14px;
    border: 1px solid #00000000;
    padding: 0;
    background: #f3e8c9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.exchange_chakra_choice .chakra-box {
    width: 8px;
    height: 8px;
    border: 1px solid #000;
}

.exchange_chakra_choice.selected {
    border-color: var(--na-crimson);
}

.exchange_chakra_subtitle {
    position: absolute;
    top: 84px;
    left: 0;
    width: 440px;
    text-align: center;
    font-size: 16px;
    margin: 0;
}

.exchange_chakra_container {
    position: absolute;
    top: 110px;
    left: 74px;
    display: flex;
    gap: 28px;
    font-size: 14px;
}

.exchange_chakra_column {
    display: flex;
    flex-direction: column;
}

.exchange_chakra_row {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 24px;
}

.exchange_chakra_row .chakra-name {
    min-width: 82px;
}

.exchange_chakra_row .chakra-amount {
    min-width: 10px;
    text-align: right;
    margin-left: 0;
}

.exchange_symbol {
    display: inline-block;
    width: 13px;
    text-align: center;
    font-size: 23px;
    line-height: 1;
    margin-left: 6px;
    position: relative;
    top: -1px;
}

.ok-buttonexchange {
    position: absolute;
    top: 230px;
    left: 120px;
    background-color: var(--na-parchment);
    border: 1px solid #000000;
    color: var(--na-ink);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    width: 88px;
    height: 25px;
    font-family: 'Pedra';
    outline: none;
    box-shadow: none;
}

.cancel-buttonexchange {
    position: absolute;
    top: 230px;
    left: 230px;
    background-color: var(--na-parchment);
    border: 1px solid #000000;
    color: var(--na-ink);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    width: 88px;
    height: 25px;
    font-family: 'Pedra';
    outline: none;
    box-shadow: none;
}

.skillorder {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 16px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.skillorder-item {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 2px solid #5d4833;
    background: #1e1b18;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    cursor: grab;
    transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1), border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
    touch-action: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.skillorder-item:hover,
.skillorder-item:active {
    transform: translateY(-2px) scale(1.06);
    border-color: #ffae42;
    box-shadow: 0 6px 14px rgba(255, 174, 66, 0.4);
}

.skillorder-item.is-dragging-origin {
    opacity: 0.35;
    transform: scale(0.92);
    border-style: dashed;
}

.skillorder-item.drop-target-over {
    transform: scale(1.12);
    border-color: #4caf50 !important;
    box-shadow: 0 0 16px rgba(76, 175, 80, 0.8) !important;
}

.skillorder-item .skillpreview {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

.skillorder-seq-badge {
    position: absolute;
    top: -8px;
    left: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f1bf14, #d4950b);
    color: #111;
    font-size: 11px;
    font-weight: 900;
    line-height: 20px;
    text-align: center;
    border: 1px solid #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    z-index: 5;
    pointer-events: none;
}

.skillorder-drag-ghost {
    position: fixed;
    z-index: 100000;
    pointer-events: none;
    border-radius: 8px;
    border: 2px solid #ffae42;
    background: #1e1b18;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.65), 0 0 15px rgba(255, 174, 66, 0.6);
    transform-origin: center center;
    opacity: 0.92;
    touch-action: none;
}

.skillorder-drag-ghost .skillpreview {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
}

.surrender-confirm {
    z-index: 5999;
    position: absolute;
    background-image: url('searchingscroll.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 391px;
    height: 290px;
    top: 100px;
    left: 180px;
    position: absolute;
    visibility: hidden;
}


.surrender-confirm-title {
    top: 35px;
    left: 30px;
    text-align: center;
    font-size: 16px;
    position: relative;
}

.surrender-confirm-ok {
    position: absolute;
    top: 230px;
    left: 120px;
    background-color: var(--na-parchment);
    border: 1px solid #000000;
    color: var(--na-ink);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    width: 88px;
    height: 25px;
    font-family: 'Pedra';
    outline: none;
    box-shadow: none;
}

.surrender-confirm-cancel {
    position: absolute;
    top: 230px;
    left: 230px;
    background-color: var(--na-parchment);
    border: 1px solid #000000;
    color: var(--na-ink);
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    width: 88px;
    height: 25px;
    font-family: 'Pedra';
    outline: none;
    box-shadow: none;
}

.surrender-confirm-actions {
    top: -60px;
    position: relative;
}

.surrender-confirm-preview-image {
    position: absolute;
    top: 80px;
    left: 122px;
    width: auto;
    height: auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.battle-end-overlay {
    position: absolute;
    inset: 0;
    z-index: 7000;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.battle-end-overlay.visible {
    visibility: visible;
    opacity: 1;
}

.battle-end-panel {
    position: absolute;
    top: 86px;
    left: 50%;
    transform: translateX(-50%);
    width: 640px;
    height: 320px;
    background-image: url('endscroll.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: auto;
}

.battle-end-portrait {
    position: absolute;
    left: 81px;
    top: 46px;
    width: 236px;
    height: 226px;
    object-fit: cover;
    border: 1px solid #111;
}

.battle-end-copy {
    position: absolute;
    left: 368px;
    top: 42px;
    width: 252px;
    color: #111;
}

.battle-end-title {
    margin: 0;
    color: #c7262f;
    font-family: 'Franklin', Arial, sans-serif;
    font-size: 38px;
    line-height: 1;
    text-align: center;
}

.battle-end-message {
    margin: 10px 0 0;
    font-family: 'Franklin', Arial, sans-serif;
    font-size: 12px;
    line-height: 1.25;
}

.battle-end-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.battle-end-outcome {
    min-height: 34px;
    color: #211105;
    text-transform: uppercase;
}

.battle-end-rewards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
}

.battle-end-reward-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 22px;
    padding: 3px 7px;
    background: rgba(255, 248, 221, 0.72);
    border: 1px solid rgba(120, 62, 18, 0.45);
    box-sizing: border-box;
}

.battle-end-reward-label {
    color: #5b2d14;
}

.battle-end-reward-value {
    color: #111;
    text-align: right;
}

.battle-end-unlocks {
    min-height: 28px;
    padding: 5px 7px;
    background: rgba(47, 22, 78, 0.12);
    border: 1px solid rgba(98, 45, 152, 0.4);
    color: #28113f;
}

.battle-end-continue {
    border: none;
    background: transparent;
    color: #c7262f;
    font-family: 'Franklin', Arial, sans-serif;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    position: absolute;
    top: 238px;
    left: 50%;
    transform: translateX(-50%);
}



.battle-end-continue:focus {
    outline: none;
}

.battle-end-continue:hover {
    opacity: 0.85;
}

.skilltooltips {
    position: absolute;
    z-index: 20;
    pointer-events: auto;
    left: 85px;
    top: 0;
    display: flex;
    gap: 2px;
    align-items: center;
}

.skilltooltipimage {
    width: 20px;
    height: 20px;
    border: 1px solid black;
    position: relative;
    cursor: help;
}

.status-tooltip-content {
    display: none;
    position: absolute;
    left: 85px;
    top: 24px;
    min-width: 240px;
    max-width: 330px;
    padding: 8px 9px;
    background: #fff4d6;
    border: 2px solid #2d1507;
    color: #2d1507;
    font-size: 13px;
    line-height: 1.32;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}

.skilltooltips.has-status:hover .status-tooltip-content {
    display: none;
}

.status-tooltip-item + .status-tooltip-item {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(45, 21, 7, 0.24);
}

.status-tooltip-title {
    color: #ba2310;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.status-tooltip-desc {
    color: #2d1507;
    display: grid;
    gap: 4px;
}

.status-tooltip-row {
    display: grid;
    gap: 2px;
}

.status-tooltip-row-meta {
    justify-self: start;
    margin: 4px 0 1px 12px;
    padding: 2px 5px;
    border: 1px solid #9d170d;
    background: rgba(157, 23, 13, 0.1);
    color: #8f1a0f;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-tooltip-effect {
    display: grid;
    grid-template-columns: 6px minmax(0, 1fr);
    column-gap: 6px;
    row-gap: 3px;
    align-items: start;
    padding: 4px 0;
}

.status-tooltip-effect + .status-tooltip-effect {
    border-top: 1px solid rgba(45, 21, 7, 0.12);
}

.status-tooltip-bullet {
    width: 4px;
    height: 4px;
    margin-top: 7px;
    border-radius: 50%;
    background: #ba2310;
    box-shadow: 0 0 0 1px rgba(45, 21, 7, 0.25);
}

.status-tooltip-desc-line {
    color: #2d1507;
    min-width: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.status-tooltip-emphasis {
    color: #8f1a0f;
    font-weight: 900;
}

.status-tooltip-line-divider {
    height: 1px;
    background: rgba(45, 21, 7, 0.22);
    margin: 5px 0;
}

.status-tooltip-turns {
    align-self: start;
    justify-self: start;
    grid-column: 2;
    padding: 2px 5px;
    border: 1px solid #9d170d;
    background: rgba(157, 23, 13, 0.1);
    color: #8f1a0f;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.enemy-characters .status-tooltip-content {
   transform: scaleX(-1);
   z-index: 1200;
   position: absolute;
}

.enemy-characters .skilltooltips {
    z-index: 1100;
}

.enemy-characters,
.enemy-characters .character-card {
    overflow: visible;
}

.global-status-tooltip {
    position: fixed;
    left: 0;
    top: 0;
    min-width: 250px;
    max-width: 340px;
    padding: 8px 9px;
    background: #fff4d6;
    border: 2px solid #2d1507;
    color: #211105;
    font-size: 13px;
    line-height: 1.32;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
    z-index: 99999;
}

.global-status-tooltip .status-tooltip-item + .status-tooltip-item {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(45, 21, 7, 0.24);
}

.global-status-tooltip .status-tooltip-title {
    margin-bottom: 5px;
    color: #9d170d;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.global-status-tooltip .status-tooltip-desc-line {
    color: #211105;
}

.global-status-tooltip .status-tooltip-turns {
    background: rgba(157, 23, 13, 0.1);
}

.global-status-tooltip .status-tooltip-row-meta {
    background: rgba(157, 23, 13, 0.1);
}

.energy-none {
    font-size: 11px;
    color: grey;
    margin-left: -2px;
}

.rank-hat {
    position: absolute;
    left: -22px;
    top: -22px;
    z-index: 10;
    pointer-events: none;
}

.rank-hat.rank-hat-offset-left {
    left: -33px;
}

/* --- Left Team (Player) Rank Hats --- */
.player-characters .rank-hat-academy,
.rank-hat[data-hat="academy"] {
    top: -40px;
    left: -16px;
    z-index: 10;
    transform: none;
}

.player-characters .rank-hat-genin,
.rank-hat[data-hat="genin"] {
    top: -36px;
    left: -26px;
    z-index: 10;
    transform: none;
}

.player-characters .rank-hat-chunin,
.rank-hat[data-hat="chunin"] {
    top: -38px;
    left: -45px;
    z-index: 1; /* BEHIND character face (face is z-index 2) */
    transform: none;
}

.player-characters .rank-hat-jounin,
.rank-hat[data-hat="jounin"] {
    top: -40px;
    left: -48px;
    z-index: 1; /* BEHIND character face (face is z-index 2) */
    transform: scaleX(-1);
}

.timer-bar.timer-low-time {
    animation: timer-low-pulse 0.8s infinite alternate ease-in-out;
    filter: drop-shadow(0 0 6px rgba(239, 68, 68, 0.8));
}

@keyframes timer-low-pulse {
    0% {
        opacity: 1;
        filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.6));
    }
    100% {
        opacity: 0.55;
        filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.95));
    }
}

/* Shinobi Modal Overlay System & Gacha Altar Styles */
.shinobi-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(4, 6, 12, 0.82);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 1;
    transition: opacity 0.25s ease-in-out;
}
.shinobi-modal-overlay.hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}
.shinobi-modal-panel {
    position: relative;
    width: 90%;
    max-width: 580px;
    background: radial-gradient(circle at top, #1c1524 0%, #0d0a14 100%);
    border: 2px solid #b38b4d;
    box-shadow: 0 0 25px rgba(179, 139, 77, 0.35), inset 0 0 15px rgba(0, 0, 0, 0.8);
    border-radius: 12px;
    padding: 24px;
    color: #e2d7c5;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.shinobi-modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: transparent;
    border: none;
    color: #b38b4d;
    font-size: 28px;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
}
.shinobi-modal-close:hover {
    color: #f3cf7a;
}
.unlock-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(179, 139, 77, 0.3);
    padding-bottom: 16px;
}
.unlock-modal-avatar {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    border: 2px solid #b38b4d;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    object-fit: cover;
}
.unlock-modal-title {
    font-size: 22px;
    font-weight: 700;
    color: #f3cf7a;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.unlock-modal-rank {
    font-size: 13px;
    color: #a89f91;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.unlock-modal-description {
    font-size: 14px;
    line-height: 1.5;
    color: #c9bfaf;
    margin-bottom: 16px;
}
.unlock-modal-actions {
    display: flex;
    gap: 14px;
    margin-top: 20px;
}
.shinobi-btn-primary {
    flex: 1;
    padding: 12px 18px;
    background: linear-gradient(135deg, #b8860b 0%, #8b6508 100%);
    border: 1px solid #ffd700;
    border-radius: 6px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 4px 12px rgba(184, 134, 11, 0.4);
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.shinobi-btn-primary:hover {
    background: linear-gradient(135deg, #d49b13 0%, #a67c0c 100%);
    box-shadow: 0 4px 18px rgba(255, 215, 0, 0.6);
    transform: translateY(-1px);
}
.shinobi-btn-secondary {
    flex: 1;
    padding: 12px 18px;
    background: rgba(30, 25, 40, 0.8);
    border: 1px solid #b38b4d;
    border-radius: 6px;
    color: #f3cf7a;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.shinobi-btn-secondary:hover {
    background: rgba(50, 40, 65, 0.9);
    color: #fff;
}

/* Gacha Altar Modal - Bespoke AAA Game Art Overhaul */
.gacha-modal-panel {
    max-width: 880px;
    width: 94%;
    background: radial-gradient(circle at 50% 0%, #171b29 0%, #0c0f18 60%, #06080e 100%);
    border: 1.5px solid rgba(245, 158, 11, 0.45);
    border-radius: 16px;
    box-shadow: 0 0 50px rgba(245, 158, 11, 0.22), 0 25px 60px rgba(0, 0, 0, 0.9);
    padding: 22px 26px;
    color: #f8fafc;
    position: relative;
}

/* 1. Header Top Bar */
.gacha-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gacha-altar-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gacha-seal-crest {
    width: 38px;
    height: 38px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(245, 158, 11, 0.5);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
}

.gacha-seal-mark {
    width: 22px;
    height: 26px;
}

.gacha-title-text-group {
    display: flex;
    flex-direction: column;
}

.gacha-modal-title {
    font-size: 19px !important;
    font-weight: 900 !important;
    color: #fbbf24 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 16px rgba(245, 158, 11, 0.35);
}

.gacha-modal-tagline {
    font-size: 10.5px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.gacha-currencies {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: 32px; /* Space before close button */
}

.gacha-currency-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 12px;
    color: #f1f5f9;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.gacha-currency-pill .pill-icon {
    font-size: 13px;
}

.gacha-currency-pill .pill-label {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #94a3b8;
    text-transform: uppercase;
}

.gacha-currency-pill strong {
    font-weight: 800;
    color: #fbbf24;
}

/* 2. Sub Nav Bar: Banner Tabs & Utilities */
.gacha-sub-nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.gacha-banner-tabs {
    display: flex;
    gap: 8px;
}

.gacha-tab-btn {
    padding: 8px 18px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.gacha-tab-btn:hover {
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.08);
    transform: translateY(-1px);
}

.gacha-tab-btn.active {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    border-color: #f59e0b;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35);
    transform: translateY(-1px);
}

.gacha-utilities-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.gacha-pity-badge {
    font-size: 11px;
    font-weight: 800;
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    padding: 6px 12px;
    border-radius: 8px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.gacha-utility-btn {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gacha-utility-btn:hover {
    color: #ffffff;
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
}

/* 3. Banner Artwork Card */
.gacha-banner-artwork {
    position: relative;
    width: 100%;
    height: 250px;
    border-radius: 12px;
    border: 1px solid rgba(245, 158, 11, 0.35);
    background-color: #080c16;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    padding: 22px 24px;
    box-sizing: border-box;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.gacha-banner-vignette {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: radial-gradient(circle at 75% 50%, rgba(8, 12, 22, 0.1) 0%, rgba(8, 12, 22, 0.75) 55%, rgba(6, 9, 17, 0.96) 100%), linear-gradient(90deg, rgba(6, 9, 17, 0.98) 0%, rgba(6, 9, 17, 0.8) 45%, rgba(6, 9, 17, 0.15) 100%);
    z-index: 1;
    pointer-events: none;
}

.gacha-rate-up-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
    color: #fef08a;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #ef4444;
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.6);
    z-index: 4;
}

.gacha-banner-info {
    position: relative;
    z-index: 3;
    max-width: 62%;
}

.gacha-banner-kicker {
    font-size: 9.5px;
    font-weight: 900;
    letter-spacing: 0.15em;
    color: #f59e0b;
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

.gacha-banner-info h3 {
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    margin: 0 0 4px 0 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.gacha-banner-info p {
    font-size: 12px;
    color: #fcd34d;
    margin: 0 0 6px 0;
    font-weight: 700;
}

.gacha-banner-desc-text {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    line-height: 1.45;
    margin-bottom: 12px !important;
}

/* Single Unified Featured Shinobi Showcase */
.gacha-featured-showcase {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.gacha-featured-showcase-title {
    font-size: 9.5px;
    font-weight: 900;
    color: #ffd700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 2px;
}

.gacha-featured-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 20px;
    padding: 3px 10px 3px 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    transition: all 0.2s ease;
}

.gacha-featured-chip:hover {
    border-color: #ffd700;
    background: rgba(245, 158, 11, 0.15);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.gacha-featured-chip-img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #ffd700;
}

.gacha-featured-chip-name {
    font-size: 10.5px;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: 0.02em;
}

.gacha-hero-render-wrap {
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    width: 260px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

.gacha-hero-render {
    max-height: 220px;
    max-width: 230px;
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 20px rgba(245, 158, 11, 0.25));
    animation: hero-render-float 4s ease-in-out infinite alternate;
}

@keyframes hero-render-float {
    0% { transform: translateY(0); }
    100% { transform: translateY(-8px); }
}

/* 4. Luxury Summon Action Buttons */
.gacha-action-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 14px;
}

.gacha-summon-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 18px;
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.gacha-btn-single {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1.5px solid rgba(59, 130, 246, 0.5);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.gacha-btn-single:hover {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25) 0%, rgba(30, 41, 59, 0.95) 100%);
    border-color: #60a5fa;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.gacha-btn-multi {
    background: linear-gradient(135deg, rgba(69, 10, 10, 0.85) 0%, rgba(31, 4, 8, 0.95) 100%);
    border: 1.5px solid rgba(239, 68, 68, 0.6);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.gacha-btn-multi:hover {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.35) 0%, rgba(69, 10, 10, 0.95) 100%);
    border-color: #f87171;
    box-shadow: 0 8px 26px rgba(239, 68, 68, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.summon-btn-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.summon-btn-icon {
    font-size: 16px;
}

.summon-btn-title {
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em;
    color: #ffffff;
    text-transform: uppercase;
}

.summon-btn-sr-guarantee {
    font-size: 8.5px;
    font-weight: 900;
    color: #ffd700;
    background: rgba(245, 158, 11, 0.25);
    border: 1px solid rgba(245, 158, 11, 0.5);
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.06em;
}

.summon-btn-cost-badge {
    font-size: 11.5px;
    font-weight: 700;
    color: #cbd5e1;
    background: rgba(0, 0, 0, 0.45);
    padding: 3px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.gacha-btn-single .summon-btn-cost-badge {
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}

.gacha-btn-multi .summon-btn-cost-badge {
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Synced Clean Fonts & Gacha Shard Shop Styles */
.gacha-modal-title,
.gacha-banner-info h3,
.gacha-tab-btn,
.summon-btn-title,
.gacha-rates-title,
.gacha-results-title,
.shard-item-info h4,
.gacha-modal-panel,
.gacha-rates-panel,
.gacha-banner-info p,
.gacha-banner-desc-text,
.summon-btn-cost,
.gacha-currency-pill,
.gacha-pity-badge,
.gacha-utility-btn,
.gacha-shard-shop-intro,
.gacha-shard-balance-bar {
    font-family: 'Franklin', 'Libre Franklin', system-ui, sans-serif !important;
}

/* Shard Shop Modal - Bespoke Clean Redesign */
.gacha-shard-shop-panel {
    max-width: 520px;
    width: 92%;
    background: radial-gradient(circle at 50% 0%, #171b29 0%, #0c0f18 65%, #06080e 100%);
    border: 1.5px solid rgba(245, 158, 11, 0.45);
    border-radius: 16px;
    box-shadow: 0 0 45px rgba(245, 158, 11, 0.2), 0 25px 60px rgba(0, 0, 0, 0.9);
    padding: 22px 24px;
    color: #f8fafc;
}

.shard-shop-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.shard-shop-crest {
    width: 36px;
    height: 36px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(245, 158, 11, 0.5);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.25);
    flex-shrink: 0;
}

.shard-shop-title {
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #fbbf24 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    margin: 0 0 2px 0 !important;
}

.shard-shop-subtitle {
    font-size: 11px;
    color: #94a3b8;
    margin: 0;
    font-weight: 600;
}

.gacha-shard-balance-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 13px;
    color: #cbd5e1;
    margin-bottom: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.shard-balance-label {
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.shard-balance-value {
    font-size: 13px;
    font-weight: 700;
    color: #f1f5f9;
}

.shard-balance-value strong {
    color: #38bdf8;
    font-size: 15px;
    font-weight: 900;
}

.shard-shop-msg {
    text-align: center;
    font-size: 12px;
    min-height: 16px;
    color: #fbbf24;
    margin-bottom: 8px;
    font-weight: 700;
}

.gacha-shard-shop-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.shard-shop-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 16px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.shard-shop-item:hover {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}

.shard-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shard-item-name {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.02em;
}

.shard-item-cost {
    font-size: 11.5px;
    color: #94a3b8;
    font-weight: 600;
}

.shard-item-cost strong {
    color: #38bdf8;
    font-weight: 800;
}

.shard-craft-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 96px;
    padding: 8px 16px !important;
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%) !important;
    border: 1px solid #f59e0b !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    letter-spacing: 0.04em !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 10px rgba(217, 119, 6, 0.3) !important;
    transition: all 0.2s ease !important;
}

.shard-craft-btn:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45) !important;
    transform: translateY(-1px);
}

.summon-btn-title {
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 1px;
}
.summon-btn-cost {
    font-size: 11px;
    opacity: 0.9;
    letter-spacing: 0.5px;
}
.summon-btn-cost {
    font-size: 12px;
    opacity: 0.92;
}

/* Gacha Reveal Cards Grid & Rarity Colors */
.gacha-results-header {
    text-align: center;
    margin-bottom: 16px;
}
.gacha-results-title {
    font-size: 22px;
    font-weight: 900;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 15px rgba(255, 215, 0, 0.4);
}
.gacha-results-subtitle {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94a3b8;
}
.gacha-cards-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 16px auto 20px auto;
    width: 100%;
    max-width: 760px;
    box-sizing: border-box;
}
.gacha-pull-card,
.gacha-result-card {
    background: linear-gradient(180deg, #181d2a 0%, #0d111a 100%);
    border: 2px solid #334155;
    border-radius: 10px;
    padding: 10px 6px;
    box-sizing: border-box;
    text-align: center;
    position: relative;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(15px) scale(0.95);
    animation: gacha-card-entry 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 155px;
    overflow: hidden;
}
@keyframes gacha-card-entry {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.gacha-pull-card.rarity-common,
.gacha-result-card.rarity-common {
    border-color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
}
.gacha-pull-card.rarity-uncommon,
.gacha-result-card.rarity-uncommon {
    border-color: #34d399;
    box-shadow: 0 0 14px rgba(52, 211, 153, 0.45);
}
.gacha-pull-card.rarity-rare,
.gacha-result-card.rarity-rare {
    border-color: #c084fc;
    box-shadow: 0 0 16px rgba(192, 132, 252, 0.55);
}
.gacha-pull-card.rarity-epic,
.gacha-result-card.rarity-epic {
    border-color: #fbbf24;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.7);
}
.gacha-pull-card.rarity-legendary,
.gacha-result-card.rarity-legendary {
    border-color: #ef4444;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.85);
    animation: gacha-card-entry 0.35s ease forwards, legendary-aura-pulse 1.2s infinite alternate ease-in-out;
}
@keyframes legendary-aura-pulse {
    0% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.7); }
    100% { box-shadow: 0 0 35px rgba(239, 68, 68, 1); }
}
.gacha-pull-avatar-frame,
.gacha-result-portrait {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    max-width: 68px !important;
    max-height: 68px !important;
    border-radius: 8px;
    overflow: hidden !important;
    background: #090c14;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    margin: 0 auto 6px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
}
.gacha-pull-avatar,
.gacha-result-portrait img {
    width: 68px !important;
    height: 68px !important;
    max-width: 68px !important;
    max-height: 68px !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    border-radius: 6px;
}
.gacha-pull-name,
.gacha-result-name {
    font-size: 11px;
    font-weight: 800;
    color: #f8fafc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    margin-bottom: 2px;
    text-align: center;
}
.gacha-pull-rank-tag {
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: 0.8px;
    padding: 1px 6px;
    border-radius: 3px;
    margin-bottom: 4px;
    text-transform: uppercase;
    display: inline-block;
}
.gacha-pull-rank-tag.rarity-common { color: #38bdf8; background: rgba(56, 189, 248, 0.15); }
.gacha-pull-rank-tag.rarity-uncommon { color: #34d399; background: rgba(52, 211, 153, 0.15); }
.gacha-pull-rank-tag.rarity-rare { color: #c084fc; background: rgba(192, 132, 252, 0.15); }
.gacha-pull-rank-tag.rarity-epic { color: #fbbf24; background: rgba(251, 191, 36, 0.15); }
.gacha-pull-rank-tag.rarity-legendary { color: #ef4444; background: rgba(239, 68, 68, 0.15); }

.gacha-pull-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(14, 165, 233, 0.95);
    color: #fff;
    font-size: 8.5px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
    border: 1px solid #38bdf8;
    z-index: 2;
}
.gacha-pull-new-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(34, 197, 94, 0.95);
    color: #fff;
    font-size: 8.5px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
    border: 1px solid #4ade80;
    z-index: 2;
}
.gacha-pull-status {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.gacha-pull-status.gacha-new {
    color: #4ade80;
    text-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
}
.gacha-pull-status.gacha-dup {
    color: #38bdf8;
    text-shadow: 0 0 6px rgba(56, 189, 248, 0.5);
}
#gacha-claim-results-btn {
    margin: 16px auto 0 auto;
    display: block;
    min-width: 220px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
}

/* Drop Rates Modal Drawer */
.gacha-rates-panel {
    max-width: 500px;
}
.gacha-rates-title {
    font-size: 18px;
    color: #ffd700;
    margin: 0 0 16px 0;
    text-align: center;
}
.gacha-rates-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.gacha-rate-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(15, 20, 32, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    font-size: 13px;
    color: #e2e8f0;
}
.gacha-rates-info-notes {
    font-size: 12px;
    line-height: 1.5;
    color: #cbd5e1;
    background: rgba(0, 0, 0, 0.4);
    padding: 12px;
    border-radius: 6px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}
.gacha-rates-info-notes p {
    margin: 0 0 6px 0;
}
.gacha-rates-info-notes p:last-child {
    margin-bottom: 0;
}

.player-characters .rank-hat-anbu,
.rank-hat[data-hat="anbu"] {
    top: -42px;
    left: -32px;
    z-index: 10;
    transform: none;
}

/* --- Right Team (Enemy) Rank Hats - Rendered behind character portraits --- */
.enemy-characters .rank-hat {
    left: -32px;
    right: auto;
    z-index: 1;
    transform: none;
}

.enemy-characters .rank-hat-academy,
.enemy-characters .rank-hat[data-hat="academy"] {
    top: -48px;
    left: -34px;
    right: auto;
    z-index: 1;
    transform: none;
}

.enemy-characters .rank-hat-genin,
.enemy-characters .rank-hat[data-hat="genin"] {
    top: -45px;
    left: -32px;
    right: auto;
    z-index: 1;
    transform: none;
}

.enemy-characters .rank-hat-chunin,
.enemy-characters .rank-hat[data-hat="chunin"] {
    top: -38px;
    left: -45px;
    right: auto;
    z-index: 1; /* BEHIND character face */
    transform: none;
}

.enemy-characters .rank-hat-jounin,
.enemy-characters .rank-hat[data-hat="jounin"] {
    top: -40px;
    left: -48px;
    right: auto;
    z-index: 1; /* BEHIND character face */
    transform: none;
}

.enemy-characters .rank-hat-anbu,
.enemy-characters .rank-hat[data-hat="anbu"] {
    top: -40px;
    left: -38px;
    right: auto;
    z-index: 1; /* BEHIND character face */
    transform: none;
}

.roster-page-button {
    border: 0;
    background: transparent;
    padding: 0;
    font-family: 'Franklin', Arial, sans-serif;
    cursor: pointer;
}

.roster-page-button:disabled {
    cursor: default;
}

.nextpage {
    position: absolute;
    left: 433px;
    top: 140px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #2d1507;
    background: var(--na-parchment);
    z-index: 3;
}

.lastpage {
    position: absolute;
    top: 17px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #2d1507;
    background: var(--na-parchment);
    z-index: 3;
}

/* ============================================================
   INGAME CLIENT PAGE — BODY CENTERING
   Applies in both live and remaster modes to center the
   fixed-size battle stage in the browser/popup window.
   min-width resolves via --game-stage-w: 770px live, 1100px
   when .game-remaster is also on the body element.
   ============================================================ */
body.ingame-client-page {
    min-width: var(--game-stage-w);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000000;
}

body.ingame-client-page .backgroundingame {
    flex: 0 0 auto;
}

/* ============================================================
   IN-GAME BATTLE REMASTER LAYOUT
   Disabled by default. Active only under .game-remaster.

   Phase 6A: First-pass visual scaffolding for the 1100×800
   battle stage. All rules are scoped under .game-remaster and
   do not affect the live/default 770×560 battle client.

   JS-sensitive areas deferred to Phase 6B/6C:
   - Timer bar max-width constant (script.js)
   - Health bar max-width constant (script.js)
   - Queue animation getBoundingClientRect() pixel offsets
   - Win vs. lose portrait src swap (dynamic JS assignment)
   - Target overlay create/position (JS-driven)
   - Tooltip screen-edge clamping (JS clientX/clientY logic)

   Manual testing:
     Use the Remaster Mode toggle in ingame.html, or in DevTools:
       document.body.classList.add("game-remaster")
   ============================================================ */

/* --- HUD (top bar) ---
   Scale: 1100/770 ≈ 1.43. Flex layout auto-spreads the three
   HUD sections; only explicitly-positioned children need updates.
*/
.game-remaster .game-hud {
    position: relative;
    height: 112px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px minmax(0, 1fr);
    align-items: start;
    padding: 8px 44px 0;
    box-sizing: border-box;
    z-index: 8;
}

.game-remaster .player-left {
    position: static;
    justify-self: start;
    width: 260px;
    margin-left: 60px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 68px;
    align-items: start;
    gap: 12px;
}

.game-remaster .player-right {
    position: static;
    justify-self: end;
    width: 260px;
    margin-right: 60px;
    max-width: none;
    min-width: 0;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
}

.game-remaster .player-avatar-left {
    left: auto;
    position: static;
}

.game-remaster .player-avatar-left,
.game-remaster .player-avatar-right {
    width: 68px;
    height: 68px;
    object-fit: cover;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}

.game-remaster .player-info,
.game-remaster .player-inforight {
    position: static;
    left: auto;
    top: auto;
    min-width: 0;
    width: 136px;
    max-width: 136px;
    padding-top: 17px;
    align-items: stretch;
}

.game-remaster .player-info {
    text-align: right;
    justify-self: end;
}

.game-remaster .player-inforight {
    text-align: left;
    justify-self: start;
}

.game-remaster .player-name {
    position: static;
    left: auto;
    top: auto;
    display: block;
    width: 100%;
    font-size: 18px;
    line-height: 1.05;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.game-remaster .player-status {
    position: static;
    left: auto;
    top: auto;
    display: block;
    width: 100%;
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.game-remaster .player-info .player-name,
.game-remaster .player-info .player-status {
    text-align: right;
}

.game-remaster .player-inforight .player-name,
.game-remaster .player-inforight .player-status {
    text-align: left;
}

.game-remaster .ready-section {
    position: static;
    justify-self: center;
    width: 330px;
    padding-top: 15px;
    text-align: center;
}

/* Timer track: CSS width scaled to 1.43×; the JS timer-bar
   width constant (191px) is out of scope until Phase 6B. */
.game-remaster .timer-track {
    width: 273px;
    height: 14px;
    margin: 0 auto;
}

.game-remaster .timer-bar {
    width: 273px;
}

.game-remaster .ready-text {
    font-size: 14px;
    line-height: 1;
    margin-bottom: 5px;
}

.game-remaster .chakra-display {
    gap: 13px;
    margin: 5px 0 0;
}

.game-remaster .chakra-item {
    gap: 4px;
}

.game-remaster .chakra-count {
    font-size: 12px;
    line-height: 1;
}

.game-remaster .chakra-item.random-chakra .chakra-icon {
    min-width: 19px;
    height: 19px;
    border: 0;
    box-shadow: 0 1px 2px rgba(45, 21, 7, 0.35), 0 0 0 1px rgba(255, 248, 210, 0.85);
}

.game-remaster .exchange-label {
    position: static;
    margin-top: 3px;
    font-size: 10px;
    line-height: 1;
}

/* Sound slider: overlay the .sound scroll div exactly, fill tan area */
.game-remaster .ingame-sound-controller {
    top: 686px;
    left: 43px;
    width: 170px;
    height: 66px;
    z-index: 5;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 38px;
    padding-right: 14px;
}

.game-remaster .ingame-sound-volume {
    width: 100%;
}

/* --- Character faces, health bars, cards ---
   Target overlay matches face size for CSS-only coverage.
   Health bar CSS max-width scaled; JS HP calculation constant
   (75px full-width) is deferred to Phase 6B for sync.
*/
.game-remaster .character-face {
    width: var(--remaster-character-face);
    height: var(--remaster-character-face);
}

.game-remaster .character-card {
    width: var(--remaster-character-face);
    margin-left: 46px;
    margin-top: -40px;
    z-index: 10;
}

.game-remaster .target-overlay {
    width: var(--remaster-character-face);
    height: var(--remaster-character-face);
}

.game-remaster .health-bar-container {
    width: var(--remaster-character-face);
    height: 18px;
}

.game-remaster .health-bar {
    width: var(--remaster-character-face);
    height: 18px;
}

.game-remaster .health-text {
    width: var(--remaster-character-face);
    line-height: 18px;
}

/* Rank hat stays at legacy size; visual tuning deferred to Phase 6B */

/* Status tooltip icons clear the larger 107px character face */
.game-remaster .skilltooltips {
    left: 120px;
}

.game-remaster .status-tooltip-content {
    left: 120px;
}

/* --- Player and enemy character columns --- */
.game-remaster .player-characters {
    gap: 80px;
    margin-top: 15px;
    margin-left: 0;
    z-index: 10;
}

.game-remaster .enemy-characters {
    top: 146px;
    left: 944px;
    gap: 76px;
    z-index: 10;
}

/* --- Skill holder, scroll frame, and icons ---
   Queue animation uses getBoundingClientRect() in script.js.
   Pixel offsets will need a Phase 6B audit after layout is stable.
   not-turn clip values are proportionally scaled; exact queue
   hide position is a Phase 6B item.
*/
.game-remaster .skillholder {
    top: 27px;
    left: 71px;
}

.game-remaster .ingamescrollbehind {
    content: var(--battle-scroll-behind-remaster-image);
    width: 36px;
    height: 126px;
}

.game-remaster .skillscrollingame {
    background-image: var(--battle-skill-row-remaster-image);
    width: var(--battle-skill-row-remaster-w);
    height: var(--battle-skill-row-remaster-h);
    left: 34px;
    top: 6px;
    filter: var(--remaster-panel-shadow);
}

.game-remaster .skillscrollingame.not-turn {
    clip-path: inset(0 0 0 114px);
    left: -80px;
}

.game-remaster .skillqueue {
    width: 80px;
    height: 80px;
    top: 16px;
    left: 28px;
}

.game-remaster .skillimage {
    width: var(--remaster-skill-icon);
    height: var(--remaster-skill-icon);
    top: 16px;
    left: 57px;
}

.game-remaster .skill-cooldown-badge {
    top: 16px;
    width: var(--remaster-skill-icon);
    height: var(--remaster-skill-icon);
}

.game-remaster .skill-cooldown-badge[data-skill-idx="0"] {
    left: 143px;
}

.game-remaster .skill-cooldown-badge[data-skill-idx="1"] {
    left: 229px;
}

.game-remaster .skill-cooldown-badge[data-skill-idx="2"] {
    left: 315px;
}

.game-remaster .skill-cooldown-badge[data-skill-idx="3"] {
    left: 401px;
}

/* --- Skill information panel (bottom, right of surrender buttons)
   left: 352px puts the right edge at 352+748=1100px (stage edge).
   Horizontally clear of the 260px surrender buttons at left: 43px.
*/
.game-remaster .skillinformation {
    background-image: var(--battle-skill-info-remaster-image);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: var(--battle-skill-info-remaster-w);
    height: var(--battle-skill-info-remaster-h);
    left: 352px;
    top: 606px;
    padding: 36px 26px 34px 76px;
    gap: 16px;
    justify-content: center;
    z-index: auto;
    filter: var(--remaster-panel-shadow);
}

.game-remaster .skillviewimage {
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    position: relative;
    left: auto;
    top: auto;
    z-index: 8;
}

.game-remaster .skillinformation.profile-summary .skillviewimage {
    border-color: #000000;
    border-radius: 0;
    box-shadow: 0 3px 7px rgba(45, 21, 7, 0.35);
}

.game-remaster .ingameskillname {
    font-size: 15px;
    position: static;
    left: auto;
    top: auto;
}

.game-remaster .ingameskilldescription {
    font-size: 12px;
    max-height: 50px;
    width: auto;
    position: static;
    left: auto;
    top: auto;
}

.game-remaster .skillinformation.profile-summary .ingameskilldescription {
    max-height: 56px;
    font-size: 11px;
    line-height: 1.35;
}

.game-remaster .energytext {
    font-size: 10px;
    position: static;
    right: auto;
    top: auto;
}

.game-remaster .ingameclasses {
    font-size: 10px;
    max-width: 220px;
    position: static;
    left: auto;
    top: auto;
}

.game-remaster .ingamecooldown {
    font-size: 10px;
    position: static;
    right: auto;
    top: auto;
}

.game-remaster .ingameclasspicker {
    font-size: 10px;
    position: static;
    right: auto;
    top: auto;
}

.game-remaster .skill-info-meta {
    font-size: 10px;
    padding: 5px 12px;
    justify-content: space-evenly;
}

.game-remaster .sim-seg {
    padding: 0 10px;
}

.game-remaster .sim-lbl {
    font-size: 10px;
}

/* --- Surrender and sound/option buttons ---
   Positioned in the left strip (43–303px) so they stay clear of
   the skill info panel that begins at left: 352px.
*/
.game-remaster .surrenderbutton {
    background-image: var(--options-button-remaster-image);
    width: var(--remaster-small-button-w);
    height: var(--remaster-small-button-h);
    left: 43px;
    top: 613px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-left: 38px;
    padding-right: 12px;
    cursor: pointer;
    filter: var(--remaster-button-shadow);
}

.game-remaster .surrenderbutton span {
    position: static;
    left: auto;
    top: auto;
    width: 118px;
    flex: 0 0 118px;
    text-align: center;
    font-size: 14px;
}

.game-remaster .sound {
    background-image: var(--options-button-remaster-image);
    width: var(--remaster-small-button-w);
    height: var(--remaster-small-button-h);
    left: 43px;
    top: 686px;
    filter: var(--remaster-button-shadow);
}

/* --- Decorative render (bottom character art) --- */
.game-remaster .bottomrender {
    position: absolute;
    width: 219px;
    height: 213px;
    left: 178px;
    top: auto;
    bottom: 0;
    z-index: 6;
    pointer-events: none;
}

.game-remaster .render {
    content: var(--render-remaster-image);
    width: 219px;
}

/* --- Battlefield Background Character Render (Budokai-Arena style) --- */
.battlefield-render-container {
    position: absolute;
    left: 450px;
    top: 60px;
    width: 280px;
    height: 347px;
    z-index: 1; /* Second layer, right above battle background */
    pointer-events: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: visible; /* NO box cropping -- natural PNG transparency */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.battlefield-render-container.hidden-turn {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.battlefield-render {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45));
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.battlefield-render-konan,
.battlefield-render-deidara {
    transform: translate(0px, 0px);
}

.battlefield-render-pain {
    transform: translate(35px, 0px);
}

.battlefield-render-itachi {
    transform: translate(60px, 0px);
}

/* Remaster Stage (1100x800) -- Stops at Y=587px (19px clean padding above skillinformation at Y=606px) */
.game-remaster .battlefield-render-container {
    left: 622px;
    top: 90px;
    right: auto;
    width: 401px;
    height: 497px;
    z-index: 1;
    overflow: visible;
}

.game-remaster .battlefield-render-konan {
    width: 401px;
    height: 497px;
    transform: translate(0px, 0px) scale(1.1);
}

.game-remaster .battlefield-render-deidara {
    width: 401px;
    height: 497px;
    transform: translate(0px, 0px) scale(0.98);
}

.game-remaster .battlefield-render-pain {
    width: 401px;
    height: 497px;
    transform: translate(50px, 0px) scale(0.9);
}

.game-remaster .battlefield-render-itachi {
    width: 401px;
    height: 497px;
    transform: translate(75px, 0px) scale(1.22);
}

/* --- Battle-end overlay and panel ---
   Portrait slot scaled; win.png vs lose.png content swap is done
   by script.js (src attribute). CSS can't distinguish dynamically
   set src, so the portrait object-fit scales whichever image JS
   places. Full remaster portrait swap deferred to Phase 6B.
*/
.game-remaster .battle-end-overlay.visible {
    background: rgba(0, 0, 0, 0.52);
}

.game-remaster .battle-end-panel {
    background-image: var(--battle-end-panel-remaster-image);
    background-size: 100% 100%;
    width: var(--battle-end-panel-remaster-w);
    height: var(--battle-end-panel-remaster-h);
    top: 123px;
    overflow: hidden;
    box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.22),
        0 16px 36px rgba(0, 0, 0, 0.28),
        0 40px 90px rgba(0, 0, 0, 0.32);
    filter: var(--remaster-panel-shadow);
}

.game-remaster .battle-end-portrait {
    width: 332px;
    height: 332px;
    left: 169px;
    top: 64px;
    object-fit: cover;
}

.game-remaster .battle-end-copy {
    left: 526px;
    top: 58px;
    width: 350px;
}

.game-remaster .battle-end-title {
    font-size: 58px;
    margin-left: 0;
    margin-top: 0;
}

.game-remaster .battle-end-message {
    font-size: 15px;
    margin-left: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.game-remaster .battle-end-unlocks {
    min-height: 40px;
    padding: 8px 10px;
    box-sizing: border-box;
}

.game-remaster .battle-end-continue {
    font-size: 36px;
    top: 326px;
    margin-top: 0;
}

/* --- Modal panels (chakra end-turn, exchange chakra, surrender confirm) --- */
.game-remaster .ChakraChooseEndTurn {
    background: var(--modal-panel-remaster-image) no-repeat center / 100% 100% !important;
    width: var(--modal-panel-remaster-w);
    height: var(--modal-panel-remaster-h);
    --remaster-modal-tan-left: 146px;
    --remaster-modal-tan-right: 28px;
    --remaster-modal-content-left: 158px;
    --remaster-modal-content-right: 42px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 0;
    border: 0;
    z-index: 500;
    font-family: 'Franklin', Arial, sans-serif;
    color: #111111;
    overflow: visible;
    filter: var(--remaster-panel-shadow);
}

.game-remaster .exchange_chakra {
    background: var(--modal-panel-remaster-image) no-repeat center / 100% 100% !important;
    width: var(--modal-panel-remaster-w);
    height: var(--modal-panel-remaster-h);
    --remaster-modal-tan-left: 146px;
    --remaster-modal-tan-right: 28px;
    --remaster-modal-content-left: 158px;
    --remaster-modal-content-right: 42px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 0;
    filter: var(--remaster-panel-shadow);
    border: 0;
    z-index: 500;
    font-family: 'Franklin', Arial, sans-serif;
    color: #111111;
    overflow: visible;
}

.game-remaster .surrender-confirm {
    background-image: var(--modal-panel-remaster-image);
    background-size: 100% 100%;
    width: var(--modal-panel-remaster-w);
    height: var(--modal-panel-remaster-h);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 0;
    z-index: 500;
    filter: var(--remaster-panel-shadow);
}

/* Full-viewport dim behind the end-turn/exchange-chakra/surrender modals.
   A real sibling element (created lazily in script.js), not a box-shadow or
   pseudo-element of the panel itself -- both of those paint inside the
   panel's own stacking context and either clip unpredictably at the stage
   edge or (for a negative z-index ::before) paint on TOP of the panel's own
   background instead of behind it. This sits at a lower z-index than the
   panels (500) so it's guaranteed to render underneath them. */
.game-modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 499;
    pointer-events: none;
}

.game-remaster .game-modal-backdrop.visible {
    display: block;
    background: rgba(0, 0, 0, 0.6);
}

.game-action-message {
    position: fixed;
    left: 50%;
    top: 18px;
    z-index: 10020;
    max-width: min(520px, calc(100vw - 32px));
    padding: 10px 14px;
    border: 2px solid #3d160d;
    background: #fff4cf;
    color: #791b12;
    font-family: "Libre Franklin", Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -8px);
    transition: opacity 140ms ease, transform 140ms ease;
}

.game-action-message.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.game-remaster .ChakraChooseEndTurn .chakrachoose {
    position: absolute;
    top: 62px;
    left: var(--remaster-modal-tan-left);
    right: var(--remaster-modal-tan-right);
    width: auto;
    margin: 0;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 2px rgba(255, 248, 210, 0.95), 0 2px 4px rgba(45, 21, 7, 0.18);
}

.game-remaster .ChakraChooseEndTurn .chakra-container {
    position: absolute;
    top: 104px;
    left: var(--remaster-modal-content-left);
    right: var(--remaster-modal-content-right);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding: 0;
    font-size: 13px;
}

.game-remaster .ChakraChooseEndTurn .chakra-column,
.game-remaster .ChakraChooseEndTurn .chakra-columnright,
.game-remaster .exchange_chakra_column {
    gap: 6px;
}

.game-remaster .chakra-title {
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 2px rgba(255, 248, 210, 0.95), 0 2px 4px rgba(45, 21, 7, 0.16);
}

.game-remaster .ChakraChooseEndTurn .chakra-row {
    height: 20px;
    display: grid;
    grid-template-columns: 14px minmax(76px, 1fr) 18px auto;
    gap: 7px;
    align-items: center;
}

.game-remaster .ChakraChooseEndTurn .chakra-name,
.game-remaster .ChakraChooseEndTurn .chakra-amount,
.game-remaster .exchange_chakra_row .chakra-name,
.game-remaster .exchange_chakra_row .chakra-amount {
    text-shadow: 0 1px 2px rgba(255, 248, 210, 0.9), 0 1px 3px rgba(45, 21, 7, 0.14);
}

.game-remaster .ChakraChooseEndTurn .chakra-name {
    min-width: 0;
}

.game-remaster .ChakraChooseEndTurn .chakra-buttons {
    margin-left: 6px;
    gap: 7px;
}

.game-remaster .ChakraChooseEndTurn .skillorder {
    position: absolute;
    top: 260px;
    left: 200px;
    width: 282px;
    min-height: 58px;
    justify-content: center;
    gap: 20px;
    z-index: 2;
}

.game-remaster .ChakraChooseEndTurn .skillorder-item {
    width: 52px;
    height: 52px;
}

.game-remaster .ok-buttonendturn,
.game-remaster .ok-buttonexchange {
    top: auto;
    left: 366px;
    right: auto;
    bottom: 50px;
    width: auto;
    min-width: 152px;
    height: 34px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: #f1bf14;
    color: #000000;
    font-family: 'Franklin', Arial, sans-serif;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    z-index: 10;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.game-remaster .cancel-buttonendturn,
.game-remaster .cancel-buttonexchange {
    top: auto;
    left: 206px;
    bottom: 54px;
    width: auto;
    min-width: 60px;
    height: 26px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #222222;
    background: transparent;
    color: #111111;
    font-family: 'Franklin', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    z-index: 10;
    text-shadow: 0 1px 2px rgba(255, 248, 210, 0.95), 0 2px 4px rgba(45, 21, 7, 0.16);
    pointer-events: auto;
}

.game-remaster .exchange_chakra_title,
.game-remaster .exchange_chakra_subtitle,
.game-remaster .exchange_chakra_choices {
    position: static;
    left: auto;
    top: auto;
    width: auto;
}

.game-remaster .exchange_chakra_title {
    position: absolute;
    top: 50px;
    left: var(--remaster-modal-tan-left);
    right: var(--remaster-modal-tan-right);
    width: auto;
    margin: 0;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 2px rgba(255, 248, 210, 0.95), 0 2px 4px rgba(45, 21, 7, 0.18);
}

.game-remaster .exchange_chakra_choices {
    position: absolute;
    top: 90px;
    left: var(--remaster-modal-tan-left);
    right: var(--remaster-modal-tan-right);
    width: auto;
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 0;
}

.game-remaster .exchange_chakra_subtitle {
    position: absolute;
    top: 136px;
    left: var(--remaster-modal-tan-left);
    right: var(--remaster-modal-tan-right);
    width: auto;
    margin: 0;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 2px rgba(255, 248, 210, 0.95), 0 2px 4px rgba(45, 21, 7, 0.18);
}

.game-remaster .exchange_chakra_container {
    position: absolute;
    top: 181px;
    left: var(--remaster-modal-content-left);
    right: var(--remaster-modal-content-right);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    font-size: 13px;
}

.game-remaster .exchange_chakra_row {
    height: 20px;
    display: grid;
    grid-template-columns: 14px minmax(76px, 1fr) 18px auto auto;
    gap: 7px;
    align-items: center;
}

.game-remaster .exchange_chakra_row .chakra-name,
.game-remaster .exchange_chakra_row .chakra-amount {
    min-width: 0;
}

.game-remaster .minus-button,
.game-remaster .plus-button,
.game-remaster .exchange_symbol {
    width: 17px;
    height: 17px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #a7aaa6;
    background: transparent;
    color: #777777;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 15px;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(45, 21, 7, 0.24);
    position: static;
}

.game-remaster .plus-button,
.game-remaster .exchange_symbol:last-child {
    border-color: #000000;
    background: #000000;
    color: #ffffff;
}

.game-remaster .exchange_chakra_choice {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.game-remaster .exchange_chakra_choice .chakra-box,
.game-remaster .chakra-box {
    width: 13px !important;
    height: 13px !important;
    border: 0 !important;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(45, 21, 7, 0.35), 0 0 0 1px rgba(255, 248, 210, 0.7);
}

.game-remaster .chakra-box.white {
    border: 1px solid #9b9b9b !important;
}

.game-remaster .exchange_chakra_choice.selected {
    outline: 0;
    box-shadow: 0 0 0 2px #111111, 0 1px 3px rgba(45, 21, 7, 0.25);
}

.game-remaster .surrender-confirm-title {
    position: absolute;
    left: 90px;
    right: 20px;
    top: 40px;
    text-align: center;
}

.game-remaster .surrender-confirm-preview-image {
    content: var(--surrender-art-remaster-image);
    width: 275px;
    height: 179px;
    top: 90px;
    left: 178px;
}

.game-remaster .surrender-confirm-ok {
    top: 365px;
    left: 224px;
}

.game-remaster .surrender-confirm-cancel {
    top: 365px;
    left: 326px;
}

.skill-class-badge {
    display: inline-block;
    padding: 2px 6px;
    margin-right: 4px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
    background: #333;
    border: 1px solid #555;
}
.skill-class-badge.class-physical { background: #8a3324; border-color: #a54636; }
.skill-class-badge.class-ranged { background: #4a6b4a; border-color: #5c855c; }
.skill-class-badge.class-affliction { background: #6a3e7a; border-color: #87549a; }
.skill-class-badge.class-mental { background: #2f547c; border-color: #3e6d9e; }
.skill-class-badge.class-melee { background: #8a3324; border-color: #a54636; }
.skill-class-badge.class-action { background: #a57836; border-color: #c49247; }
.skill-class-badge.class-control { background: #2f547c; border-color: #3e6d9e; }
.skill-class-badge.class-instant { background: #555; border-color: #777; }
.skill-class-badge.class-unique { background: #8a7a24; border-color: #a59336; }

/* Enhanced Chakra Boxes */
.chakra-box {
    border-radius: 50% !important;
    box-shadow: inset -1px -1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.chakra-box.white { background: radial-gradient(circle at 30% 30%, #fff, #b3b3b3) !important; }
.chakra-box.black { background: radial-gradient(circle at 30% 30%, #666, #111) !important; }
.chakra-box.green { background: radial-gradient(circle at 30% 30%, #6f6, #161) !important; }
.chakra-box.blue { background: radial-gradient(circle at 30% 30%, #66f, #116) !important; }
.chakra-box.red { background: radial-gradient(circle at 30% 30%, #f66, #611) !important; }


.class-type { margin-right: 4px; }
.class-type:last-child { margin-right: 0; }

.skill-class-badge { margin-right: 4px; }
.skill-class-badge:last-child { margin-right: 0; }

/* ── GAME CLIENT BUG REPORT BUTTONS & MODAL OVERLAY ─────────── */
/* ── GAME CLIENT BUTTONS (PARCHMENT SCROLL AESTHETIC) ────────── */
.game-remaster .training-dummy-button:not([hidden]),
.game-remaster .bug-report-client-button {
    position: absolute;
    top: -48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    height: 34px;
    padding: 0 16px;
    border: 2px solid #8b7d5c;
    border-radius: 4px;
    background: linear-gradient(180deg, #fbe9b8 0%, #d4c9a8 100%);
    color: #3a2008;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 12px rgba(0, 0, 0, 0.55);
    font-family: 'Franklin', Arial, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 7;
    transition: all 0.15s ease;
}

.game-remaster .training-dummy-button:not([hidden]) {
    right: 18px;
}

.game-remaster .bug-report-client-button {
    right: 18px;
}

.game-remaster .training-dummy-button:not([hidden]) ~ .bug-report-client-button {
    right: 184px;
}

.game-remaster .training-dummy-button:not([hidden]):hover,
.game-remaster .bug-report-client-button:hover {
    color: #c41e3a;
    border-color: #c41e3a;
    background: linear-gradient(180deg, #fff3d4 0%, #e5d5b0 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 16px rgba(196, 30, 58, 0.35);
    transform: translateY(-1px);
}

.ingame-bug-button {
    position: absolute;
    top: 14px;
    right: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 32px;
    padding: 0 14px;
    border: 2px solid #8b7d5c;
    border-radius: 4px;
    background: linear-gradient(180deg, #fbe9b8 0%, #d4c9a8 100%);
    color: #3a2008;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 4px 12px rgba(0, 0, 0, 0.55);
    font-family: 'Franklin', Arial, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 100;
    transition: all 0.15s ease;
}

.ingame-bug-button:hover {
    color: #c41e3a;
    border-color: #c41e3a;
    background: linear-gradient(180deg, #fff3d4 0%, #e5d5b0 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 16px rgba(196, 30, 58, 0.35);
    transform: translateY(-1px);
}

/* Custom Sound Range Sliders */
.sound-volume,
.ingame-sound-volume {
    appearance: none;
    -webkit-appearance: none;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, #3a2008 0%, #e8801a 100%);
    outline: none;
    cursor: pointer;
}

.sound-volume::-webkit-slider-thumb,
.ingame-sound-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffae42, #e8801a);
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 6px rgba(232, 128, 26, 0.6);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.sound-volume::-webkit-slider-thumb:hover,
.ingame-sound-volume::-webkit-slider-thumb:hover {
    transform: scale(1.18);
}

.selection-hub-bug-btn {
    width: 100%;
    padding: 8px 12px;
    margin-top: 8px;
    background: linear-gradient(135deg, #3a2008 0%, #1c150c 100%);
    border: 1px solid rgba(215, 149, 58, 0.4);
    border-radius: 4px;
    color: #ffae42;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
}

.selection-hub-bug-btn:hover {
    border-color: #ffae42;
    color: #ffffff;
    background: #3a2008;
}

.na-bug-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  background: rgba(5, 7, 14, 0.85);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.na-bug-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.na-bug-modal {
  background: #faf4e8;
  color: #1b2330;
  border: 3px solid #8b7d5c;
  border-radius: 12px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.9), inset 0 0 30px rgba(139, 125, 92, 0.15);
  overflow: hidden;
  position: relative;
  transform: scale(0.94);
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.na-bug-overlay.active .na-bug-modal {
  transform: scale(1);
}

.na-bug-modal-header {
  background: linear-gradient(135deg, #1b2330 0%, #0d121a 100%);
  color: #f0ede8;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #e8801a;
}

.na-bug-modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #ffae42;
  display: flex;
  align-items: center;
  gap: 8px;
}

.na-bug-modal-close {
  background: none;
  border: none;
  color: #a8a095;
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
}

.na-bug-modal-close:hover {
  color: #e11836;
  background: rgba(225, 24, 54, 0.15);
}

.na-bug-modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.na-bug-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.na-bug-field-group label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #4c5562;
}

.na-bug-input,
.na-bug-select,
.na-bug-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #c4b896;
  border-radius: 6px;
  background: #f4efe2;
  color: #1b2330;
  font-family: inherit;
  font-size: 14px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.na-bug-input:focus,
.na-bug-select:focus,
.na-bug-textarea:focus {
  outline: none;
  border-color: #e8801a;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(232, 128, 26, 0.25), inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.na-bug-textarea {
  min-height: 100px;
  resize: vertical;
}

.na-bug-checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #1b2330;
  cursor: pointer;
}

.na-bug-checkbox-group input[type="checkbox"] {
  accent-color: #e8801a;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.na-bug-status-msg {
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  display: none;
}

.na-bug-status-msg.error {
  display: block;
  background: rgba(225, 24, 54, 0.12);
  color: #c41e3a;
  border: 1px solid rgba(225, 24, 54, 0.3);
}

.na-bug-status-msg.success {
  display: block;
  background: rgba(47, 118, 68, 0.12);
  color: #1f7a3f;
  border: 1px solid rgba(47, 118, 68, 0.3);
}

.na-bug-modal-footer {
  padding: 14px 20px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.na-bug-btn-secondary {
  padding: 8px 16px;
  background: #ebe5d7;
  color: #4c5562;
  border: 1px solid rgba(27, 35, 48, 0.2);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.na-bug-btn-primary {
  padding: 8px 20px;
  background: linear-gradient(135deg, #e8801a 0%, #ffae42 100%);
  color: #17100a;
  border: 1px solid rgba(215, 149, 58, 0.5);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(232, 128, 26, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.na-bug-btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(232, 128, 26, 0.45);
}

.na-bug-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================
   MASTER FULL-STAGE HUB ENVIRONMENT REDESIGN (Shop, Missions, Inventory, PvE)
   Eliminates nested white boxes, inner borders, and dark-on-dark text.
   Spans the full 1100x800 remaster stage with rich dark shinobi aesthetics.
   ============================================================ */

/* Hide legacy scroll assets when viewing hub tabs */
body.hub-view-shop .selectionscroll,
body.hub-view-shop .selectionpage,
body.hub-view-missions .selectionscroll,
body.hub-view-missions .selectionpage,
body.hub-view-inventory .selectionscroll,
body.hub-view-inventory .selectionpage,
body.hub-view-story .selectionscroll,
body.hub-view-story .selectionpage {
    display: none !important;
}

/* Full Stage Viewport (1100x800 stage minus top bar) */
.selection-hub-environment {
    position: absolute;
    left: 0;
    top: 38px;
    z-index: 50;
    width: 100%;
    height: calc(100% - 38px);
    box-sizing: border-box;
    overflow: hidden;
    color: #f4efe2;
    font-family: 'Libre Franklin', 'Franklin', Arial, sans-serif;
}

.game-remaster .selection-hub-environment {
    left: 0;
    top: 38px;
    width: 1100px;
    height: 762px;
}

/* Full-bleed stage canvas (NO floating boxes or awkward padding) */
.selection-hub-env-panel,
.game-remaster .selection-hub-env-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 24px 32px 32px;
    overflow: hidden;
    background: 
        radial-gradient(ellipse at 50% 0%, rgba(232, 128, 26, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse at 85% 90%, rgba(163, 107, 255, 0.1) 0%, transparent 50%),
        linear-gradient(160deg, #090c12 0%, #121824 50%, #06080d 100%) !important;
    border: none !important;
    border-top: 2px solid #ffae42 !important;
    box-shadow: none !important;
}

/* Cinematic Stage Header */
.selection-hub-env-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex: 0 0 auto;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.selection-hub-env-header h1,
.game-remaster .selection-hub-env-header h1 {
    margin: 0;
    color: #ffae42 !important;
    font-family: 'Libre Franklin', 'Franklin', Arial, sans-serif;
    font-size: 42px !important;
    font-weight: 900 !important;
    line-height: 1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9) !important;
}

.selection-hub-env-header p,
.game-remaster .selection-hub-env-header p {
    margin: 6px 0 0;
    color: #d0c8b8 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Toolbar & Filters */
.selection-hub-env-toolbar,
.game-remaster .selection-hub-env-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    min-height: 48px;
    margin-bottom: 20px;
    padding: 8px 14px;
    box-sizing: border-box;
    background: rgba(9, 12, 18, 0.85) !important;
    border: 1px solid #3a3225 !important;
    border-radius: 8px;
}

.selection-hub-env-status {
    color: #fbe9b8 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.selection-hub-rank {
    height: 32px;
    padding: 0 16px;
    border: 1px solid #4a3e2b;
    border-radius: 6px;
    color: #d0c8b8;
    background: rgba(20, 25, 38, 0.6);
    font-family: 'Libre Franklin', 'Franklin', Arial, sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s ease;
}

.selection-hub-rank:hover {
    color: #ffffff;
    border-color: #ffae42;
    background: rgba(232, 128, 26, 0.2);
}

.selection-hub-rank.active {
    color: #1b0d02 !important;
    border-color: #ffae42 !important;
    background: linear-gradient(135deg, #ffae42 0%, #e8801a 100%) !important;
    box-shadow: 0 2px 10px rgba(255, 174, 66, 0.4);
}

.selection-hub-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    color: #fbe9b8;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.selection-hub-search input {
    width: 220px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #4a3e2b;
    border-radius: 6px;
    outline: 0;
    color: #ffffff !important;
    background: rgba(0, 0, 0, 0.6) !important;
    font: inherit;
    font-size: 12px;
}

.selection-hub-search input:focus {
    border-color: #ffae42;
    box-shadow: 0 0 8px rgba(255, 174, 66, 0.3);
}

/* Full-Width Grid Surface (NO inner white box!) */
.selection-hub-shop-grid,
.selection-hub-mission-grid,
.selection-hub-inventory-grid,
.game-remaster .selection-hub-shop-grid,
.game-remaster .selection-hub-mission-grid,
.game-remaster .selection-hub-inventory-grid,
.selection-hub-story-list,
.selection-hub-gauntlet,
.game-remaster .selection-hub-story-list,
.game-remaster .selection-hub-gauntlet {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
    align-content: start;
    gap: 20px !important;
    padding: 4px !important;
    box-sizing: border-box;
    color: #f4efe2 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.selection-hub-env-empty {
    grid-column: 1 / -1;
    padding: 60px 18px;
    color: #d0c8b8 !important;
    text-align: center;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* High-Contrast Card System */
.selection-hub-shop-card,
.selection-hub-mission-card,
.selection-hub-inventory-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    color: #ffffff !important;
    text-decoration: none !important;
    background: linear-gradient(145deg, #18202e 0%, #0d121c 100%) !important;
    border: 1px solid #3a3225 !important;
    border-radius: 10px !important;
    padding: 18px 14px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6) !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.selection-hub-shop-card:hover,
.selection-hub-mission-card:hover,
.selection-hub-inventory-card:hover {
    border-color: #ffae42 !important;
    box-shadow: 0 12px 30px rgba(255, 174, 66, 0.3) !important;
    transform: translateY(-4px) !important;
}

/* Character Portrait Frame */
.selection-hub-shop-face,
.selection-hub-mission-art {
    position: relative;
    overflow: hidden;
    width: 96px !important;
    height: 96px !important;
    margin-bottom: 12px !important;
    background: #090c12;
    border: 2px solid #ffae42 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8) !important;
}

.selection-hub-shop-face img,
.selection-hub-mission-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Character / Item / Mission Title — PURE BRIGHT WHITE (HIGH CONTRAST) */
.selection-hub-shop-name,
.selection-hub-mission-name {
    height: 40px !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.15;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9) !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px !important;
}

/* Price Tag — VIBRANT GOLDEN AMBER */
.selection-hub-shop-price {
    margin: 8px 0 12px !important;
    color: #ffc107 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

/* Unlock / Buy Action Button */
.selection-hub-shop-buy {
    width: 100% !important;
    height: 36px !important;
    border: 1px solid #ffae42 !important;
    border-radius: 6px !important;
    color: #1b0d02 !important;
    background: linear-gradient(135deg, #ffae42 0%, #e8801a 100%) !important;
    font-family: 'Libre Franklin', 'Franklin', Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 0 3px 10px rgba(232, 128, 26, 0.4) !important;
    transition: all 0.15s ease !important;
}

.selection-hub-shop-buy:hover:not(:disabled) {
    background: linear-gradient(135deg, #ffffff 0%, #ffae42 100%) !important;
    border-color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(255, 174, 66, 0.5) !important;
    transform: translateY(-1px) !important;
}

.selection-hub-shop-buy:disabled {
    color: #6b7787 !important;
    background: #232b38 !important;
    border-color: #353f50 !important;
    cursor: default !important;
    box-shadow: none !important;
}

/* Mission Levels & Sections */
.selection-hub-mission-level {
    color: #4caf50 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    min-height: 14px;
}

.selection-hub-mission-section {
    height: 28px !important;
    margin: 5px 0 10px !important;
    color: #d0c8b8 !important;
    font-size: 12px !important;
    font-style: italic;
    line-height: 1.2;
}

.selection-hub-status-pill {
    padding: 5px 10px !important;
    border-radius: 999px !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.selection-hub-status-pill.available {
    color: #cdfbd9 !important;
    background: #1f7a3f !important;
    box-shadow: 0 0 10px rgba(31, 122, 63, 0.4) !important;
}

.selection-hub-status-pill.locked {
    color: #ffffff !important;
    background: #c41e3a !important;
}

.selection-hub-status-pill.completed {
    color: #ffffff !important;
    background: #546e7a !important;
}

/* Inventory Cards */
.selection-hub-inventory-card span {
    color: #d0c8b8 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.selection-hub-inventory-card strong {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 900 !important;
}

/* Clean Mission Details (below the portrait!) */
.selection-hub-mission-details {
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    background: rgba(9, 12, 18, 0.7);
    border: 1px solid #3a3225;
    border-radius: 6px;
    box-sizing: border-box;
}

.selection-hub-mission-feature {
    color: #fbe9b8 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.2;
    margin-bottom: 6px;
}

.selection-hub-mission-rankline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.selection-hub-mission-rank {
    color: #d0c8b8 !important;
    font-size: 11px !important;
    font-weight: 700;
}

.selection-hub-mission-view {
    margin-top: 10px;
    color: #ffae42 !important;
    font-size: 12px !important;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.15s ease;
}

.selection-hub-mission-card:hover .selection-hub-mission-view {
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 174, 66, 0.6);
}

/* ============================================================
   PVE / STORY MODE OVERHAUL
   ============================================================ */
.selection-hub-story-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

.selection-hub-story-chapter {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(14, 18, 26, 0.9) !important;
    border: 1px solid #3a3225 !important;
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.selection-hub-story-chapter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.selection-hub-story-chapter-title {
    color: #ffae42 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}

.selection-hub-story-chapter-progress {
    color: #fbe9b8 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    background: rgba(255, 174, 66, 0.15);
    border: 1px solid rgba(255, 174, 66, 0.4);
    border-radius: 999px;
    padding: 4px 12px;
}

.selection-hub-story-row {
    display: grid !important;
    grid-template-columns: 80px 1fr auto !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 12px 14px !important;
    background: linear-gradient(145deg, #18202e 0%, #0e121a 100%) !important;
    border: 1px solid #3a3225 !important;
    border-radius: 8px !important;
    transition: all 0.15s ease !important;
    cursor: pointer;
}

.selection-hub-story-row:hover {
    border-color: #ffae42 !important;
    transform: translateX(4px) !important;
    box-shadow: 0 4px 16px rgba(255, 174, 66, 0.25) !important;
}

.selection-hub-story-thumb {
    width: 72px !important;
    height: 72px !important;
    border-radius: 6px !important;
    border: 2px solid #ffae42 !important;
    overflow: hidden;
}

.selection-hub-story-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.selection-hub-story-title {
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
    margin-bottom: 4px !important;
}

.selection-hub-story-meta {
    color: #d0c8b8 !important;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 1.4;
    margin: 2px 0 !important;
}

.selection-hub-story-briefing {
    padding: 24px;
    color: #ffffff !important;
    background: rgba(14, 18, 26, 0.95);
    border: 1px solid #ffae42;
    border-radius: 12px;
}

.selection-hub-story-briefing-title {
    color: #ffae42 !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    margin-bottom: 14px;
}

.selection-hub-story-briefing-line {
    color: #d0c8b8 !important;
    font-size: 14px !important;
    line-height: 1.5;
    margin-bottom: 10px;
}

.selection-hub-story-briefing-line strong {
    color: #ffffff !important;
}

.selection-hub-story-begin {
    height: 38px !important;
    padding: 0 24px !important;
    border-radius: 6px !important;
    color: #1b0d02 !important;
    background: linear-gradient(135deg, #ffae42 0%, #e8801a 100%) !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    border: 1px solid #ffae42 !important;
    box-shadow: 0 4px 14px rgba(232, 128, 26, 0.4) !important;
}

.selection-hub-story-begin.hard {
    background: linear-gradient(135deg, #c41e3a 0%, #8b0000 100%) !important;
    color: #ffffff !important;
    border-color: #ff4d4d !important;
    box-shadow: 0 4px 14px rgba(196, 30, 58, 0.4) !important;
}

/* ============================================================
   PORTRAIT THUMBNAIL QUALITY & FRAMING FIX
   ============================================================ */
.selection-hub-mission-art,
.selection-hub-shop-face {
    position: relative !important;
    overflow: hidden !important;
    width: 104px !important;
    height: 104px !important;
    margin: 0 auto 12px !important;
    background: #090c12 !important;
    border: 2px solid #ffae42 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8) !important;
    flex: 0 0 auto !important;
}

.selection-hub-mission-art img,
.selection-hub-shop-face img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 15% !important;
    image-rendering: -webkit-optimize-contrast !important;
}

/* ============================================================
   OPAQUE FULL-STAGE CANVAS (PREVENTS RED BACKGROUND BLEED)
   ============================================================ */
.selection-hub-environment,
.game-remaster .selection-hub-environment {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 50 !important;
    width: 1100px !important;
    height: 800px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #06080d !important;
}

.selection-hub-env-panel,
.game-remaster .selection-hub-env-panel {
    padding-top: 52px !important; /* Clearance for top nav bar */
}

/* ============================================================
   CHUNIN EXAMS (GAUNTLET) COMPLETE VISUAL OVERHAUL
   ============================================================ */
.selection-hub-gauntlet {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 20px !important;
    background: transparent !important;
    color: #ffffff !important;
}

/* Eliminate white card overlays */
.selection-hub-gauntlet-card,
.selection-hub-gauntlet-guide,
.selection-hub-gauntlet-hero,
.selection-hub-gauntlet-section,
.selection-hub-gauntlet-event-card {
    background: rgba(14, 18, 26, 0.92) !important;
    border: 1px solid #3a3225 !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6) !important;
}

/* Dashboard 2-Column Grid Layout */
.selection-hub-gauntlet-dashboard {
    display: grid !important;
    grid-template-columns: 1fr 340px !important;
    gap: 20px !important;
    align-items: start !important;
}

.selection-hub-gauntlet-main,
.selection-hub-gauntlet-side {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.selection-hub-gauntlet-title,
.selection-hub-gauntlet-section-head h3,
.selection-hub-gauntlet-hero h2 {
    color: #ffae42 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9) !important;
    margin: 0 0 8px 0 !important;
}

.selection-hub-gauntlet-copy,
.selection-hub-gauntlet-hero p,
.selection-hub-gauntlet-section-head p {
    color: #d0c8b8 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

.selection-hub-gauntlet-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-top: 12px !important;
}

.selection-hub-gauntlet-steps span {
    padding: 8px 14px !important;
    background: rgba(9, 12, 18, 0.8) !important;
    border: 1px solid #3a3225 !important;
    border-radius: 6px !important;
    color: #8a96a8 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.selection-hub-gauntlet-steps span.active {
    border-color: #ffae42 !important;
    color: #ffffff !important;
    background: rgba(232, 128, 26, 0.25) !important;
    font-weight: 900 !important;
}

.selection-hub-gauntlet-steps span.done {
    border-color: #4caf50 !important;
    color: #cdfbd9 !important;
    background: rgba(31, 122, 63, 0.2) !important;
}

/* Resource Badges */
.selection-hub-gauntlet-resources {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

.selection-hub-gauntlet-resource {
    padding: 10px 12px !important;
    background: rgba(9, 12, 18, 0.8) !important;
    border: 1px solid #3a3225 !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
}

.selection-hub-gauntlet-resource span {
    color: #d0c8b8 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

.selection-hub-gauntlet-resource strong {
    color: #ffae42 !important;
    font-size: 22px !important;
    font-weight: 900 !important;
}

.selection-hub-gauntlet-resource em {
    color: #a0aab8 !important;
    font-size: 10px !important;
    font-style: normal !important;
    margin-top: 2px !important;
}

/* Command & Map Route */
.selection-hub-gauntlet-command {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 20px !important;
    background: linear-gradient(135deg, #1e2636 0%, #10141f 100%) !important;
    border: 1px solid #ffae42 !important;
    border-radius: 10px !important;
}

.selection-hub-gauntlet-command strong {
    color: #ffffff !important;
    font-size: 16px !important;
}

.selection-hub-gauntlet-command span {
    color: #ffae42 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
}

.selection-hub-gauntlet-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.selection-hub-gauntlet-row-label {
    width: 60px !important;
    color: #ffae42 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
}

.selection-hub-gauntlet-nodes {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.selection-hub-gauntlet-node {
    padding: 8px 14px !important;
    border-radius: 6px !important;
    border: 1px solid #3a3225 !important;
    background: rgba(9, 12, 18, 0.8) !important;
    color: #d0c8b8 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    cursor: pointer !important;
}

.selection-hub-gauntlet-node.reachable {
    border-color: #ffae42 !important;
    background: rgba(232, 128, 26, 0.25) !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(255, 174, 66, 0.4) !important;
}

.selection-hub-gauntlet-node.visited {
    border-color: #4caf50 !important;
    background: rgba(31, 122, 63, 0.2) !important;
    color: #cdfbd9 !important;
}

/* ============================================================
   HYPER-OPTIMIZED CLEAN MISSION CARD STYLING
   ============================================================ */
.selection-hub-mission-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-bottom: 8px !important;
}

.selection-hub-mission-card .selection-hub-mission-art {
    width: 120px !important;
    height: 120px !important;
    margin: 6px auto 10px !important;
    border: 2px solid #ffae42 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.8) !important;
}

.selection-hub-mission-card .selection-hub-mission-art img {
    object-fit: cover !important;
    object-position: center top !important;
    image-rendering: auto !important;
}

/* ============================================================
   MOBILE RESPONSIVE & MATCHMAKING MODAL OVERHAUL
   ============================================================ */

/* Stage modal backdrop centering (Search for Opponent & Private Match) */
.searching-backdrop,
.private-match-backdrop {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9999 !important;
    background: rgba(0, 0, 0, 0.75) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.searching-backdrop.hidden,
.private-match-backdrop.hidden {
    display: none !important;
}

.searchingscroll,
.private-match-modal {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: auto !important;
}

/* Touch-action optimization for mobile fingers */
button, a, [role="button"], input, select {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Mobile smooth scrolling for hub navigation tabs */
.selection-hub-nav {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
}

.selection-hub-nav::-webkit-scrollbar {
    display: none !important;
}

/* Mobile Orientation Banner & Overlay */
.mobile-orientation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(4, 6, 12, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    text-align: center;
    color: #f3eede;
    animation: fadeInMobileOverlay 0.3s ease-out;
}

.mobile-orientation-overlay.dismissed {
    display: none !important;
}

.mobile-orientation-card {
    background: linear-gradient(145deg, rgba(22, 27, 38, 0.96), rgba(12, 16, 24, 0.98));
    border: 1px solid rgba(232, 128, 26, 0.35);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.8), 0 0 32px rgba(232, 128, 26, 0.15);
    border-radius: 16px;
    padding: 28px 24px;
    max-width: 380px;
    width: 100%;
}

.mobile-rotate-icon {
    font-size: 48px;
    margin-bottom: 12px;
    animation: rotateDevicePulse 2.5s infinite ease-in-out;
}

@keyframes rotateDevicePulse {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(90deg) scale(1.1); }
}

.mobile-orientation-card h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
    font-weight: 700;
    color: #e8801a;
    letter-spacing: 0.5px;
}

.mobile-orientation-card p {
    margin: 0 0 20px 0;
    font-size: 14px;
    line-height: 1.5;
    color: #c0b8aa;
}

.mobile-dismiss-btn {
    background: linear-gradient(180deg, rgba(232, 128, 26, 0.25), rgba(180, 80, 10, 0.45));
    border: 1px solid #e8801a;
    color: #f3eede;
    font-weight: 700;
    font-size: 13px;
    padding: 10px 22px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mobile-dismiss-btn:active {
    transform: scale(0.96);
    background: rgba(232, 128, 26, 0.5);
}

/* Touch active status tooltip display */
.skilltooltips.has-status.touch-active .status-tooltip-content,
.skilltooltips.touch-active .status-tooltip-content {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ============================================================
   SHINOBI ACADEMY STARTER GUIDE (AUTHENTIC NARUTO-ARENA PARCHMENT)
   ============================================================ */
.academy-guide-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    background: rgba(0, 0, 0, 0.82) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-sizing: border-box !important;
}

.academy-guide-overlay.dismissed,
.academy-guide-overlay[hidden] {
    display: none !important;
}

.academy-guide-card {
    max-width: 540px !important;
    width: 100% !important;
    background: #d8c7a6 !important;
    border: 3px double #4a341b !important;
    border-radius: 4px !important;
    padding: 24px 28px !important;
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.95), inset 0 0 15px rgba(74, 52, 27, 0.25) !important;
    color: #211a17 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    font-family: 'Petra', 'Libre Franklin', 'Outfit', sans-serif !important;
}

.academy-guide-badge {
    display: inline-block !important;
    padding: 3px 12px !important;
    border-radius: 3px !important;
    background: #4a341b !important;
    border: 1px solid #211202 !important;
    color: #f0bd62 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    margin-bottom: 10px !important;
    text-transform: uppercase !important;
}

.academy-guide-header h2 {
    margin: 0 0 6px 0 !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #3b2308 !important;
    letter-spacing: 0.04em !important;
    font-family: 'Petra', 'Libre Franklin', sans-serif !important;
    text-transform: uppercase !important;
}

.academy-guide-header p {
    margin: 0 0 16px 0 !important;
    color: #594635 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.academy-guide-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
    text-align: left !important;
}

.academy-guide-step {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    background: #cbb998 !important;
    border: 1px solid #8c7453 !important;
    padding: 10px 14px !important;
    border-radius: 4px !important;
}

.academy-step-num {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    background: #4a341b !important;
    color: #f0bd62 !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    border: 1px solid #211202 !important;
}

.academy-step-text strong {
    display: block !important;
    color: #4a2800 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-bottom: 2px !important;
}

.academy-step-text span {
    display: block !important;
    color: #382c20 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

.academy-guide-dismiss-btn {
    width: 100% !important;
    padding: 10px 20px !important;
    border: 1px solid #000000 !important;
    border-radius: 3px !important;
    background: #4a341b !important;
    color: #f0bd62 !important;
    font-family: 'Petra', 'Libre Franklin', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
    transition: background 0.15s ease, transform 0.15s ease !important;
}

.academy-guide-dismiss-btn:hover {
    background: #5c4224 !important;
}

/* ── QUESTS, ACHIEVEMENTS, LOGIN REWARDS & PROMO CODE STYLES ────── */
.quest-achieve-modal-card {
    max-width: 720px !important;
    width: 90% !important;
    background: #0f172a !important;
    border: 1px solid rgba(234, 179, 8, 0.3) !important;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.8), 0 0 15px rgba(234, 179, 8, 0.2) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    color: #e2e8f0 !important;
}

.quest-subtabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 12px;
}

.quest-tab-btn {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quest-tab-btn.active, .quest-tab-btn:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    color: #ffffff;
    border-color: #f59e0b;
    box-shadow: 0 0 10px rgba(217, 119, 6, 0.4);
}

.quest-list-scroll, .achievement-list-scroll {
    max-height: 480px;
    overflow-y: auto;
    padding-right: 6px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.quest-item-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 16px;
    transition: transform 0.2s ease;
}

.quest-item-card:hover {
    border-color: rgba(234, 179, 8, 0.4);
    transform: translateY(-2px);
}

.quest-info h3 {
    margin: 0 0 4px 0;
    font-size: 16px;
    color: #fbbf24;
}

.quest-info p {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: #94a3b8;
}

.quest-reward-tags {
    font-size: 12px;
    color: #38bdf8;
    font-weight: 600;
    margin-bottom: 8px;
}

.quest-progress-bar-bg {
    width: 100%;
    max-width: 320px;
    height: 8px;
    background: rgba(15, 23, 42, 0.8);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.quest-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #6366f1);
    transition: width 0.3s ease;
}

.quest-claim-btn {
    background: rgba(51, 65, 85, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #cbd5e1;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.quest-claim-btn.active {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #ffffff;
    border-color: #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
    cursor: pointer;
}

.quest-claim-btn.claimed {
    background: rgba(15, 23, 42, 0.5);
    color: #64748b;
    border-color: transparent;
}

/* 🏆 Achievements Tiers Grid */
.achievement-card {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 16px;
}

.achievement-header h3 {
    margin: 0 0 4px 0;
    font-size: 17px;
    color: #f59e0b;
}

.achievement-header p {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #94a3b8;
}

.achievement-tiers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.achievement-tier-box {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 10px;
    text-align: center;
}

.achievement-tier-box.ready {
    border-color: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
}

.tier-badge {
    font-size: 12px;
    font-weight: 800;
    color: #fbbf24;
    text-transform: uppercase;
}

.tier-rewards {
    font-size: 11px;
    color: #38bdf8;
    margin: 6px 0;
}

/* 📅 Daily Login Calendar */
.login-rewards-subtitle {
    text-align: center;
    color: #94a3b8;
    margin-bottom: 18px;
    font-size: 14px;
}

.login-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

@media (max-width: 640px) {
    .login-calendar-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.login-day-card {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px 6px;
    text-align: center;
    position: relative;
}

.login-day-card.today-active {
    border-color: #f59e0b;
    background: rgba(217, 119, 6, 0.15);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
}

.login-day-title {
    font-size: 12px;
    font-weight: 800;
    color: #cbd5e1;
}

.login-day-icon {
    font-size: 24px;
    margin: 6px 0;
}

.login-day-rewards {
    font-size: 10px;
    color: #38bdf8;
    line-height: 1.2;
}

.login-day-badge {
    margin-top: 6px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(15, 23, 42, 0.8);
    color: #64748b;
}

.login-day-badge.ready {
    background: #16a34a;
    color: #ffffff;
}

/* 🎁 Promo Code Modal */
.promo-input-group {
    display: flex;
    gap: 8px;
    justify-content: center;
    max-width: 380px;
    margin: 0 auto;
}

.promo-code-field {
    flex: 1;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(234, 179, 8, 0.4);
    border-radius: 6px;
    padding: 10px 14px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.promo-code-field:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

/* Settings Menu Expanded Rewards */
.settings-menu-header {
    font-size: 13px;
    font-weight: 900;
    color: var(--ca-orange, #f59e0b);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 6px;
}

.settings-menu-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 10px 0;
}

.settings-rewards-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-reward-btn {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #e2e8f0;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-reward-btn:hover {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.3), rgba(180, 83, 9, 0.3));
    border-color: #f59e0b;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

.settings-modal-btn {
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #e2e8f0;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-modal-btn:hover {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.35), rgba(180, 83, 9, 0.35));
    border-color: #f59e0b;
    color: #ffffff;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.settings-modal-btn.bug-report-btn:hover {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.35), rgba(185, 28, 28, 0.35));
    border-color: #ef4444;
}

/* ── LUXURY SETTINGS & REWARDS HUB MODAL STYLES ──────────────────── */
.settings-modal-overlay,
.shinobi-modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(4, 6, 12, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 99999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    box-sizing: border-box !important;
}

.settings-modal-overlay.hidden,
.shinobi-modal-overlay.hidden {
    display: none !important;
}

.settings-modal-dialog h1,
.settings-modal-dialog h2,
.settings-modal-dialog h3,
.settings-modal-dialog p,
.settings-modal-dialog span,
.settings-modal-dialog button,
.shinobi-modal-panel h1,
.shinobi-modal-panel h2,
.shinobi-modal-panel h3,
.shinobi-modal-panel p,
.shinobi-modal-panel span,
.shinobi-modal-panel button {
    font-family: 'Libre Franklin', 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.settings-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 8px;
    color: #ffd700;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.settings-modal-close:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: #ffd700;
    color: #ffffff;
    transform: scale(1.05);
}

.settings-modal-dialog {
    position: relative;
    width: 100%;
    max-width: 580px;
    background: radial-gradient(circle at 50% 0%, #171b29 0%, #0c0f18 65%, #06080e 100%);
    border: 1.5px solid rgba(245, 158, 11, 0.45);
    border-radius: 16px;
    box-shadow: 0 0 50px rgba(245, 158, 11, 0.25), 0 25px 60px rgba(0, 0, 0, 0.9);
    padding: 22px 24px;
    color: #f8fafc;
    font-family: 'Libre Franklin', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    transform: translateY(0);
    box-sizing: border-box;
}

.settings-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-modal-crest {
    width: 44px;
    height: 44px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.3) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 1.5px solid #f59e0b;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.35);
    flex-shrink: 0;
}

.settings-modal-title {
    margin: 0 0 2px !important;
    font-family: 'Libre Franklin', system-ui, sans-serif !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    color: #fbbf24 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.settings-modal-subtitle {
    margin: 0 !important;
    font-family: 'Libre Franklin', system-ui, sans-serif !important;
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
}

.settings-section-card {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.settings-section-card:last-child {
    margin-bottom: 0;
}

.settings-section-title {
    font-family: 'Libre Franklin', system-ui, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 900 !important;
    color: #f59e0b !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

.settings-section-card.sound-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.75) 100%);
    border: 1px solid rgba(245, 158, 11, 0.35);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.settings-audio-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.audio-label-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.audio-name {
    font-family: 'Libre Franklin', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #f1f5f9 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.audio-val-badge {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(217, 119, 6, 0.2) 100%);
    border: 1.5px solid #f59e0b;
    color: #ffd700;
    padding: 3px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 900;
    font-family: 'Libre Franklin', system-ui, sans-serif !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.35);
    letter-spacing: 0.04em;
}

.settings-slider-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.slider-endpoint-label {
    font-size: 11px;
    font-weight: 800;
    color: #94a3b8;
    font-family: 'Libre Franklin', system-ui, sans-serif !important;
    user-select: none;
}

.settings-slider {
    flex-grow: 1;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #0b0f19;
    border: 1.5px solid rgba(245, 158, 11, 0.45);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 8px rgba(0, 0, 0, 0.5);
    outline: none;
    accent-color: #f59e0b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-slider:hover {
    border-color: #f59e0b;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.8);
}

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.settings-hub-card-btn {
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.85) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    padding: 10px 12px !important;
    color: #e2e8f0 !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
}

.settings-hub-card-btn:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(30, 41, 59, 0.95) 100%) !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.25) !important;
}

.settings-hub-card-btn.practice:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(30, 41, 59, 0.95) 100%) !important;
    border-color: #10b981 !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.25) !important;
}

.settings-hub-card-btn.bug:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(30, 41, 59, 0.95) 100%) !important;
    border-color: #ef4444 !important;
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.25) !important;
}

.card-crest-badge {
    position: static !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    flex-shrink: 0 !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
}

.card-crest-badge.quests { background: rgba(245, 158, 11, 0.15) !important; border: 1px solid rgba(245, 158, 11, 0.4) !important; color: #fbbf24 !important; }
.card-crest-badge.achieve { background: rgba(168, 85, 247, 0.15) !important; border: 1px solid rgba(168, 85, 247, 0.4) !important; color: #c084fc !important; }
.card-crest-badge.check-in { background: rgba(16, 185, 129, 0.15) !important; border: 1px solid rgba(16, 185, 129, 0.4) !important; color: #34d399 !important; }
.card-crest-badge.promo { background: rgba(239, 68, 68, 0.15) !important; border: 1px solid rgba(239, 68, 68, 0.4) !important; color: #f87171 !important; }
.card-crest-badge.dummy { background: rgba(56, 189, 248, 0.15) !important; border: 1px solid rgba(56, 189, 248, 0.4) !important; color: #38bdf8 !important; }
.card-crest-badge.bug-crest { background: rgba(244, 63, 94, 0.15) !important; border: 1px solid rgba(244, 63, 94, 0.4) !important; color: #fb7185 !important; }

.card-text-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex-grow: 1 !important;
    overflow: hidden !important;
}

.card-text-wrap strong {
    font-family: 'Libre Franklin', system-ui, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #f1f5f9 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

.card-text-wrap span {
    font-family: 'Libre Franklin', system-ui, sans-serif !important;
    font-size: 10.5px !important;
    color: #94a3b8 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-weight: 500 !important;
}

.card-arrow {
    font-size: 16px !important;
    font-weight: 900 !important;
    color: #f59e0b !important;
    opacity: 0.7 !important;
    transition: transform 0.2s ease !important;
}

.settings-hub-card-btn:hover .card-arrow {
    opacity: 1 !important;
    transform: translateX(3px) !important;
}

/* ── ULTRA-PREMIUM SHINOBI QUESTS & REWARDS STYLES ───────────────── */
.quest-achieve-modal-card {
    max-width: 680px !important;
    width: 92% !important;
    background: linear-gradient(145deg, #0c101d 0%, #161e30 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.45) !important;
    border-radius: 16px !important;
    box-shadow: 0 0 50px rgba(245, 158, 11, 0.25), 0 25px 60px rgba(0, 0, 0, 0.9) !important;
    padding: 24px 28px !important;
    color: #f8fafc !important;
}

/* Quest Subtabs */
.quest-subtabs {
    display: flex;
    gap: 8px;
    margin: 16px 0 20px;
    background: rgba(15, 23, 42, 0.8);
    padding: 6px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.quest-tab-btn {
    flex: 1;
    background: transparent;
    border: 0;
    color: #94a3b8;
    padding: 10px 16px;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 800;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.quest-tab-btn:hover {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.1);
}

.quest-tab-btn.active {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35);
}

/* Quest Item Scroll Container */
.quest-list-scroll {
    max-height: 440px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-right: 4px;
}

.quest-list-scroll::-webkit-scrollbar {
    width: 6px;
}

.quest-list-scroll::-webkit-scrollbar-thumb {
    background: rgba(245, 158, 11, 0.4);
    border-radius: 3px;
}

/* Quest Item Card */
.quest-item-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 18px;
    transition: all 0.2s ease;
}

.quest-item-card:hover {
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(30, 41, 59, 0.75);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.quest-info {
    flex-grow: 1;
}

.quest-info h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 900;
    color: #fbbf24;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.quest-info p {
    margin: 0 0 8px;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.4;
}

.quest-reward-tags {
    font-size: 11px;
    font-weight: 700;
    color: #cbd5e1;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.quest-progress-bar-bg {
    height: 8px;
    background: rgba(15, 23, 42, 0.9);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.quest-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    border-radius: 4px;
    transition: width 0.4s ease;
}

/* Quest Claim Button */
.quest-claim-btn {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: #94a3b8;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 800;
    cursor: default;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.quest-claim-btn.active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #34d399;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.4);
    animation: pulseGlow 2s infinite;
}

.quest-claim-btn.active:hover {
    transform: scale(1.04);
    box-shadow: 0 0 22px rgba(16, 185, 129, 0.6);
}

.quest-claim-btn.claimed {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(255, 255, 255, 0.05);
    color: #475569;
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 12px rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 22px rgba(16, 185, 129, 0.7); }
}

/* Achievements Grid & Tier Cards */
.achievement-list-scroll {
    max-height: 460px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.achievement-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
}

.achievement-header h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 900;
    color: #fbbf24;
}

.achievement-header p {
    margin: 0 0 12px;
    font-size: 12px;
    color: #94a3b8;
}

.achievement-tiers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.achievement-tier-box {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

.achievement-tier-box.ready {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.achievement-tier-box.claimed {
    opacity: 0.6;
}

.tier-badge {
    font-size: 11px;
    font-weight: 900;
    color: #fbbf24;
    text-transform: uppercase;
}

.tier-target {
    font-size: 11px;
    color: #cbd5e1;
}

.tier-rewards {
    font-size: 11px;
    font-weight: 700;
    color: #f59e0b;
}

/* Daily Login Calendar Grid */
.login-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin: 20px 0;
}

.login-day-card {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.login-day-card.today {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
}

.login-day-card.claimed {
    opacity: 0.55;
}

/* ── AUTHENTIC NARUTO SHINOBI SCROLL GAME FRAMEWORK ─────────────────── */
.shinobi-scroll-canvas {
    position: relative !important;
    border-radius: 16px !important;
    background: radial-gradient(circle at 50% 20%, #151d30 0%, #090e1a 100%) !important;
    border: 2px solid #d97706 !important;
    box-shadow: 0 0 60px rgba(245, 158, 11, 0.3), inset 0 0 30px rgba(0, 0, 0, 0.9), 0 30px 80px rgba(0, 0, 0, 0.95) !important;
    padding: 26px 30px !important;
    overflow: hidden !important;
}

/* Ninja Scroll Wooden Roller Cap Inlay */
.shinobi-scroll-spindle-top,
.shinobi-scroll-spindle-bottom {
    position: absolute;
    left: -2%;
    width: 104%;
    height: 10px;
    background: linear-gradient(180deg, #522b15 0%, #1f0f07 100%);
    border-top: 1px solid #f59e0b;
    border-bottom: 1px solid #78350f;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    z-index: 10;
}

.shinobi-scroll-spindle-top { top: 0; }
.shinobi-scroll-spindle-bottom { bottom: 0; }

/* Hanko Crimson Seal Stamp (朱印) */
.hanko-seal-stamp {
    position: absolute;
    top: 14px;
    right: 60px;
    width: 44px;
    height: 44px;
    border: 2px solid rgba(220, 38, 38, 0.6);
    background: rgba(185, 28, 28, 0.15);
    color: #ef4444;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 900;
    font-family: 'Petra', serif;
    transform: rotate(-12deg);
    opacity: 0.75;
    pointer-events: none;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
    box-shadow: inset 0 0 10px rgba(220, 38, 38, 0.3);
}

/* Mission Rank Tags */
.mission-rank-tag {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: 'Libre Franklin', sans-serif;
    display: inline-block;
}

.mission-rank-tag.d-rank { background: rgba(59, 130, 246, 0.2); border: 1px solid #3b82f6; color: #60a5fa; }
.mission-rank-tag.c-rank { background: rgba(16, 185, 129, 0.2); border: 1px solid #10b981; color: #34d399; }
.mission-rank-tag.b-rank { background: rgba(245, 158, 11, 0.2); border: 1px solid #f59e0b; color: #fbbf24; }
.mission-rank-tag.a-rank { background: rgba(168, 85, 247, 0.2); border: 1px solid #a855f7; color: #c084fc; }
.mission-rank-tag.s-rank { background: rgba(239, 68, 68, 0.2); border: 1px solid #ef4444; color: #f87171; box-shadow: 0 0 10px rgba(239, 68, 68, 0.4); }

/* Mission Contract Card */
.shinobi-quest-contract {
    position: relative;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(26, 36, 56, 0.9) 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.shinobi-quest-contract:hover {
    border-color: #f59e0b;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.25), 0 0 15px rgba(245, 158, 11, 0.15);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(30, 41, 59, 0.95) 100%);
}

.contract-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, rgba(15, 23, 42, 0.9) 100%);
    border: 1px solid rgba(245, 158, 11, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.contract-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.contract-title {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: #f8fafc;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.shinobi-modal-panel h1,
.shinobi-modal-panel h2,
.shinobi-modal-panel h3,
.settings-modal-dialog h2,
.settings-modal-dialog h3,
.quest-achieve-modal-card h2,
.quest-achieve-modal-card h3,
.gacha-modal-header h2 {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.contract-desc {
    margin: 0 0 10px;
    font-size: 12px;
    color: #cbd5e1;
    line-height: 1.4;
}

.contract-rewards {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.reward-pill {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 4px;
}

.reward-pill.ryo { color: #fbbf24; border-color: rgba(245, 158, 11, 0.4); background: rgba(245, 158, 11, 0.15); }
.reward-pill.scrolls { color: #34d399; border-color: rgba(16, 185, 129, 0.4); background: rgba(16, 185, 129, 0.15); }
.reward-pill.shards { color: #38bdf8; border-color: rgba(56, 189, 248, 0.4); background: rgba(56, 189, 248, 0.15); }

/* Chakra Energy Track */
.chakra-track {
    height: 10px;
    background: #090d16;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(245, 158, 11, 0.3);
    position: relative;
}

.chakra-fill {
    height: 100%;
    background: linear-gradient(90deg, #d97706 0%, #f59e0b 70%, #fef08a 100%);
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
    transition: width 0.4s ease;
}

/* Shinobi Claim Button */
.shinobi-claim-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: 1px solid #34d399;
    border-radius: 8px;
    color: #ffffff;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    transition: all 0.2s ease;
}

.shinobi-claim-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 28px rgba(16, 185, 129, 0.75), 0 6px 16px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   FRONTEND RESILIENCE & UI/UX TOAST NOTIFICATION SYSTEM
   ============================================================ */
.game-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 380px;
    width: calc(100vw - 40px);
    pointer-events: none;
}

.game-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(15, 23, 42, 0.94);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px 16px;
    color: #f8fafc;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05);
    pointer-events: auto;
    animation: gameToastSlideIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.game-toast.removing {
    animation: gameToastSlideOut 0.2s cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

.game-toast-icon {
    font-size: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-toast-msg {
    flex: 1;
}

.game-toast.error {
    border-color: rgba(239, 68, 68, 0.6);
    background: rgba(26, 12, 16, 0.95);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.2), 0 0 15px rgba(239, 68, 68, 0.15);
}
.game-toast.error .game-toast-icon { color: #ef4444; }

.game-toast.warning {
    border-color: rgba(245, 158, 11, 0.6);
    background: rgba(26, 20, 10, 0.95);
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.2), 0 0 15px rgba(245, 158, 11, 0.15);
}
.game-toast.warning .game-toast-icon { color: #f59e0b; }

.game-toast.success {
    border-color: rgba(16, 185, 129, 0.6);
    background: rgba(10, 24, 18, 0.95);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.2), 0 0 15px rgba(16, 185, 129, 0.15);
}
.game-toast.success .game-toast-icon { color: #10b981; }

.game-toast.info {
    border-color: rgba(56, 189, 248, 0.6);
    background: rgba(10, 20, 30, 0.95);
    box-shadow: 0 8px 24px rgba(56, 189, 248, 0.2), 0 0 15px rgba(56, 189, 248, 0.15);
}
.game-toast.info .game-toast-icon { color: #38bdf8; }

@keyframes gameToastSlideIn {
    from {
        opacity: 0;
        transform: translateX(40px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes gameToastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateX(40px) scale(0.96);
    }
}

/* Invalid Action Shake Micro-Animation */
.action-invalid-shake {
    animation: actionInvalidShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
}

@keyframes actionInvalidShake {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(3px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* Battle Connection Drop Banner */
.battle-connection-banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    background: linear-gradient(90deg, #b91c1c 0%, #dc2626 50%, #b91c1c 100%);
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    padding: 6px 12px;
    z-index: 1000000;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.battle-connection-banner.hidden {
    display: none !important;
}

/* Accessible Interactive Focus Outlines */
button:focus-visible, 
input:focus-visible, 
select:focus-visible, 
textarea:focus-visible, 
[tabindex]:focus-visible {
    outline: 2px solid #f59e0b !important;
    outline-offset: 2px !important;
}

/* ── Shinobi Cosmetics, Shop & Inventory System ──────────────────────── */
.selection-hub-cosmetics-grid,
.selection-hub-inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    padding: 16px 0;
}

.selection-hub-cosmetic-card,
.selection-hub-inventory-item-card {
    background: linear-gradient(180deg, #161b26 0%, #0d1017 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.selection-hub-cosmetic-card:hover,
.selection-hub-inventory-item-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 174, 66, 0.4);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6), 0 0 12px rgba(255, 174, 66, 0.15);
}

.selection-hub-cosmetic-card.equipped,
.selection-hub-inventory-item-card.equipped {
    border-color: #22c55e;
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.3);
}

.cosmetic-preview-wrapper {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    border-radius: 8px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #080a10;
    position: relative;
}

.cosmetic-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.cosmetic-title-preview {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.2;
    padding: 4px 8px;
    word-break: break-word;
}

.cosmetic-border-frame-preview {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cosmetic-card-name {
    font-size: 13px;
    font-weight: 800;
    color: #f8fafc;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.cosmetic-card-desc {
    font-size: 10.5px;
    color: #94a3b8;
    margin-bottom: 8px;
    line-height: 1.3;
    min-height: 28px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cosmetic-card-price {
    font-size: 12px;
    font-weight: 800;
    color: #ffd700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cosmetic-card-btn {
    width: 100%;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
}

.cosmetic-card-btn.buy-btn {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
    color: #1a0f02;
}
.cosmetic-card-btn.buy-btn:hover:not(:disabled) {
    background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}
.cosmetic-card-btn.buy-btn:disabled {
    background: #1f2430;
    color: #64748b;
    cursor: not-allowed;
}

.cosmetic-card-btn.equip-btn {
    background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
}
.cosmetic-card-btn.equip-btn:hover {
    background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.cosmetic-card-btn.equipped-btn {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid #22c55e;
    cursor: default;
}

/* Player Card Avatar Frame & Title Badge */
.player-avatar-frame {
    position: relative;
    width: 68px;
    height: 68px;
    min-width: 68px;
    min-height: 68px;
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #080a12;
    transition: all 0.25s ease;
}

.player-avatar-frame img.player-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.player-avatar-border-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    z-index: 3;
}

.player-equipped-title-badge {
    display: inline-block;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #ffae42;
    background: rgba(255, 174, 66, 0.12);
    border: 1px solid rgba(255, 174, 66, 0.35);
    padding: 1px 6px;
    border-radius: 4px;
    margin-top: 2px;
    margin-bottom: 2px;
    width: fit-content;
}

/* Predefined Border Styles */
.border-azure-chakra {
    border: 3px solid #38bdf8 !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.6) !important;
}

.border-crimson-fire {
    border: 3px solid #ef4444 !important;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.6) !important;
}

.border-golden-sage {
    border: 3px solid #eab308 !important;
    box-shadow: 0 0 14px rgba(234, 179, 8, 0.7) !important;
}

.border-shadow-anbu {
    border: 3px solid #8b5cf6 !important;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.6) !important;
}

.border-emerald-medic {
    border: 3px solid #10b981 !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.6) !important;
}

/* Modal Overlay & Dialog */
.shinobi-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 6, 12, 0.85);
    backdrop-filter: blur(6px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.shinobi-modal-overlay.hidden {
    display: none !important;
}