.abyss-shell { padding-top: 34px; }
.abyss-heading { margin-bottom: 30px; }
.abyss-heading h1 { margin: 12px 0; font-size: clamp(43px, 8vw, 86px); line-height: 1; letter-spacing: -.055em; }
.abyss-heading h1 em { color: #88e4ce; font-style: normal; }
.abyss-heading p { color: #b2c8c7; }
#abyss-game { --fullscreen-ratio: .625; background: #0a1e28; }
#abyss-game #start { background: linear-gradient(#d8edbf, #b1d69d); color: #19332b; }
#abyss-game [data-game-music] { color: #b0e7ce; }
.abyss-stage canvas:focus-visible { outline: 2px solid #badbc2; }
.abyss-time strong { color: #c2ffdf; }
.abyss-hud #equipment { font-size: clamp(10px, 2.4vw, 17px) !important; color: #f4d6a4; }
.abyss-stage { position: relative; background: radial-gradient(ellipse, #123b44, #07131c 70%); }
.abyss-stage canvas { touch-action: none; outline-offset: -3px; }
.abyss-feedback { position: absolute; left: 50%; top: 5%; transform: translateX(-50%); max-width: 94%; margin: 0; padding: 5px 10px; border: 1px solid #7aaf9b55; border-radius: 5px; color: #f1e0b5; background: #0a1b24e8; font-size: clamp(10px, 2vw, 13px); text-align: center; pointer-events: none; }
.abyss-feedback:empty { display: none; }
#abyss-game .abyss-controls { justify-content: space-between !important; padding-inline: 2px !important; gap: 8px !important; }
.abyss-directions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 0; max-width: 520px; gap: 8px; margin-right: auto; }
#abyss-game .abyss-directions button { width: 100% !important; min-width: 0 !important; }
#abyss-game .abyss-controls button { min-width: 76px !important; width: clamp(76px, 20vw, 124px); border-radius: 12px; border: 1px solid #62857f; background: linear-gradient(#25444d, #172c36); color: #d4efe2; font: 800 24px system-ui; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.abyss-water-gap { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); min-width: 46px; padding: 6px; border: 1px solid #72a59c70; border-radius: 7px; background: #0a202ae6; color: #bdece2; pointer-events: none; text-align: center; }
.abyss-water-gap span { display: block; font: 700 8px system-ui; letter-spacing: .08em; }
.abyss-water-gap strong { display: block; margin-top: 2px; font: 700 13px ui-monospace, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.abyss-water-gap[data-urgency="close"] { color: #ffcb8c; border-color: #cf9963; }
.abyss-water-gap[data-urgency="danger"] { color: #ffae98; border-color: #e09a82; }
#abyss-game .abyss-controls #jump { flex: 0 0 clamp(88px, 26vw, 160px); width: clamp(88px, 26vw, 160px); font-size: 14px !important; color: #ffe6b7; border-color: #aa9169; background: linear-gradient(#5e4c32, #342f29); }
#abyss-game .abyss-controls button.pressed { background: #5b7d72; box-shadow: inset 0 0 0 2px #d6ffdf; }
#abyss-game .abyss-controls button:focus-visible { outline: 3px solid #f6ffe8; outline-offset: -5px; }
#game-status { flex: 0 0 auto; order: 3; font-size: 12px; margin: 0; color: #f3dbb5; }
#game-status:empty { display: none; }
.abyss-result { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); width: min(88%, 290px); border: 1px solid #86afa16b; border-radius: 12px; background: linear-gradient(#0b202bed, #102c36e8); padding: 14px; text-align: center; box-shadow: 0 12px 40px #00131d99; pointer-events: none; }
.abyss-result[hidden] { display: none; }
.abyss-result span { font-size: 8px; color: #92c0bd; letter-spacing: .13em; }
.abyss-result h2 { font: bold 32px Georgia, serif; margin: 7px 0; color: #f7e7c5; }
.abyss-result > strong { font: 700 24px system-ui; color: #bff0db; }
.abyss-result p { color: #c8d9c8; margin: 5px 0 0; font-size: 11px; }
.abyss-rankings { padding-block: 38px 20px; }
.abyss-rankings h2 { font-size: clamp(27px, 4vw, 40px); margin: 12px 0; }
.abyss-rankings ol { padding: 0; list-style: none; max-width: 800px; }
.abyss-rankings li { display: flex; align-items: center; gap: 12px; padding: 14px 10px; border-bottom: 1px solid #34504e; }
.abyss-rankings li > span { min-width: 0; overflow-wrap: anywhere; }
.abyss-ranking-version { flex: 0 0 auto; padding: 3px 6px; border: 1px solid #62857f; border-radius: 999px; color: #b8d9ce; font: 700 10px system-ui; white-space: nowrap; }
.abyss-rankings li > strong { margin-left: auto; white-space: nowrap; color: #bcecd7; }
.abyss-footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 30px; color: #a3bcba; }
@media (max-height: 540px) and (orientation: landscape) { .abyss-result { top: 6%; padding: 5px 12px; } .abyss-result h2 { display: inline; font-size: 20px; margin-right: 12px; } .abyss-result span, .abyss-result p { display: none; } .abyss-result > strong { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { #abyss-game * { transition: none !important; animation: none !important; } }