/* Aspirational Games R2 / modular website buttons + navigation
   All labels stay accessible live HTML (JP-first, EN supported).
   UI is meant to be integrated into existing R1 CSS, not replace layouts. */
:root {
  --ag-cream: #F9FAF6; --ag-ink:#17344E; --ag-cobalt:#226AC4;
  --ag-deep:#134E75; --ag-mint:#BFF1E3; --ag-coral:#FC8F83;
  --ag-peach:#FFD3B6; --ag-sun:#FFDB83; --ag-white:#FFFFFF;
  --ag-ring:#FFDB83; --ag-ui-font: system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
}
.ag-button,.ag-chip,.ag-icon-button,.ag-lang,.ag-link {
  -webkit-tap-highlight-color: transparent;
  font-family: var(--ag-ui-font);
  touch-action: manipulation;
}
.ag-button {
  box-sizing: border-box; position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap: 18px; min-height:59px; padding: 8px 9px 8px 23px; border-radius:999px;
  border:2px solid transparent; font-size:15px; font-weight:780; letter-spacing:.025em;
  line-height:1.2; text-decoration:none; isolation:isolate; cursor:pointer; white-space:nowrap;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}
.ag-button:focus-visible,.ag-chip:focus-visible,.ag-icon-button:focus-visible,.ag-lang:focus-visible,.ag-link:focus-visible {
  outline:3px solid var(--ag-ring); outline-offset:4px;
}
.ag-button:hover:not(:disabled){transform:translateY(-3px)}
.ag-button:active:not(:disabled){transform:translateY(0) scale(.985)}
.ag-button:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.ag-button__icon{
  display:grid;place-items:center;flex:0 0 39px; width:39px;height:39px;
  border-radius:50%; background:rgba(255,255,255,.95); color:var(--ag-cobalt);
  box-shadow:0 2px 7px rgba(8,40,82,.14);
}
.ag-button__icon>img{display:block;width:19px;height:19px}
.ag-button--primary{
  background:linear-gradient(132deg,#399BFF 0%,#2778D9 36%,#225DAE 100%);
  box-shadow:0 7px 0 #104486, 0 14px 25px rgba(14,74,134,.23), inset 0 1px 0 rgba(255,255,255,.38);
  border-color:#75BCFF; color:white; overflow:hidden;
}
.ag-button--primary:before{content:"";position:absolute;z-index:-1;inset:-10px 47% -10px -20px;
  background:linear-gradient(122deg,transparent 0%,rgba(255,255,255,.14) 42%,transparent 75%);transform:skewX(-21deg)}
.ag-button--primary:after{content:"";position:absolute;bottom:0;left:20px;width:42px;height:5px;
  background:repeating-linear-gradient(115deg,var(--ag-sun) 0 8px,transparent 8px 13px);opacity:.95;border-radius:3px 3px 0 0}
.ag-button--primary:hover:not(:disabled){box-shadow:0 10px 0 #104486,0 20px 29px rgba(14,74,134,.22),inset 0 1px 0 rgba(255,255,255,.38)}
.ag-button--secondary{background:#fff;border-color:#3D8DDE;color:#17519B;
  box-shadow:0 6px 0 #D1E5FA,0 12px 22px rgba(25,83,143,.08)}
.ag-button--secondary .ag-button__icon{background:#EAF6FF;box-shadow:none}
.ag-button--coral{background:linear-gradient(120deg,#FFB4A8,#FC8F83);border-color:#FFE7DF;color:#17344E;box-shadow:0 6px 0 #C96D67,0 12px 20px #C96D672A}
.ag-button--mint{background:linear-gradient(120deg,#D3FFF0,#BFF1E3);border-color:#8EDED4;color:#17344E;box-shadow:0 6px 0 #86C9C2,0 12px 20px #86C9C228}
.ag-button--coral .ag-button__icon,.ag-button--mint .ag-button__icon{background:#fff;color:#17344E}
.ag-link{display:inline-flex;align-items:center;gap:9px;font-weight:750;color:#17519B;text-decoration:none;min-height:44px;position:relative}
.ag-link:after{content:"";position:absolute;bottom:3px;left:0;right:0;height:3px;border-radius:3px;background:#BFF1E3;transform:scaleX(.24);transform-origin:left;transition:transform .18s ease}
.ag-link:hover:after,.ag-link:focus-visible:after{transform:scaleX(1)}
.ag-link img{width:19px;height:19px}
.ag-icon-button{border:1.5px solid #C6DEEF; background:#fff;display:grid;place-items:center;border-radius:16px;color:#1A5FAE;width:48px;height:48px;cursor:pointer;box-shadow:0 4px 0 #C8DEEA,0 8px 13px rgba(21,77,126,.08);transition:transform .18s,background .18s}
.ag-icon-button img{width:23px;height:23px}.ag-icon-button:hover{transform:translateY(-2px);background:#ECF9FF}
.ag-icon-button--primary{color:white;border-color:#74B9FF;background:linear-gradient(145deg,#358BEB,#1A5BB2);box-shadow:0 4px 0 #0B4689,0 8px 18px #0B468940}
.ag-icon-button--primary img{filter:brightness(0) invert(1)}
.ag-chip{padding:9px 16px;border-radius:999px;border:1.5px solid #BFD7E7;background:#fff;color:#26506D;min-height:42px;cursor:pointer;font-weight:690;font-size:13px;transition:background .18s,color .18s,transform .18s}
.ag-chip:hover{transform:translateY(-1px);border-color:#519CE1}
.ag-chip[aria-pressed="true"]{background:var(--ag-cobalt);color:#fff;border-color:var(--ag-cobalt);box-shadow:0 5px 10px rgba(34,106,196,.2)}
.ag-badge{display:inline-flex;align-items:center;justify-content:center;gap:6px;max-width:100%;padding:7px 12px;border-radius:7px 13px 7px 3px;font-weight:800;font-size:12px;line-height:1;letter-spacing:.03em;color:var(--ag-ink);background:var(--ag-sun);box-shadow:3px 3px 0 rgba(23,52,78,.1);transform:skewX(-6deg)}
.ag-badge--coral{background:var(--ag-coral);color:#fff}.ag-badge--blue{background:var(--ag-cobalt);color:#fff}.ag-badge--mint{background:var(--ag-mint);color:var(--ag-ink)}
.ag-dev-status{display:inline-flex;align-items:center;gap:9px;border:1.5px solid #A8CBDC;background:#ffffffeb;border-radius:999px;padding:9px 13px;color:var(--ag-deep);font-weight:680;font-size:12px}
.ag-dev-status__dot{width:8px;height:8px;border-radius:50%;background:#55B8A8;box-shadow:0 0 0 4px #BFF1E370;animation:ag-pulse 2.5s ease-in-out infinite}
.ag-lang{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1.5px solid #C9DFED;border-radius:999px;background:#fff;box-shadow:0 3px 10px rgba(23,52,78,.07)}
.ag-lang img{width:20px;height:20px;margin-left:6px;margin-right:4px}
.ag-lang button{font:700 12px var(--ag-ui-font);border:0;background:transparent;border-radius:999px;padding:9px 11px;color:#48657A;cursor:pointer}
.ag-lang button[aria-pressed="true"]{background:#226AC4;color:#fff}
.ag-float-badge{display:inline-flex;align-items:center;gap:9px;border-radius:16px;background:#fff;padding:8px 16px 8px 8px;box-shadow:0 12px 25px rgba(23,52,78,.13);font-weight:720;color:var(--ag-ink);font-size:13px}
.ag-float-badge__icon{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#E9FBF5}
.ag-float-badge__icon img{width:25px;height:25px}
.ag-nav-link{font:720 13px var(--ag-ui-font);color:#244C67;text-decoration:none;padding:12px 4px;position:relative}
.ag-nav-link:after{content:"";position:absolute;bottom:6px;left:4px;right:4px;height:3px;transform:scaleX(0);background:var(--ag-coral);border-radius:5px;transition:transform .2s}
.ag-nav-link:hover:after,.ag-nav-link:focus-visible:after{transform:scaleX(1)}
@keyframes ag-pulse {50%{box-shadow:0 0 0 8px #BFF1E322}}
@media(max-width:480px){.ag-button{max-width:100%;font-size:14px;min-height:55px;gap:10px;padding-left:17px}.ag-chip{min-height:44px}}
@media(prefers-reduced-motion:reduce){.ag-button,.ag-chip,.ag-link:after,.ag-icon-button,.ag-nav-link:after{transition:none!important}.ag-dev-status__dot{animation:none!important}}