/* Doodle Den minigame (docs/doodle-den-minigame-design.md) - every style specific to this feature,
   kept out of style.css so the main stylesheet isn't carrying non-essential gameplay-specific CSS.
   Linked from index.html alongside the other per-feature stylesheets (shop.css, rewards.css, etc). */

/* Doodle Den chat status variants (doodleDen.js's handleDoodleDenChatMessage) - layered on top of the
   plain .chat-hint/.doodle-den-status look (style.css) for the lines worth calling out: a correct guess
   (green, with points earned), a turn/game ending (red), a turn starting (orange), the "You're close!"
   nudge (blue). */
div#chat-display-inner div.doodle-den-green {
    background: #04a359;
    color: #FFF;
    font-weight: 600;
}

div#chat-display-inner div.doodle-den-red {
    background: #e80c53;
    color: #FFF;
    font-weight: 600;
}

div#chat-display-inner div.doodle-den-orange {
    background: #e97e03;
    color: #FFF;
    font-weight: 600;
}

div#chat-display-inner div.doodle-den-blue {
    background: #1090f8;
    color: #FFF;
    font-weight: 600;
}

div#chat-display-inner div.doodle-den-purple {
    background: #9e37f3;
    color: #FFF;
    font-weight: 600;
}

/* Doodle Den (docs/doodle-den-minigame-design.md Section 2) - #gems-ui-container stays visible here
   (uiElements.js's toggleDoodleDenTopBarMode), so players can zoom to see the easel, but only the exit
   button and zoom controls are actually relevant while seated/drawing - everything else in the
   container (gem shop, news, rewards, etc.) is hidden rather than removed, so it just reappears as-is
   once this class comes off on leaving the room. */
#gems-ui-container.gems-ui-doodle-den-mode > *:not(#roomExitBtn):not(#camera-control-btn):not(#camera-control-panel) {
    display: none !important;
}

/* #camera-button (free-look pan toggle) is pointless here - mobile hides the joystick entirely while
   seated/drawing, so there's no input to pan with, and desktop never needs to pan around a fixed-size
   room this small. Zoom in/out stay available either side of it. The actual hide/narrow rules are
   generic, not Doodle Den-specific - see #camera-control-panel.camera-button-hidden in style.css -
   this just applies that class via toggleCameraPanButton() (uiElements.js). */

/* Doodle Den's drawing canvas (docs/doodle-den-minigame-design.md Section 4) - left/top/width/height
   are set inline by repositionDoodleDenCanvas() (doodleDen.js), since they depend on the room's current
   camera zoom/viewport and must be recomputed on resize/zoom. Everything static lives here.
   Transparent by default - the easel's white "paper" is the map's own white tile block (gid 1025,
   doodleDen.json) showing through underneath, not a flat CSS fill, so it stays pixel-perfect with the
   map art regardless of how closely the canvas rect lines up. Popup mode (below) overrides this back to
   solid white, since there's no map art behind it there - just the modal's dark backdrop. */
canvas#doodleDenCanvas {
    position: fixed;
    background: transparent;
    z-index: 0;
    display: none;
    /* Without this, a touch-drag on the canvas is interpreted as a page scroll/pan gesture by the
       browser instead of being delivered as pointermove events - the drawer's own stroke still *starts*
       (pointerdown fires), but gets cut short almost immediately once the browser's gesture recognizer
       takes over, which is exactly the "tiny stroke that doesn't continue" symptom on mobile. */
    touch-action: none;
}

/* Shared Doodle Den modal shell (doodleDen.js's createDoodleDenModal) - same convention as every other
   interface in this codebase (e.g. rewards-interface.html/rewardsInterface.js): .flex-container alone
   handles full-viewport flex centering, this just adds a dimming backdrop + the inner content box.
   Used by the drawer's clipped-canvas popup fallback and the word-choice popup below. */
.doodle-den-modal-parent {
    z-index: 10;
    background: rgba(0, 0, 0, 0.6);
}

.doodle-den-modal-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* The drawer's canvas, swapped into this mode by repositionDoodleDenCanvas() when the in-world easel
   would be clipped by the viewport (e.g. short mobile landscape) - sized by CSS to reliably fit within
   the viewport instead of the normal inline left/top/width/height that track the (now-clipped) easel's
   world position. */
canvas#doodleDenCanvas.doodle-den-canvas-popup-mode {
    position: static;
    background: #fff;
    width: min(85vw, 70vh);
    height: min(85vw, 70vh);
}

/* Drawer-only Clear/Undo (+ color picker for supporters) - doodleDen.js's ensureDoodleDenToolbar().
   Moved between in-world (fixed, set inline by repositionDoodleDenCanvas()) and popup mode (a normal
   flex sibling of the canvas inside .doodle-den-modal-container) - position/left/top/width are only
   ever meaningful in the former, so left as inline styles rather than here. */
#doodleDenToolbar {
    display: none;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    z-index: 3;
}

.doodle-den-toolbar-btn {
    font-family: Arial, sans-serif;
    background-color: #26b17d;
    color: #FFF;
    font-weight: 600;
    text-transform: uppercase;
    border: 2px solid #282828;
    border-radius: 7px;
    font-size: 13px;
    padding: 8px 14px;
    cursor: pointer;
}

.doodle-den-toolbar-btn:hover {
    background-color: #27d191;
}

/* On mobile, the swatches grid drops to its own row below Clear/Undo instead of squeezing in next to
   them - flex-basis: 100% on the swatches container (doodleDen.js adds this class only when isMobile)
   forces that line break regardless of how much horizontal room is actually left. */
#doodleDenToolbar.doodle-den-toolbar-mobile {
    flex-wrap: wrap;
}

#doodleDenToolbar.doodle-den-toolbar-mobile .doodle-den-color-swatches {
    flex-basis: 100%;
    justify-content: center;
    gap: 8px;
}

/* The grid itself already stretches to the full row width (flex-basis: 100% above) - it's each swatch
   button's own fixed 24px size (below) that was leaving a big empty gap on the right instead of filling
   it. On mobile, let each one fill its grid column instead, staying square via aspect-ratio. */
#doodleDenToolbar.doodle-den-toolbar-mobile .doodle-den-color-swatch {
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
}

/* Preset color swatches (doodleDen.js's ensureDoodleDenColorSwatches) - replaces a native
   <input type="color">, which is awkward to use one-handed on mobile (where most drawing happens). */
.doodle-den-color-swatches {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
}

.doodle-den-color-swatch {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 2px solid #282828;
    border-radius: 5px;
    cursor: pointer;
}

.doodle-den-color-swatch.doodle-den-color-swatch-active {
    border-color: #FFF;
    box-shadow: 0 0 0 2px #282828;
}

/* Canvas-corner downvote shortcut (build step 7, docs/doodle-den-minigame-design.md Section 8/9) -
   doodleDen.js's updateDoodleDenCanvasDownvoteBtn() positions this via a live getBoundingClientRect()
   read of the canvas, so it works unchanged whether the canvas is in-world or in the clipped-viewport
   popup; left/top are set inline, everything else lives here. Hidden to everyone except non-drawers
   while a turn is actively being drawn. */
#doodleDenCanvasDownvoteBtn {
    display: none;
    position: fixed;
    align-items: center;
    justify-content: center;
    z-index: 3;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid #c0392b;
    border-radius: 7px;
    color: #c0392b;
    font-size: 15px;
    cursor: pointer;
}

#doodleDenCanvasDownvoteBtn:hover {
    background: #fdecea;
}

#doodleDenCanvasDownvoteBtn:disabled {
    border-color: #ccc;
    color: #999;
    cursor: default;
    background: rgba(255, 255, 255, 0.9);
}

/* Word-choice popup (doodleDen.js's renderDoodleDenWordChoicePopup) - only ever shown to the current
   drawer, during their own turnPhase 'choosingWord'. */
#doodleDenWordChoice-container {
    font-family: Arial, sans-serif;
    background: #fff;
    border-radius: 12px;
    padding: 17px;
    max-width: 360px;
    width: calc(100% - 48px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* .shop-item-coins-balance's own base rule (shop.css) is scoped under .shop-item-interface, which this
   popup isn't - reproducing just the sizing/spacing half here so the shared gems-balance pill (same
   classes the Gem Shop's purchase popups use) still looks right; .shop-item-gems-balance's own color
   rule (shop.css) isn't ancestor-scoped, so that part already applies unchanged. Fused directly under
   the re-roll button (doodleDen.js appends this after the button) rather than its own separate pill -
   the matching border-radius pairing is what makes the two read as one piece. */
#doodleDenWordChoice-container .shop-item-coins-balance {
    font-size: 12px;
    text-align: center;
    padding: 5px;
    border-radius: 0 0 7px 7px;
    margin: 0;
    width: calc(100% - 10px);
}

.doodle-den-word-choice-heading {
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    color: #282828;
    margin-bottom: 9px;
}

.doodle-den-word-choice-options {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 3px;
}

.doodle-den-word-choice-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    border: none !important;
    border-radius: 7px;
    padding: 10px;
    cursor: pointer;
    color: #FFF;
}

.doodle-den-word-choice-btn.doodle-den-tier-easy {
    background-color: #26b17d;
}

.doodle-den-word-choice-btn.doodle-den-tier-easy:hover {
    background-color: #149866;
}

.doodle-den-word-choice-btn.doodle-den-tier-medium {
    background-color: #f09226;
}

.doodle-den-word-choice-btn.doodle-den-tier-medium:hover {
    background-color: #df7a07;
}

.doodle-den-word-choice-btn.doodle-den-tier-hard {
    background-color: #da3847;
}

.doodle-den-word-choice-btn.doodle-den-tier-hard:hover {
    background-color: #c32735;
}

.doodle-den-word-choice-word {
    font-weight: 600;
    font-size: 24px;
    text-transform: capitalize;
    text-shadow: 0px 1px 1px #000;
}

.doodle-den-word-choice-tier {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.doodle-den-word-choice-reroll {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 15px;
    background-color: #d647e5;
    color: #FFF;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    text-shadow: 0px 1px 1px #000;
    border: 1px solid #882293;
    border-radius: 7px 7px 0 0;
    box-shadow: inset 0px 1px 0px #f592ff;
    padding: 10px;
    cursor: pointer;
}

.doodle-den-word-choice-reroll:hover {
    background-color: #ef51ff;
}

.doodle-den-word-choice-reroll:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Scoreboard (build step 6, docs/doodle-den-minigame-design.md Section 8) - a persistent sidebar on
   desktop (doodleDen.js's ensureDoodleDenScoreboardSidebar). */
div#doodleDenScoreboardSidebar {
    display: none;
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 3;
    width: 220px;
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    background: #fff;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    font-family: Arial, sans-serif;
	border: 2px solid #000;
}

/* "You're drawing: WORD" panel (doodleDen.js's handleDoodleDenYourWord/repositionDoodleDenYourWordPanel) -
   left/top/width are set inline, positioned live below whichever scoreboard access point (the sidebar
   above, or the mobile toggle button below) is actually visible right now. */
div#doodleDenYourWordPanel {
    display: none;
    position: fixed;
    z-index: 3;
    background: #fff;
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    font-family: Arial, sans-serif;
    color: #282828;
    text-align: center;
    box-sizing: border-box;
}

.doodle-den-your-word-label {
    font-size: 16px;
    font-weight: 600;
}

.doodle-den-your-word-text {
    margin-top: 2px;
    font-size: 16px;
    font-weight: 400;
}

/* Mobile equivalent - a toggle button opening the same row list inside the shared Doodle Den modal
   shell, rather than a permanent sidebar eating into an already-tight, forced-zoomed-out viewport. */
button#doodleDenScoreboardToggleBtn {
    display: none;
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 3;
    font-family: Arial, sans-serif;
    background-color: #26b17d;
    color: #FFF;
    font-weight: 600;
    text-transform: uppercase;
    border: 2px solid #282828;
    border-radius: 7px;
    font-size: 13px;
    padding: 8px 14px;
    cursor: pointer;
}

#doodleDenScoreboard-container {
    position: relative; /* anchors the top-right .close-button's absolute offset to this panel */
    font-family: Arial, sans-serif;
    background: #fff;
    border-radius: 12px;
    padding: 17px;
    max-width: 320px;
    width: calc(100% - 48px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Direct flex child of .doodle-den-modal-container (align-items: center) - needs its own explicit
   full width, or it shrink-wraps to its content instead of filling the panel (the actual cause of the
   scoreboard rows rendering narrow/centered on mobile instead of edge-to-edge). Scrolling lives here,
   not on #doodleDenScoreboard-container itself - every other .close-button in the game pokes out past
   its panel's own edge (position:absolute, negative top/right), which an overflow on the panel itself
   would clip. */
.doodle-den-scoreboard-modal-content {
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-sizing: border-box;
}

.doodle-den-scoreboard-heading {
    font-weight: 600;
    font-size: 18px;
    color: #282828;
    margin-bottom: 6px;
    text-align: center;
}

.doodle-den-scoreboard-progress {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
    text-align: center;
}

.doodle-den-scoreboard-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.doodle-den-scoreboard-row {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #ddd;
    border-radius: 7px;
    padding: 6px 8px;
}

.doodle-den-scoreboard-row.doodle-den-scoreboard-drawer {
    background: #fff4d6;
    border-color: #e8ac2c;
}

.doodle-den-scoreboard-row.doodle-den-scoreboard-next {
    background: #e8f7f0;
    border-color: #26b17d;
}

.doodle-den-scoreboard-row.doodle-den-scoreboard-guessed .doodle-den-scoreboard-username {
    color: #26b17d;
}

.doodle-den-scoreboard-username {
    font-weight: 600;
    font-size: 13px;
    color: #282828;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doodle-den-scoreboard-tag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #666;
    white-space: nowrap;
}

.doodle-den-scoreboard-score {
    font-weight: 600;
    font-size: 13px;
    color: #282828;
    min-width: 28px;
    text-align: right;
}

.doodle-den-scoreboard-downvote {
    background: none;
    border: 1px solid #c0392b;
    border-radius: 5px;
    color: #c0392b;
    font-size: 12px;
    width: 22px;
    height: 22px;
    line-height: 1;
    cursor: pointer;
}

.doodle-den-scoreboard-downvote:hover {
    background: #fdecea;
}

.doodle-den-scoreboard-downvote:disabled {
    border-color: #ccc;
    color: #999;
    cursor: default;
    background: none;
}

/* Status/timer panel (doodleDen.js's buildDoodleDenStatusTimerPanel) - sits below the scoreboard rows,
   always reflects the room's current state ("Waiting for players...", "X is drawing!" + a live countdown),
   rebuilt on every doodleDenStateUpdate rather than relying on the one-shot chat status lines, which a
   player can miss entirely if they join mid-broadcast. */
.doodle-den-status-timer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #ddd;
    text-align: center;
}

.doodle-den-status-timer-label {
    font-size: 13px;
    font-weight: 600;
    color: #282828;
}

.doodle-den-status-timer-countdown {
    font-size: 20px;
    font-weight: 700;
    color: #26b17d;
    font-variant-numeric: tabular-nums;
}

/* Game-over popup (doodleDen.js's handleDoodleDenGameOver) - uses the shared .doodle-den-modal-parent/
   -container shell (createDoodleDenModal), same as the word-choice and canvas popups. */
#doodleDenGameOver-container {
    font-family: Arial, sans-serif;
    background: #fff;
    border-radius: 12px;
    padding: 0 20px 20px;
    max-width: 380px;
    width: calc(100% - 48px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    text-align: center;
}

.doodle-den-gameover-heading {
    margin-top: 16px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #767676;
}

.doodle-den-gameover-winner-tag {
    margin-top: 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #c9962f;
}

.doodle-den-gameover-avatars {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 14px;
    margin-top: 6px;
}

/* Ring/crown treatment matches creator-info-popup.css's own .creator-info-avatar-* exactly - "winner"
   and "featured creator" are both a "this player is spotlighted" framing. */
.doodle-den-gameover-avatar-wrap {
    position: relative;
    width: 108px;
    height: 108px;
}

.doodle-den-gameover-avatar-wrap-small {
    width: 64px;
    height: 64px;
}

.doodle-den-gameover-avatar-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #f3c969 0%, #fff6da 15%, #f3c969 30%, #c9962f 50%, #f3c969 70%, #fff6da 85%, #f3c969 100%);
}

.doodle-den-gameover-avatar-inner {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: #957bb6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.doodle-den-gameover-avatar-base {
    width: 48px;
    height: 55px;
    background-position: 0 0;
    position: relative;
    /* zoom, not transform: scale() - a transform-scaled element rasterizes onto its own compositing
       layer, which only stays crisp until something forces a recomposite (here, the auto-dismiss
       countdown mutating text in the same modal every second) - confirmed as the cause of the avatar
       going blurry a few seconds before the popup closes (10 Nov 2026). zoom actually resizes the box
       at the layout level instead of visually scaling it post-layout, so there's no separate rasterized
       layer to go stale - children inherit the same zoom, no JS changes needed. */
    zoom: 2;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
	top: 2px;
}

.doodle-den-gameover-avatar-wrap-small .doodle-den-gameover-avatar-base {
    zoom: 1;
}

.doodle-den-gameover-avatar-base div {
    position: absolute;
    width: 48px;
    height: 55px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.doodle-den-gameover-avatar-hair { z-index: 3; }
.doodle-den-gameover-avatar-top { z-index: 2; }
.doodle-den-gameover-avatar-bottom { z-index: 1; }

.doodle-den-gameover-winner-name {
    margin-top: 10px;
    font-size: 20px;
    font-weight: 700;
    color: #282828;
}

.doodle-den-gameover-winner-score {
    margin-top: 2px;
    font-size: 15px;
    font-weight: 600;
    color: #767676;
}

.doodle-den-gameover-winner-score strong {
    color: #282828;
    font-variant-numeric: tabular-nums;
}

.doodle-den-gameover-standings {
    width: 100%;
    margin-top: 16px;
    text-align: left;
}

.doodle-den-gameover-standings-heading {
    font-size: 13px;
    font-weight: 600;
    color: #282828;
    margin-bottom: 8px;
}

.doodle-den-gameover-standings-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.doodle-den-gameover-standings-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 7px;
    background: #f5f5f5;
    font-size: 13px;
}

.doodle-den-gameover-standings-row-winner {
    background: #fff6da;
    border: 1px solid #f3c969;
}

.doodle-den-gameover-standings-rank {
    width: 18px;
    text-align: center;
    font-weight: 700;
    color: #767676;
    flex-shrink: 0;
}

.doodle-den-gameover-standings-row-winner .doodle-den-gameover-standings-rank {
    color: #c9962f;
}

.doodle-den-gameover-standings-username {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    color: #282828;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doodle-den-gameover-standings-score {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #282828;
}

.doodle-den-gameover-footer {
    width: 100%;
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.doodle-den-gameover-status {
    font-size: 12px;
    color: #767676;
    text-align: center;
}

.doodle-den-gameover-countdown {
    color: #282828;
    font-variant-numeric: tabular-nums;
}

.doodle-den-gameover-close {
    font-family: Arial, sans-serif;
    background-color: #26b17d;
    color: #FFF;
    font-weight: 600;
    text-transform: uppercase;
    border: 2px solid #282828;
    border-radius: 7px;
    font-size: 13px;
    padding: 9px 26px;
    cursor: pointer;
}

.doodle-den-gameover-close:hover {
    background-color: #149866;
}

@media (max-width: 500px) {
    #doodleDenGameOver-container {
        max-width: calc(100vw - 58px);
    }

    #doodleDenScoreboard-container {
        max-width: calc(100vw - 58px);
    }

	#doodleDenWordChoice-container {
		max-width: calc(100vw - 58px);
	}
}

/* Doodle Den leaderboard - reuses the shared #minigame-leaderboard-interface chrome every other
   minigame leaderboard already uses (style.css, Farming/Fishing/Gopher/Apartments); only the accent
   color here is Doodle Den-specific, same pattern as .fishing-leaderboard's own color override. The
   header banner is a plain placeholder box until real artwork exists (doodleDen.js). */
.doodle-den-leaderboard .minigame-leaderboard-table th {
    background: #9b4fe0;
}

.doodle-den-leaderboard #minigame-leaderboard-days-remaining {
    background: #9b4fe0;
}

.doodle-den-leaderboard-header-placeholder {
    display: none;
    position: relative;
    width: 321px;
    max-width: 100%;
    height: 116px;
    margin-top: -74px;
    border-radius: 10px 10px 4px 4px;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #FFF;
    font-weight: 800;
    font-size: 17px;
    line-height: 1.25;
    text-shadow: 0 1px 1px #0000005c;
    background: linear-gradient(135deg, #9b4fe0, #5e2ea8);
}

.doodle-den-leaderboard-prize-placeholder {
    font-size: 40px;
}

@media (max-width: 400px) or (max-height: 655px) {
    .doodle-den-leaderboard-header-placeholder {
        max-width: 255px;
        width: 100%;
        height: 86px;
        margin: -56px auto 0;
        font-size: 14px;
    }
}