/* Ayodea display theme: Chakra Petch display face, gold-gradient titles, kanok-cornered gold frames,
   diamond separators and a button shine. Linked last in index.html, so it restyles the screens of
   style.css and lobby.css without editing them. Body copy (descriptions, lore, tips, help) stays Sarabun
   for Thai readability. Original ornaments only: redented (ย่อมุม) corners, kanok flames, jade jewels.
   Reusable classes for any screen: .ay-title, .ay-frame / .ay-frame-sm, .ay-sep, .ay-kanok, .ay-shine. */
@font-face{font-family:'Chakra Petch';src:url('./assets/fonts/ChakraPetch-Medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url('./assets/fonts/ChakraPetch-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Chakra Petch';src:url('./assets/fonts/ChakraPetch-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
 --ay-display:'Chakra Petch',Sarabun,sans-serif;
 --ay-body:Sarabun,sans-serif;
 --ay-gold:#e7c67f;--ay-gold-hi:#fff6d8;--ay-gold-deep:#b98a3e;--ay-ink:#1f1407;--ay-jade:#63d9c1;
 --ay-title-fill:linear-gradient(180deg,#fffbea 12%,#f7dd98 46%,#dcae55 74%,#b98a3e 100%);
 --ay-outline:drop-shadow(1px 0 0 var(--ay-ink)) drop-shadow(-1px 0 0 var(--ay-ink)) drop-shadow(0 1px 0 var(--ay-ink)) drop-shadow(0 -1px 0 var(--ay-ink));
 /* 96×96 nine-slice (32-unit corners): redented double rule, kanok flame, jade jewel, rule curls. */
 --ay-frame-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='32' y2='32'%3E%3Cstop offset='0' stop-color='%23fff6d8'/%3E%3Cstop offset='.5' stop-color='%23e7c67f'/%3E%3Cstop offset='1' stop-color='%23b98a3e'/%3E%3C/linearGradient%3E%3Cg id='c'%3E%3Cpath d='M3 32V15h5V8h7V3h17' fill='none' stroke='url(%23g)' stroke-width='1.7'/%3E%3Cpath d='M7 32V19h5v-7h7V7h13' fill='none' stroke='%23e7c67f' stroke-opacity='.5' stroke-width='.9'/%3E%3Cpath d='M13.5 13.5C9.6 12.6 5.6 9.4 2 2c4.6 3.3 8.6 4.4 12.2 4.3-1.6 1.7-2 4.1-.7 7.2Z' fill='url(%23g)' stroke='%232b1b08' stroke-width='.6'/%3E%3Cpath d='M9 7.2c-1.9-.6-3.6-1.6-5-3.1' fill='none' stroke='%23fff6d8' stroke-opacity='.8' stroke-width='.6'/%3E%3Cpath d='M17 12.5 19.5 15 17 17.5 14.5 15Z' fill='%2363d9c1' stroke='%23fff6d8' stroke-width='.7'/%3E%3Cpath d='M19 3c1.6-2.4 5.6-2.6 6.8-.2-1.2-.9-3-.7-3.4.9' fill='none' stroke='url(%23g)' stroke-width='1.1'/%3E%3Cpath d='M3 19c-2.4 1.6-2.6 5.6-.2 6.8-.9-1.2-.7-3 .9-3.4' fill='none' stroke='url(%23g)' stroke-width='1.1'/%3E%3C/g%3E%3C/defs%3E%3Cpath d='M32 3H64M32 93H64M3 32V64M93 32V64' stroke='%23e7c67f' stroke-width='1.7'/%3E%3Cpath d='M32 7H64M32 89H64M7 32V64M89 32V64' stroke='%23e7c67f' stroke-opacity='.5' stroke-width='.9'/%3E%3Cuse href='%23c'/%3E%3Cuse href='%23c' transform='matrix(-1 0 0 1 96 0)'/%3E%3Cuse href='%23c' transform='matrix(1 0 0 -1 0 96)'/%3E%3Cuse href='%23c' transform='rotate(180 48 48)'/%3E%3C/svg%3E");
 --ay-diamond:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7 .6 13.4 7 7 13.4.6 7Z' fill='%23e7c67f' stroke='%232b1b08' stroke-width='.6'/%3E%3Cpath d='M7 3.8 10.2 7 7 10.2 3.8 7Z' fill='%230a2126'/%3E%3Cpath d='M7 5.4 8.6 7 7 8.6 5.4 7Z' fill='%23fff6d8'/%3E%3C/svg%3E");
 --ay-kanok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='14' viewBox='0 0 64 14'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff6d8'/%3E%3Cstop offset='1' stop-color='%23c8963f'/%3E%3C/linearGradient%3E%3Cpath id='f' d='M26 7C22 3.4 16.5 2.6 10 4.6c4.2.2 7.4 1.2 9.6 2.9-2.4-.2-4.4.5-5.8 2 3.6-1.3 7.6-1.4 12.2-2.5Z'/%3E%3C/defs%3E%3Cuse href='%23f' fill='url(%23g)'/%3E%3Cuse href='%23f' fill='url(%23g)' transform='matrix(-1 0 0 1 64 0)'/%3E%3Cpath d='M32 1.5 37.5 7 32 12.5 26.5 7Z' fill='url(%23g)' stroke='%232b1b08' stroke-width='.6'/%3E%3Cpath d='M32 4.6 34.4 7 32 9.4 29.6 7Z' fill='%2363d9c1'/%3E%3C/svg%3E");
}

/* ---------- Reusable pieces ---------- */
.ay-display{font-family:var(--ay-display)}
.ay-title{font-family:var(--ay-display);font-weight:700;line-height:1.4;color:#f3d38e;background:var(--ay-title-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:var(--ay-outline) drop-shadow(0 4px 10px #000a)}
/* The frame is a border-image drawn partly outside the box (outset) and it paints there: keep that much free room.
   An element keeps its own border width; one without a border gets a transparent 1px border (the only layout
   change), since some engines skip a border-image when border-style is none. */
:where(.ay-frame,.ay-frame-sm){border:1px solid transparent}
.ay-frame{border-image:var(--ay-frame-img) 32 / 24px / 5px stretch}
.ay-frame-sm{border-image:var(--ay-frame-img) 32 / 16px / 3px stretch}
.ay-sep{display:flex;align-items:center;gap:0;height:14px;margin:12px 0;border:0;color:var(--ay-gold);background:var(--ay-diamond) center/14px 14px no-repeat}
.ay-sep::before,.ay-sep::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,currentColor)}
.ay-sep::before{margin-right:12px}.ay-sep::after{margin-left:12px;background:linear-gradient(90deg,currentColor,transparent)}
.ay-kanok{display:block;height:14px;margin:10px auto;background:var(--ay-kanok) center/64px 14px no-repeat,linear-gradient(90deg,transparent,#e7c67f99 30%,transparent 42%,transparent 58%,#e7c67f99 70%,transparent) center/100% 1px no-repeat}

/* ---------- Display face: buttons, tabs, chips, badges, numbers, names, titles ----------
   Sentences and captions stay Sarabun: the toast (#announcement), network and bot status, the next-item tip,
   the crystal labels, the minimap and joystick captions, and the skill names under the HUD buttons. The wider
   face would wrap the toast onto a second row and push those HUD rects (tests/juice-hud-fixtures.json). */
button,select,kbd,.eyebrow,
.brand div>span,.brand small,.match-score b,#clock,
.objective strong,#respawn,
#hero-name,#level,#hp-text,.gold,
.cooldown,.ultimate-label,.attack-button strong,#basic-charge,
#lobby .role-tab,#lobby .hero-choice strong,#lobby .role-chip,#lobby .skill-info header,#lobby .lobby-howto summary,
#lobby .opponent,#lobby .cta-difficulty>span,#lobby #build-preview b,#lobby #build-preview small,#lobby #online-status,
.vs-card small,.vs-card strong,.vs-emblem small,.vs-status,.vs-tip b,
#result-stats,#shop-gold,.item-card,.item-title h3,#shop-inventory small,#shop-stats,
.audio-slider output{font-family:var(--ay-display)}
button,select{font-weight:500}
.primary,#lobby .role-tab[aria-pressed=true],#lobby .skill-info header,.utility,.shop button{font-weight:600}
kbd,.cooldown,.ultimate-label,.attack-button strong,#basic-charge,.match-score b,#hero-name,#respawn,.vs-card strong,#result-stats,#shop-gold,.item-card small,.item-title h3{font-weight:700}
#play-hud .action>span{font-family:var(--ay-body);font-weight:400}
#clock,#level,#hp-text,.gold,.objective strong,#lobby .hero-choice strong,#lobby .opponent strong,.vs-status,.vs-emblem small,#shop-stats{font-weight:600}
#clock,#blue-score,#red-score,#gold,#hp-text,#level,.cooldown,#basic-charge,#respawn,#result-stats,#shop-gold,.item-card small,.audio-slider output{font-variant-numeric:tabular-nums}
.eyebrow{font-weight:600}
#lobby #start{font-family:var(--ay-display);font-weight:700;letter-spacing:.03em}

/* Titles take the gold gradient with a dark outline. */
#lobby .lobby-heading h1,#lobby .hero-title,.vs-head strong,.small-card h2,.shop-header h2,#audio-title,#lobby .lobby-block h2{font-family:var(--ay-display);font-weight:700;letter-spacing:.01em}
#lobby .lobby-heading h1,#lobby .hero-title,.vs-head strong,#result h2,#pause-overlay h2,.shop-header h2,#audio-title{line-height:1.4;padding-top:.04em;color:#f3d38e;background:var(--ay-title-fill);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:var(--ay-outline) drop-shadow(0 4px 10px #000b)}
#lobby .hero-title{line-height:1.3;filter:var(--ay-outline) drop-shadow(0 3px 0 #0a1c1f) drop-shadow(0 6px 14px #000c)}
#lobby .lobby-block h2{color:#f6dc97;text-shadow:0 1px 0 var(--ay-ink),0 2px 6px #000a}
.brand strong{filter:drop-shadow(0 1px 0 var(--ay-ink)) drop-shadow(0 2px 6px #000a)}

/* ---------- Kanok frames on existing panels ---------- */
#lobby .lobby-block,.small-card,#shop-dialog,#audio-dialog{border-image:var(--ay-frame-img) 32 / 24px / 5px stretch}
#lobby .lobby-block::before{top:-8px;width:12px;height:12px;rotate:0deg;background:var(--ay-diamond) center/12px 12px no-repeat;box-shadow:none;filter:drop-shadow(0 0 6px #f0c77b88)}
#result .small-card::before,#pause-overlay .small-card::before{top:-10px;width:16px;height:16px;rotate:0deg;background:var(--ay-diamond) center/16px 16px no-repeat;box-shadow:none;filter:drop-shadow(0 0 8px #f0c77b)}
#lobby .skill-info{border-image:var(--ay-frame-img) 32 / 16px / 3px stretch}
#lobby .skill-info::before{border-color:#e7c67f}
@media (min-width:900px) and (min-height:600px){#lobby .lobby-cta{border-image:var(--ay-frame-img) 32 / 24px / 5px stretch}}
@media (orientation:landscape) and (max-height:599px) and (min-width:560px){
 #lobby .lobby-cta{border-image:var(--ay-frame-img) 32 / 16px / 3px stretch}
 #lobby .lobby-block{border-image-width:16px;border-image-outset:3px}
}
.vs-art{border-image:var(--ay-frame-img) 32 / 26px / 7px stretch}
/* In-match panels stay light: a thin frame with small corners. Its strokes reach under 3px outside the panel rect,
   inside the 3px margin assignSlots keeps between juice banners and the rects measureHud reports. */
#play-hud .player-panel,#play-hud .shop,#play-hud .minimap{border-image:var(--ay-frame-img) 32 / 16px / 3px stretch}

/* Diamond rules */
#lobby .lobby-block h2::after{height:12px;background:var(--ay-diamond) left center/10px 10px no-repeat,linear-gradient(90deg,#e7c67f99,transparent) 14px center/100% 1px no-repeat}
.small-card .eyebrow{display:inline-flex;align-items:center;gap:10px;letter-spacing:3px}
.small-card .eyebrow::before,.small-card .eyebrow::after{content:'';width:34px;height:10px;background:var(--ay-diamond) right center/10px 10px no-repeat,linear-gradient(90deg,transparent,#e7c67fcc) left center/24px 1px no-repeat}
.small-card .eyebrow::after{transform:scaleX(-1)}
/* Rules drawn with shadows and backgrounds, not borders or padding, so these boxes keep their size. */
#result-stats{border-radius:8px;box-shadow:inset 0 0 0 1px #e7c67f33}
.shop-header{background:linear-gradient(90deg,transparent,#e7c67f88 20%,#e7c67f88 80%,transparent) left bottom/100% 1px no-repeat}
/* A gradient title's line (1.4, room for Thai marks) is taller than Chonburi's; its margins give that back so the shop
   header, pause/result cards and audio dialog keep their base height. */
.shop-header h2{margin:1px 0}
#result .small-card h2,#pause-overlay .small-card h2{margin:12px 0}
.audio-heading #audio-title{margin:2px 0 10px}
.vs-head .eyebrow{display:inline-flex;align-items:center;gap:10px}
.vs-head .eyebrow::before,.vs-head .eyebrow::after{content:'';width:10px;height:10px;background:var(--ay-diamond) center/10px 10px no-repeat}

/* Badges */
.ultimate-label{background:linear-gradient(180deg,#fff0c2,#e5c37e 55%,#c99a4b);box-shadow:0 0 0 1px var(--ay-ink),0 2px 6px #0008;letter-spacing:.02em}
#lobby .role-chip{letter-spacing:.3px}
.match-score{border-color:#e7c67f66;box-shadow:inset 0 -1px 0 #e7c67f33,0 6px 16px #0006}
#clock{color:#e9e2c4}
/* Chakra Petch digits run wider than Sarabun's: tighter gaps keep the score box at its base width between the brand
   and the utility buttons (they nearly touch at 360px, where the wider button labels take the last pixel). */
.match-score{gap:23px}
@media(max-width:650px){.match-score{gap:8px}}

/* ---------- Button shine: one gold sweep on hover or keyboard focus ----------
   Opt-in: .ay-shine on any control, plus these menu and dialog controls (none has an ::after of its own). In-match HUD
   buttons (#play-hud) and #start (it has its own sweep) are left alone. The ::after exists only while the control is
   hovered or focused and motion is allowed, so at rest and under reduced motion nothing is added. Every selector is
   wrapped in :where() (zero specificity), so a control's own position or ::after rules always win. */
:where(:where(.primary,.secondary,.utility,#lobby .role-tab,#shop-categories button,.item-card,#shop-inventory button):not(#start,#play-hud *),.ay-shine){position:relative}
@media (prefers-reduced-motion:no-preference){:where(:where(.primary,.secondary,.utility,#lobby .role-tab,#shop-categories button,.item-card,#shop-inventory button):not(#start,#play-hud *),.ay-shine):where(:focus-visible:not(:disabled))::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 42%,#fff8e2a6 50%,transparent 58%) 100% 0/260% 100% no-repeat;animation:ay-shine .7s cubic-bezier(.3,.6,.3,1) both}}
@media (prefers-reduced-motion:no-preference) and (hover:hover){:where(:where(.primary,.secondary,.utility,#lobby .role-tab,#shop-categories button,.item-card,#shop-inventory button):not(#start,#play-hud *),.ay-shine):where(:hover:not(:disabled))::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 42%,#fff8e2a6 50%,transparent 58%) 100% 0/260% 100% no-repeat;animation:ay-shine .7s cubic-bezier(.3,.6,.3,1) both}}
@keyframes ay-shine{from{background-position:100% 0}to{background-position:0 0}}