/* globalStyles.css */
@import url('https://fonts.googleapis.com/css2?family=Freeman&family=Roboto:wght@400;700&family=Roboto+Condensed:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&display=swap');

* {
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Game pictures are never dragged by the browser itself (that drag shows the
   "not allowed" circle with a cross as the pointer). */
img {
    -webkit-user-drag: none;
}

/* Safari: typing boxes must stay selectable, or they cannot be typed into. */
input, textarea {
    -webkit-user-select: text;
    user-select: text;
    cursor: auto;
}

body {
    margin: 0;
    padding: 0;
    background-color: #050706;
    cursor: default;
    font-family: 'Roboto Condensed', sans-serif; 
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

/* Viewport Container Setup */
#wargrid-viewport {
    position: relative;
    width: 1760px;  /* menu, terrain and the 500-wide column 3 */
    height: 900px;
    background-color: #000000;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
}

/* Core UI Element Positioning Rules */
.ui-element {
    position: absolute;
    display: none;
    z-index: 10;
}

.ui-element img {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

/* Hitbox & Typography Zones */
.hitbox-zone {
    background-color: transparent;
    cursor: pointer;
    border: none;
    outline: none;
}

.text-msg-zone {
    border: none;
    background: none;
    cursor: default;
    pointer-events: none;
    display: block;
    word-wrap: break-word;
    white-space: pre-wrap;
    line-height: 1.4;
    text-align: left;
}
/* Deployment placement guide in the side panel: shown by placementGuide.js */
#IMG-PlacementRule, #MSG-PlacementNotes {
    display: none;
    pointer-events: none;
}

/* Opponent's Terrain guide (bombGuide.js): full-height side panel */
#IMG-SidePanelTallBlock, #MSG-BombGuide {
    display: none;
    pointer-events: none;
}

#IMG-SidePanelTallBlock {
    z-index: 11;
}

body.side-bomb-guide #MSG-BombGuide,
body.side-bomb-guide-tall #IMG-SidePanelTallBlock {
    display: block !important;
}

body.side-bomb-guide #MSG-HintsMsgZone,
body.side-bomb-guide-tall #IMG-SidePanelBlock {
    display: none !important;
}

/* MORE HELP: SHOW / HIDE guidance (sidePanel.js). The button sits in the
   title bar, right of the title. */
#BTN-GuidanceToggle {
    position: absolute;
    left: 258px;
    top: 10px;
    width: 70px;
    height: 29px;
    padding: 0;
    z-index: 20;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #f2d16b;
    background: #0b1a08;
    border: 1px solid #a3915e;
    cursor: pointer;
}
#BTN-GuidanceToggle:hover { filter: brightness(1.3); }

/* Hidden: the guidance goes; Smart Clues and the round-wise damages panel
   stay. (Live game messages are on the Message Board.) */
body.wg-guidance-hidden #IMG-PlacementRule,
body.wg-guidance-hidden #MSG-PlacementNotes,
body.wg-guidance-hidden.side-bomb-guide #MSG-BombGuide {
    display: none !important;
}
body.wg-guidance-hidden.side-bomb-guide #MSG-HintsMsgZone {
    display: block !important;
}
body.wg-guidance-hidden #MSG-HintsMsgZone {
    font-size: 0 !important;
}
body.wg-guidance-hidden #MSG-HintsMsgZone > * {
    display: none !important;
}
body.wg-guidance-hidden #MSG-HintsMsgZone::before {
    content: attr(data-hidden-note);
    display: block;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 17px;
    font-style: italic;
    color: #b9b493;
}

/* Laptop: MORE HELP in the lower box of column 3 (sidePanel.js).
   wg-help-inline (deployment, rounds 1-2): the box stays, its guidance shown
   only with wg-help-open. wg-help-popup (round 3): the box is a pop-up over
   the LOSS BY ROUND table, shown with wg-help-open. Round 4 on: neither. */
body:not(.wg-mobile) #Z-SidePanelBlock,
body:not(.wg-mobile) #IMG-SidePanelBlock,
body:not(.wg-mobile) #IMG-SidePanelTallBlock,
#BTN-HelpQ,
#BTN-HelpShowHide {
    display: none !important;
}
body:not(.wg-mobile).wg-help-inline #Z-SidePanelBlock,
body:not(.wg-mobile).wg-help-inline #IMG-SidePanelBlock,
body:not(.wg-mobile).wg-help-popup.wg-help-open #Z-SidePanelBlock,
body:not(.wg-mobile).wg-help-popup.wg-help-open #IMG-SidePanelBlock,
body:not(.wg-mobile).wg-help-inline #BTN-HelpQ,
body:not(.wg-mobile).wg-help-popup #BTN-HelpQ,
body:not(.wg-mobile).wg-help-inline #BTN-HelpShowHide {
    display: block !important;
}
body:not(.wg-mobile).wg-help-inline:not(.wg-help-open) #MSG-HintsMsgZone,
body:not(.wg-mobile).wg-help-inline:not(.wg-help-open) #IMG-PlacementRule,
body:not(.wg-mobile).wg-help-inline:not(.wg-help-open) #MSG-PlacementNotes,
body:not(.wg-mobile).wg-help-inline:not(.wg-help-open) #MSG-BombGuide {
    visibility: hidden !important;
}
body:not(.wg-mobile) #MSG-BombGuide,
body:not(.wg-mobile) #MSG-HintsMsgZone {
    overflow-y: auto;
    pointer-events: auto;
}
/* "?": right of the terrain's message strip (Your Terrain, Opponent's Terrain) */
#BTN-HelpQ {
    position: absolute;
    left: 1029px;
    top: 806px;
    width: 36px;
    height: 36px;
    padding: 0;
    z-index: 1560;          /* Above the terrain box (1500), below its sound icons (1600) */
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: #f2d16b;
    background: #0b1a08;
    border: 2px solid #c9a94f;
    cursor: pointer;
}
#BTN-HelpShowHide {
    position: absolute;
    right: 46px;
    top: 5px;
    width: 64px;
    height: 28px;
    padding: 0;
    z-index: 30;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #f2d16b;
    background: #0b1a08;
    border: 1px solid #c9a94f;
    cursor: pointer;
}
body.wg-help-open #BTN-HelpQ {
    color: #0b1a08;
    background: #f2d16b;
}
#BTN-HelpClose {
    position: absolute;
    right: 8px;
    top: 5px;
    width: 30px;
    height: 28px;
    padding: 0;
    z-index: 30;
    font-family: Arial, sans-serif;
    font-size: 18px;
    color: #ffc72c;
    background: transparent;
    border: 1px solid #ffc72c;
    cursor: pointer;
}
#BTN-HelpQ:hover, #BTN-HelpClose:hover, #BTN-HelpShowHide:hover { filter: brightness(1.3); }

/* Status boxes (YOUR STATUS / OPPONENT'S STATUS) */
#MSG-YSPlayerLine, #MSG-OSPlayerLine {
    text-align: center;
    line-height: 24px;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 700;
    pointer-events: none;
}

#MSG-YSRound, #MSG-YSScore, #MSG-YSTimer, #MSG-YSFreeGame,
#MSG-OSRound, #MSG-OSScore, #MSG-OSTimer, #MSG-OSFreeGame {
    line-height: 25px;
    white-space: nowrap;
    pointer-events: none;
}

.sb-value {
    font-weight: 700;
}

/* Help popup: the text scrolls inside its panel instead of spilling out */
#BOX-HelpTxtZone {
    overflow-x: hidden;
    overflow-y: auto;
    pointer-events: auto;
    padding: 6px 14px 6px 6px;
    scrollbar-width: thin;
}

#BTN-CloseHelpPop, #BTN-TxtMoveUp, #BTN-TxtMoveDown {
    cursor: pointer;
}

#diagnostic-console {
    display: none;
}
/* Overall responsive scaling wrapper */
#wargrid-scale-wrapper {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 1760px;  /* menu, terrain and the 500-wide column 3 */
    height: 900px;

    transform: translate(-50%, -50%);
    transform-origin: center center;
}

/* Fixed logical game canvas */
#wargrid-viewport {
    position: relative;
    width: 1760px;  /* menu, terrain and the 500-wide column 3 */
    height: 900px;
    background-color: #000000;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
}
/* Thin scroll bar: the round-by-round tables, and the Message Board when its
   text is taller than the board (main.js adds .wg-overflowing). */
/* Chrome / Edge / Safari use the ::-webkit-scrollbar rules (5px wide);
   scrollbar-width / scrollbar-color would override them with a wider bar,
   so they are set only for browsers without them (Firefox). */
@supports not selector(::-webkit-scrollbar) {
    .wg-thin-scroll { scrollbar-width: thin; scrollbar-color: #8a7a45 transparent; }
    .wg-thin-scroll.wg-scroll-track { scrollbar-width: auto; scrollbar-color: #8a7a45 #26341a; }
}
.wg-thin-scroll::-webkit-scrollbar { width: 5px; }
.wg-thin-scroll::-webkit-scrollbar-thumb { background: #8a7a45; border-radius: 3px; }
.wg-thin-scroll::-webkit-scrollbar-track { background: transparent; }
/* With a visible track and arrows (the round-by-round tables): wide enough
   to drag with the mouse. */
.wg-thin-scroll.wg-scroll-track::-webkit-scrollbar { width: 10px; }
.wg-thin-scroll.wg-scroll-track::-webkit-scrollbar-thumb { border-radius: 4px; border: 1px solid #26341a; }
.wg-thin-scroll.wg-scroll-track::-webkit-scrollbar-track { background: #26341a; }
.wg-thin-scroll.wg-scroll-track::-webkit-scrollbar-button:single-button:vertical {
    display: block; height: 12px;
    background: #26341a no-repeat center / 8px 6px;
}
.wg-thin-scroll.wg-scroll-track::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath d='M4 0L8 6H0z' fill='%23c9b56e'/%3E%3C/svg%3E");
}
.wg-thin-scroll.wg-scroll-track::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6'%3E%3Cpath d='M0 0H8L4 6z' fill='%23c9b56e'/%3E%3C/svg%3E");
}

#MSG-MsgBoardMsgZone.wg-overflowing {
    overflow-y: auto !important;
    pointer-events: auto !important;
}

/* Terrain picture still loading (HumanPlayerWarGrid.js waitForTerrainPicture):
   the equipment icons wait, hidden, under a blinking "Please wait...". */
#Z-PlTerrImgArea.wg-terrain-loading #HPWG-EquipmentIconLayer { visibility: hidden; }
.wg-terrain-wait {
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    z-index: 30;
    padding: 10px 28px;
    background: rgba(0, 0, 0, .7);
    border: 2px solid #a3915e;
    color: #f2d16b;
    font: 700 26px 'Roboto Condensed', sans-serif;
    white-space: nowrap;
    pointer-events: none;
    animation: wg-wait-blink 1s ease-in-out infinite;
}
body.wg-mobile .wg-terrain-wait { font-size: 40px; padding: 14px 36px; }
@keyframes wg-wait-blink { 50% { opacity: .25; } }