:root {
color-scheme:dark;
--ink:#f5f2ea;
--muted:#a8a7b0;
--line:rgba(255,255,255,.14);
--panel:rgba(8,10,17,.84);
--cyan:#6bf5e8;
--coral:#ff715f;
--yellow:#ffd166;
--bg:#090b12;

font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}

* {
box-sizing:border-box
}

html {
scroll-behavior:smooth
}

body {
margin:0;
min-height:100vh;
background:var(--bg);
color:var(--ink);
overflow-x:hidden
}

button,a {
font:inherit
}

button {
color:inherit
}

.ambient {
position:fixed;
inset:-30%;
z-index:-2;
background:radial-gradient(circle at 18% 32%,rgba(107,245,232,.12),transparent 26%),radial-gradient(circle at 82% 20%,rgba(255,113,95,.14),transparent 28%);
filter:blur(30px)
}

.game-header {
height:94px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 clamp(24px,5vw,78px);
border-bottom:1px solid var(--line)
}

.brand {
display:flex;
align-items:center;
gap:12px;
color:var(--ink);
text-decoration:none
}

.brand-mark {
display:grid;
place-items:center;
width:40px;
height:40px;
border:1px solid var(--cyan);
border-radius:50%;
font-family:Georgia,serif;
font-style:italic;
color:var(--cyan)
}

.brand strong,.brand small {
display:block
}

.brand strong {
font-size:.78rem;
letter-spacing:.24em
}

.brand small {
margin-top:3px;
color:var(--muted);
font-size:.66rem;
letter-spacing:.1em;
text-transform:uppercase
}

.portfolio-link {
color:var(--ink);
text-decoration:none;
font-size:.82rem;
border-bottom:1px solid var(--line);
padding:8px 0
}

.portfolio-link:hover {
border-color:var(--cyan)
}

main {
min-height:calc(100vh - 160px)
}

.intro {
min-height:calc(100vh - 158px);
display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-start;
padding:8vh clamp(24px,10vw,160px);
position:relative
}

.intro::after {
content:"01";
position:absolute;
right:8vw;
bottom:6vh;
font:italic clamp(10rem,29vw,27rem)/.7 Georgia,serif;
color:transparent;
-webkit-text-stroke:1px rgba(255,255,255,.08);
z-index:-1
}

.eyebrow {
margin:0 0 18px;
color:var(--cyan);
font-size:.72rem;
font-weight:700;
letter-spacing:.28em;
text-transform:uppercase
}

.intro h1 {
margin:0;
max-width:1000px;
font-size:clamp(3.7rem,8.5vw,9rem);
line-height:.86;
letter-spacing:-.065em
}

.intro h1 em {
font-family:Georgia,serif;
font-weight:400;
color:var(--cyan)
}

.intro-copy {
max-width:540px;
margin:36px 0 30px;
color:var(--muted);
font-size:clamp(1rem,1.4vw,1.22rem);
line-height:1.7
}

.start-button {
border:0;
border-radius:999px;
background:var(--ink);
color:var(--bg);
padding:17px 24px;
font-weight:750;
cursor:pointer;
transition:transform .2s,background .2s
}

.start-button:hover {
transform:translateY(-2px);
background:var(--cyan)
}

.arena {
padding:42px clamp(18px,4vw,64px) 60px
}

.arena-topline {
display:flex;
align-items:end;
justify-content:space-between;
margin-bottom:22px
}

.arena-topline h2 {
margin:0;
font-size:clamp(1.1rem,2vw,1.55rem)
}

.arena-topline .eyebrow {
margin-bottom:8px
}

.sound-toggle {
border:1px solid var(--line);
border-radius:999px;
background:transparent;
padding:9px 14px;
font-size:.72rem;
cursor:pointer
}

.battlefield {
position:relative;
min-height:400px;
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:end;
gap:30px;
padding:40px clamp(20px,5vw,70px) 28px;
overflow:hidden;
border:1px solid var(--line);
border-radius:28px;
background:linear-gradient(180deg,rgba(4,6,12,.18),rgba(4,6,12,.91)),url('/shotgun/assets/neon-city-pexels.jpg') center/cover
}

.battlefield::before {
content:"";
position:absolute;
inset:0;
background:linear-gradient(90deg,rgba(107,245,232,.12),transparent 38%,transparent 62%,rgba(255,113,95,.12));
pointer-events:none
}

.fighter {
position:relative;
z-index:1
}

.fighter-cpu {
text-align:right
}

.fighter-label {
display:flex;
justify-content:space-between;
align-items:end;
border-bottom:1px solid var(--line);
padding-bottom:10px
}

.fighter-label span {
font-weight:850;
font-size:1.35rem;
text-transform:uppercase
}

.fighter-label strong {
color:var(--muted);
font-size:.7rem;
text-transform:uppercase;
letter-spacing:.15em
}

.fighter-figure {
position:relative;
width:min(34vw,260px);
height:210px;
margin:18px auto 0;
filter:drop-shadow(0 24px 18px rgba(0,0,0,.5));
transition:transform .24s
}

.fighter-head {
position:absolute;
left:calc(50% - 33px);
top:9px;
width:66px;
height:72px;
border-radius:44% 44% 38% 38%;
background:linear-gradient(145deg,#202735,#0c1018);
border:1px solid rgba(255,255,255,.25)
}

.fighter-head::after {
content:"";
position:absolute;
inset:28px 8px auto;
height:5px;
background:var(--cyan);
box-shadow:0 0 16px var(--cyan)
}

.fighter-cpu .fighter-head::after {
background:var(--coral);
box-shadow:0 0 16px var(--coral)
}

.fighter-body {
position:absolute;
left:calc(50% - 70px);
top:70px;
width:140px;
height:140px;
clip-path:polygon(25% 0,75% 0,100% 100%,0 100%);
background:linear-gradient(145deg,#283142,#0b0e15)
}

.fighter-arm {
position:absolute;
left:50%;
top:108px;
width:100px;
height:18px;
transform:rotate(-12deg);
transform-origin:left;
background:#161d29;
border-radius:4px
}

.fighter-cpu .fighter-arm {
left:auto;
right:50%;
transform:rotate(12deg);
transform-origin:right
}

.ammo {
display:flex;
align-items:center;
gap:12px;
margin-top:5px
}

.fighter-cpu .ammo {
justify-content:flex-end
}

.ammo>span {
color:var(--muted);
font-size:.65rem;
text-transform:uppercase;
letter-spacing:.16em
}

.ammo-rounds {
display:flex;
gap:5px
}

.ammo-rounds i {
display:block;
width:8px;
height:22px;
border:1px solid rgba(255,255,255,.5);
border-radius:4px;
background:var(--yellow);
box-shadow:0 0 12px rgba(255,209,102,.35)
}

.ammo-rounds i.empty {
background:transparent;
box-shadow:none;
opacity:.28
}

.versus {
align-self:center;
text-align:center
}

.versus span {
display:block;
color:var(--muted);
font-size:.6rem;
letter-spacing:.2em;
text-transform:uppercase
}

.versus strong {
font:italic 4.5rem/1 Georgia,serif
}

.photo-credit {
position:absolute;
right:18px;
bottom:10px;
margin:0;
color:rgba(255,255,255,.62);
font-size:.6rem
}

.photo-credit a {
color:inherit
}

.game-console {
margin-top:18px;
padding:24px;
border:1px solid var(--line);
border-radius:24px;
background:var(--panel);
backdrop-filter:blur(18px)
}

.round-message {
display:flex;
justify-content:space-between;
gap:20px;
margin-bottom:20px
}

.round-message span {
color:var(--cyan);
font-size:.7rem;
text-transform:uppercase;
letter-spacing:.17em
}

.round-message strong {
text-align:right
}

.actions {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px
}

.actions button {
min-height:86px;
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:12px;
padding:15px;
border:1px solid var(--line);
border-radius:15px;
background:rgba(255,255,255,.035);
text-align:left;
cursor:pointer;
transition:border-color .2s,transform .2s,background .2s
}

.actions button:hover:not(:disabled),.actions button:focus-visible {
border-color:var(--cyan);
background:rgba(107,245,232,.08);
transform:translateY(-2px)
}

.actions button:disabled {
opacity:.32;
cursor:not-allowed
}

.actions strong,.actions small {
display:block
}

.actions small {
margin-top:4px;
color:var(--muted);
font-size:.7rem
}

.action-icon {
display:grid;
place-items:center;
width:34px;
height:34px;
border:1px solid var(--line);
border-radius:50%;
color:var(--cyan)
}

kbd {
color:var(--muted);
font-size:.62rem;
border:1px solid var(--line);
border-radius:5px;
padding:3px 5px
}

.rules {
display:flex;
gap:18px;
flex-wrap:wrap;
margin-top:18px;
color:var(--muted);
font-size:.66rem
}

.rules span::before {
content:"·";
color:var(--coral);
margin-right:7px
}

.fighter.is-acting .fighter-figure {
transform:translateX(10px) scale(1.025)
}

.fighter-cpu.is-acting .fighter-figure {
transform:translateX(-10px) scale(1.025)
}

.result {
max-width:560px;
border:1px solid var(--line);
border-radius:24px;
background:#10131d;
color:var(--ink);
padding:40px;
box-shadow:0 30px 100px #000
}

.result::backdrop {
background:rgba(3,4,8,.78);
backdrop-filter:blur(8px)
}

.result h2 {
margin:0;
font:italic clamp(3rem,8vw,5.4rem)/.9 Georgia,serif
}

.result>p:not(.eyebrow) {
color:var(--muted);
line-height:1.7
}

.result div {
display:flex;
gap:18px;
align-items:center;
margin-top:28px
}

.result button {
border:0;
border-radius:999px;
background:var(--cyan);
color:#07100f;
padding:13px 18px;
font-weight:800;
cursor:pointer
}

.result a {
color:var(--ink)
}

footer {
min-height:66px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:0 clamp(24px,5vw,78px);
border-top:1px solid var(--line);
color:var(--muted);
font-size:.65rem;
text-transform:uppercase;
letter-spacing:.1em
}


@media(max-width:850px) {
.battlefield {
min-height:350px;
padding-inline:18px;
gap:8px
}

.fighter-figure {
height:170px
}

.fighter-body {
top:62px;
height:108px;
width:110px;
left:calc(50% - 55px)
}

.fighter-head {
width:54px;
height:60px;
left:calc(50% - 27px)
}

.fighter-arm {
top:98px;
width:70px
}

.actions {
grid-template-columns:repeat(2,1fr)
}

.versus strong {
font-size:3rem
}

}


@media(max-width:560px) {
.game-header {
height:76px;
padding-inline:18px
}

.portfolio-link {
font-size:.7rem
}

.intro {
padding-inline:22px
}

.intro h1 {
font-size:clamp(3.2rem,17vw,5rem)
}

.arena {
padding:26px 10px 42px
}

.arena-topline {
padding-inline:8px
}

.battlefield {
min-height:330px;
border-radius:20px
}

.fighter-label {
display:block
}

.fighter-label span {
font-size:1rem
}

.fighter-label strong {
display:block;
margin-top:3px;
font-size:.56rem
}

.fighter-figure {
width:130px
}

.versus {
position:absolute;
top:18px;
left:50%;
transform:translateX(-50%)
}

.versus strong {
font-size:2.2rem
}

.ammo {
display:block
}

.fighter-cpu .ammo {
display:block
}

.ammo-rounds {
margin-top:5px
}

.fighter-cpu .ammo-rounds {
justify-content:flex-end
}

.game-console {
padding:17px;
border-radius:20px
}

.round-message {
display:block
}

.round-message strong {
display:block;
margin-top:7px;
text-align:left;
font-size:.9rem
}

.actions button {
grid-template-columns:auto 1fr;
min-height:76px;
padding:12px
}

.actions kbd {
display:none
}

.action-icon {
width:30px;
height:30px
}

.rules {
display:none
}

.result {
width:calc(100% - 24px);
padding:30px 24px
}

footer {
padding:18px;
display:block;
line-height:1.7
}

footer span {
display:block
}

}


@media(prefers-reduced-motion:reduce) {
* {
scroll-behavior:auto!important;
transition:none!important
}

}