/* MoonCat Odyssey feature styles — pigment workbench, graffiti editor, stray battles.
   Same moonbase-terminal pixel language as style.css: square corners, hard
   offset shadows, monospace voice, cyan/yellow/magenta/mint accents. */

/* --- Pigment workbench (Glyphs tab) --- */
.pigmentWorkbench { display: grid !important; grid-template-columns: 1fr !important; gap: 8px; padding: 10px; border-width: 2px; border-style: solid; }
.pigmentWorkbench .workbenchRow { display: grid !important; grid-template-columns: 1fr 1fr auto !important; gap: 8px; align-items: end; }
.pigmentWorkbench label { display: grid; gap: 4px; color: #93a5c2; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; }
.pigmentWorkbench select { width: 100%; border: 1px solid rgba(110,243,255,.38); border-radius: 0; color: #fff5c7; background: #050713; padding: 7px 8px; font: inherit; font-size: 11px; outline: none; }
.workbenchReadout { margin: 0; color: #9affb0; font-size: 11px; line-height: 1.4; }
.workbenchHint { margin: 0; color: #93a5c2; font-size: 10px; line-height: 1.5; }

/* --- Graffiti pixel editor --- */
.graffitiEditorModal { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: rgba(3,6,16,.82); }
.graffitiEditorModal[hidden] { display: none; }
.graffitiEditorCard { width: min(720px, calc(100% - 36px)); max-height: calc(100% - 36px); overflow: auto; border: 2px solid rgba(110,243,255,.46); padding: 16px; background: #0b1022; box-shadow: 0 0 0 4px #050713, 6px 6px 0 rgba(5,7,19,.9); }
.graffitiEditorBody { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
#graffitiEditorCanvas { width: 384px; height: 384px; border: 2px solid rgba(154,165,199,.4); background: #070b1c; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; cursor: crosshair; }
.graffitiPaletteColumn { display: grid; gap: 8px; align-content: start; }
.graffitiPaletteList { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.graffitiSwatch { display: flex; align-items: center; gap: 6px; border: 1px solid rgba(154,165,199,.32); border-radius: 0; background: #060a18; color: #dff8ff; padding: 5px 7px; font: inherit; font-size: 10px; text-transform: capitalize; cursor: pointer; }
.graffitiSwatch em { font-style: normal; color: #93a5c2; margin-left: auto; }
.graffitiSwatch[aria-pressed="true"] { border-color: #ffd866; box-shadow: 2px 2px 0 rgba(255,216,102,.32); color: #fff5c7; }
.swatchChip { display: inline-block; width: 12px; height: 12px; border: 1px solid rgba(5,7,19,.8); image-rendering: pixelated; }
.graffitiPaletteColumn button:not(.graffitiSwatch) { border: 1px solid rgba(110,243,255,.42); border-radius: 0; background: #0d1830; color: #bff7ff; padding: 9px 10px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 0 #050713; }
.graffitiPaletteColumn button:not(.graffitiSwatch):active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #050713; }
.graffitiPaletteColumn button:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
#graffitiPublishButton { border-color: rgba(255,216,102,.5) !important; background: #1a1502 !important; color: #fff5c7 !important; }
.graffitiCost--short { color: #ff5f79 !important; }
@media (max-width: 960px) { .graffitiEditorBody { grid-template-columns: 1fr; } #graffitiEditorCanvas { width: 100%; height: auto; aspect-ratio: 1; } }

/* --- Stray battle modal --- */
.strayBattleModal { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(3,6,16,.82); }
.strayBattleModal[hidden] { display: none; }
.strayBattleCard { width: min(560px, calc(100% - 36px)); max-height: calc(100% - 36px); overflow: auto; border: 2px solid rgba(255,107,214,.46); padding: 16px; background: #0b1022; box-shadow: 0 0 0 4px #050713, 6px 6px 0 rgba(5,7,19,.9); display: grid; gap: 12px; }
.battleArena { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.battleCombatant { display: grid; gap: 5px; justify-items: center; text-align: center; }
.battleCombatant canvas { width: 96px; height: 96px; border: 1px solid rgba(154,165,199,.3); background: #070b1c; image-rendering: pixelated; }
.battleCombatant strong { color: #fff5c7; font-size: 11px; }
.battleCombatant span { color: #93a5c2; font-size: 10px; }
.battleVersus { color: #ff6bd6; font-weight: 900; font-size: 18px; text-shadow: 2px 2px 0 #050713; }
.hpBar { width: 100%; height: 12px; border: 1px solid rgba(154,165,199,.4); background: #070b1c; image-rendering: pixelated; }
.hpFill { display: block; height: 100%; width: 100%; transition: width .25s steps(6); }
.hpFill--foe { background: #ff5f79; }
.hpFill--player { background: #9affb0; }
.battleLogList { margin: 0; padding: 8px 10px 8px 26px; border: 1px solid rgba(110,243,255,.22); background: #060a18; font-size: 11px; line-height: 1.5; min-height: 64px; max-height: 110px; overflow: auto; }
.battleMoveGrid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.battleMoveGrid button { border: 1px solid rgba(255,216,102,.45); border-radius: 0; background: #1a1502; color: #fff5c7; padding: 10px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: 0 3px 0 #050713; }
.battleMoveGrid button:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #050713; }
.battleMoveGrid button:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
.bossDenChoices { display: grid; gap: 6px; }
.bossDenChoices[hidden] { display: none; }
.bossChoiceButton { display: flex; align-items: center; gap: 8px; border: 1px solid rgba(110,243,255,.32); border-radius: 0; background: #060a18; color: #dff8ff; padding: 8px 10px; font: inherit; font-size: 11px; cursor: pointer; }
.bossChoiceButton em { font-style: normal; color: #93a5c2; margin-left: auto; }
.bossChoiceButton:hover { border-color: #ffd866; color: #fff5c7; }
.bossChoiceButton--leave { justify-content: center; color: #ff7bd8; border-color: rgba(255,107,214,.4); }

/* --- Passport badge chips --- */
#passportBadgesLabel .swatchChip { margin-right: 3px; }