body{margin:0;font-family:'Press Start 2P',monospace !important;color:white !important;background-color:#000;-webkit-tap-highlight-color:transparent}
#game-container{position:relative;width:100vw;height:100vh;overflow:hidden;background-color:#333;touch-action:none}
#vignette-overlay{content:'';position:absolute;top:0;left:0;width:100%;height:100%;box-shadow:inset 0 0 150px rgba(0,0,0,0.7);pointer-events:none;z-index:5}
.hidden{display:none !important}
canvas{position:absolute;top:0;left:0;image-rendering:pixelated}
#gameCanvas{z-index:1}
#playerCanvas{z-index:2;pointer-events:none}
#effectsCanvas{z-index:3;pointer-events:none}
#title-text{font-size:0.6em;color:#fff;text-shadow:2px 2px 0 #000,4px 4px 0 #4a4a4a;margin-bottom:80px;max-width:95%;word-break:break-word;text-align:center;line-height:1.1;animation:title-entrance 1s ease-out}
@keyframes title-entrance{from{transform:scale(0.5);opacity:0}to{transform:scale(1);opacity:1}}
#title-text .subtitle{font-size:clamp(18px,9vw,60px);text-shadow:3px 3px 0 #000,6px 6px 0 #4a4a4a;animation:title-glow 2.5s ease-in-out infinite;white-space:nowrap}
@keyframes title-glow{0%,100%{text-shadow:3px 3px 0 #000,6px 6px 0 #4a4a4a,0 0 10px #ffdd77,0 0 20px #ffab77,0 0 30px #ff77b8}50%{text-shadow:3px 3px 0 #000,6px 6px 0 #4a4a4a,0 0 20px #ffdd77,0 0 40px #ffab77,0 0 60px #ff77b8}}
.ui{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:10;text-align:center;backdrop-filter:blur(4px)}
.modal-content{background-color:#2c3e50;border:4px solid #ecf0f1;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,0.5);max-width:90%;width:500px;padding:20px 30px;box-sizing:border-box}
.modal-content.full-screen{width:95%;height:95%;max-width:1200px}
#close-settings-button,#how-to-play-modal .button{margin-top:0}
.close-icon-button{display:none}
@keyframes background-pan{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
#start-menu{justify-content:flex-start;padding:2vh 0;padding-bottom:calc(10px + env(safe-area-inset-bottom));background:linear-gradient(270deg,#0f0c29,#302b63,#24243e,#000000);background-size:400% 400%;animation:background-pan 25s ease infinite;gap:10px;overflow:hidden;height:100vh;box-sizing:border-box}
.title-main-content{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;z-index:12;width:100%;flex-shrink:0}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.button{font-family:inherit;font-size:clamp(12px,2.2vw,18px);padding:12px 24px;margin:10px;border-radius:8px;cursor:pointer;background:linear-gradient(to bottom,#4a4a4a,#2c2c2c);border:2px solid #fff;color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;position:relative;transition:all 0.2s ease-out;overflow:hidden;box-shadow:0 4px 6px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.2)}
.button::before{content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0) 100%);transform:skewX(-25deg)}
.button:hover::before{animation:shimmer 1.5s infinite}
.button:hover{transform:translateY(-2px);box-shadow:0 8px 12px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.3)}
.button:active{transform:translateY(2px);box-shadow:0 2px 4px rgba(0,0,0,0.4),inset 0 2px 4px rgba(0,0,0,0.5);animation:none;border-color:#aaa}
.button.secondary{background:linear-gradient(to bottom,#8e9eab,#5d6d7e)}
.button.danger{background:linear-gradient(to bottom,#ff4757,#c0392b)}
.button.warning{background:linear-gradient(to bottom,#ffd900,#ff9100)}
#settings-modal .button.warning,#settings-modal .button.danger{padding:10px 15px;line-height:1.2;font-size:clamp(11px,2vw,16px)}
.button.icon-button{padding:8px 10px;font-size:clamp(30px,3.5vw,38px);line-height:1}
.button-link{background:none;border:none;color:#FFFFFF;text-decoration:underline;cursor:pointer;font-size:14px;margin-top:15px;padding:5px;font-family:inherit}
.button-link:hover{color:#ffffff}
.button-container{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px}
.modal-footer{display:flex;justify-content:center;gap:10px;margin-top:20px;border-top:1px solid #7f8c8d;padding-top:15px}
#debug-menu .modal-footer{display:none}
#how-to-play-modal .scrollable-content{max-height:60vh;overflow-y:auto;padding:0 15px;margin:15px -15px;border-top:1px solid #7f8c8d;border-bottom:1px solid #7f8c8d;text-align:left}
.tip-card{background:rgba(0,0,0,0.2);border-radius:8px;padding:15px;margin-bottom:15px}
.tip-card h4{margin:0 0 10px 0;color:#FFFFFF;font-size:clamp(14px,2.5vw,20px);text-shadow:2px 2px 0 #000;border-bottom:1px solid #7f8c8d;padding-bottom:5px}
.tip-card p{margin:0;line-height:1.6;font-size:clamp(12px,2vw,16px);white-space:pre-line}
.htp-item{display:flex;align-items:center;margin-bottom:10px}
.htp-item-img{width:50px;height:50px;margin-right:15px;flex-shrink:0;background-size:contain;background-position:center;background-repeat:no-repeat;text-align:center;line-height:50px;font-size:30px}
.htp-item-text{font-size:clamp(12px,2vw,15px)}
#game-over-tip{margin-top:20px;border-top:1px solid #7f8c8d;padding-top:15px}
#game-over-tip h4{font-size:1em;color:#FFFFFF;margin:0 0 5px 0}
#game-over-tip p{font-size:0.8em;margin:0}
.start-menu-buttons{display:flex;flex-direction:column;align-items:center;margin-bottom:15px;z-index:12}
.button.primary-action{font-size:clamp(20px,4vw,32px);padding:20px 40px;margin-bottom:20px;animation:pulse 2s infinite;background:linear-gradient(to bottom,#2ecc71,#27ae60);border:3px solid #fff;border-top-color:#c1f7d6;border-left-color:#c1f7d6;text-shadow:0 0 5px #fff,0 0 10px #2ecc71,2px 2px 2px #000}
@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(46,204,113,0.7),0 4px 6px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.2)}70%{transform:scale(1.05);box-shadow:0 0 10px 20px rgba(46,204,113,0),0 8px 12px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.3)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(46,204,113,0),0 4px 6px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.2)}}
.secondary-actions{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}
.secondary-actions .button.secondary{font-size:clamp(12px,2vw,16px);padding:10px 20px;margin:0}
#player-name-display-container{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;border-radius:8px;width:100%;box-sizing:border-box;position:relative;background-color:rgba(0,0,0,0.4);border-bottom:2px solid rgba(255,255,255,0.2);margin-bottom:10px}
.player-name-wrapper{display:flex;flex-direction:column;align-items:flex-start;flex-grow:1;overflow:hidden}
#player-name-display{font-size:clamp(16px,3vw,20px);flex-grow:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.player-name-hint{font-size:10px;color:#bdc3c7;margin-top:4px}
#player-name-input{font-family:inherit;font-size:clamp(16px,3vw,20px);color:white;background-color:rgba(0,0,0,0.2);border:2px solid #ecf0f1;border-radius:5px;outline:none;width:100%;box-sizing:border-box;padding:5px 8px;flex-grow:1}
.player-name-buttons{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;margin-left:10px}
#random-name-button{background:none;box-shadow:none;border:none;padding:8px;vertical-align:middle;margin:0}
#random-name-button:hover,#random-name-button:active{animation:none;box-shadow:none;background:transparent;transform:none}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
#warning-message{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);z-index:20;color:#FFFFFF;font-size:3em;animation:frantic-warning 0.5s infinite;white-space:nowrap}
#countdown-warning{position:absolute;top:55%;left:50%;transform:translate(-50%,-50%);z-index:20;color:#FFFFFF;font-size:clamp(60px,15vw,180px);animation:frantic-warning 0.5s infinite}
@keyframes frantic-warning{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1;text-shadow:0 0 10px #fff,0 0 20px #ff0000}50%{transform:translate(-50%,-50%) scale(1.05);opacity:0.7;text-shadow:0 0 20px #fff,0 0 40px #ff0000}}
#game-ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:8;pointer-events:none}
#game-ui-overlay *{pointer-events:auto}
#game-top-bar{position:absolute;top:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:10px;gap:15px;background-color:rgba(0,0,0,0.4);z-index:9;box-sizing:border-box}
.ingame-buttons-left,.ingame-buttons-right{display:flex;gap:10px;flex-shrink:0}
.ingame-buttons-left button,.ingame-buttons-right button{background:none;border:none;font-size:clamp(20px,4vw,28px);padding:0;width:40px;height:40px;color:#fff;cursor:pointer}
.score-time-container{position:absolute;bottom:10px;right:15px;display:flex;gap:20px;background-color:rgba(0,0,0,0.5);padding:5px 10px;border-radius:5px;z-index:9}
#game-hud{display:none}
#hp-gauge-container{height:24px;background-color:#333;border:2px solid #222;position:relative;border-radius:4px;overflow:hidden;margin:0;flex-grow:1}
#hp-gauge-preview-bar{position:absolute;top:0;left:0;height:100%;background-color:#f1c40f;transition:width 0.8s ease-out;z-index:1}
#hp-gauge-bar{position:absolute;top:0;left:0;height:100%;background-color:#2ecc71;transition:width 0.2s ease-out;z-index:2}
#hp-gauge-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:14px;text-shadow:1px 1px 2px black;z-index:3}
#controls-hint{display:none}
.touch-overlay-container{display:flex;flex-direction:row;position:absolute;top:0;left:0;width:100%;height:100%;z-index:8;pointer-events:none}
.touch-icon{display:none;position:absolute;z-index:9;pointer-events:auto;justify-content:center;align-items:center;font-size:0;color:rgba(255,255,255,0.7);text-shadow:1px 1px 3px rgba(0,0,0,0.5);width:75px;height:75px;opacity:0.5;transition:opacity 0.2s,filter 0.2s,transform 0.2s}
.touch-device #icon-attack,.touch-device #icon-crouch,.touch-device #icon-jump,.touch-device #icon-jump2,.touch-device #icon-attack3{display:flex}
body:not(.touch-device) .touch-icon.pc-visible,body:not(.touch-device) #attack2-wrapper.pc-visible{display:flex}
#icon-attack2{display:flex;overflow:hidden;border-radius:50%;opacity:0.5}
.cooldown-pie-container{position:absolute;width:100%;height:100%;pointer-events:none}
.cooldown-pie{width:100%;height:100%;background-color:rgba(46,204,113,0.6);border-radius:50%;transform:scale(0);opacity:0;transition:transform 0.1s linear,opacity 0.1s linear}
#attack2-status-text{font-size:14px;color:white;text-shadow:1px 1px 2px black;pointer-events:none;animation:ready-text-glow 1.5s infinite;white-space:nowrap;order:1;margin-bottom:8px}
#icon-attack2.cooldown ~ #attack2-status-text{animation:none}
@keyframes ready-text-glow{0%{text-shadow:0 0 4px #fff,0 0 8px #ffdd77}50%{text-shadow:0 0 8px #fff,0 0 16px #ffdd77}100%{text-shadow:0 0 4px #fff,0 0 8px #ffdd77}}
#icon-attack,#icon-crouch,#icon-jump,#icon-attack2,#icon-attack3,#icon-jump2{background-size:80%;background-repeat:no-repeat;background-position:center}
#icon-attack{background-image:url('https://shinjiman.com/wp-content/uploads/2025/09/image881.png')}
#icon-crouch{background-image:url('https://shinjiman.com/wp-content/uploads/2025/09/squat.png')}
#icon-jump{background-image:url('https://shinjiman.com/wp-content/uploads/2025/09/jump.png')}
#icon-jump2{background-image:url('https://shinjiman.com/wp-content/uploads/2025/09/jump.png')}
#attack2-wrapper{position:absolute;display:flex;flex-direction:column;align-items:center}
#icon-attack2{background-image:url('https://shinjiman.com/wp-content/uploads/2025/09/atack.png');position:relative;transition:opacity 0.3s,filter 0.3s;order:2}
#icon-attack3{background-image:url('https://shinjiman.com/wp-content/uploads/2025/09/image99.png')}
#icon-attack3.toggled{opacity:1.0;filter:drop-shadow(0 0 8px #2ecc71);transform:scale(1.05)}
.touch-icon:active,#icon-attack2:active{opacity:1.0;transform:scale(1.1)}
#icon-attack2.cooldown{opacity:0.3}
@keyframes icon-ready-flash{0%,100%{filter:drop-shadow(0 0 2px #fff)}50%{filter:drop-shadow(0 0 8px #fff) brightness(1.7)}}
#icon-attack2:not(.cooldown){animation:icon-ready-flash 1.0s infinite}
@keyframes ready-bounce{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
#attack2-wrapper.ready-bounce{animation:ready-bounce 0.4s ease-out}
#attack2-enter-hint{font-size:12px;color:#fff;text-shadow:1px 1px 2px #000;order:3;margin-top:8px;display:none}
body:not(.touch-device) #attack2-enter-hint{display:block}
body:not(.touch-device) #attack2-wrapper{left:30px;bottom:30px}
#ranking-display{z-index:11;width:100%;max-width:none;box-sizing:border-box;background-color:rgba(0,0,0,0.3);border:none;border-radius:15px;padding:15px;margin-top:15px;display:flex;flex-direction:column;flex-grow:1;min-height:0}
#show-ranking-button{display:none !important}
.close-ranking-btn{display:none !important}
#ranking-title{margin:0 0 15px 0;font-size:1.5em;color:#f1c40f;text-shadow:0 0 5px #000000,0 0 10px #e67e22,2px 2px 2px rgba(0,0,0,0.5)}
#ranking-list{overflow-y:auto;padding:0;margin:0;list-style:none;text-align:left;background-color:transparent;flex-grow:1}
#ranking-list li{display:flex;justify-content:space-between;align-items:center;padding:4px 5px;border-bottom:1px solid rgba(255,255,255,0.1);font-size:clamp(12px,2.5vw,16px)}
#ranking-list li:last-child{border-bottom:none}
.rank-name{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 10px}
.rank-score{text-align:right}
.floating-text{position:absolute;z-index:100;font-size:1.5em;font-weight:bold;animation:float-up 1s ease-out forwards;pointer-events:none;text-shadow:2px 2px 3px black}
.floating-text.hp{color:#FFFFFF}
.floating-text.hp-damage{color:#ff4757}
.floating-text.pts{color:#FFFFFF}
@keyframes float-up{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-50px) translateX(20px) rotate(15deg);opacity:0}}
.settings-option{width:100%;display:flex;justify-content:space-between;align-items:center;margin:10px 0}
.settings-select{background-color:#2c3e50;color:#fff;font-family:inherit;font-size:clamp(14px,2.5vw,18px);padding:8px 12px;border:2px solid #ecf0f1;border-radius:8px;cursor:pointer}
.toggle-switch{position:relative;display:inline-block;width:60px;height:34px}
.toggle-switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:34px}
.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:white;transition:.4s;border-radius:50%}
input:checked+.slider{background-color:#2196F3}
input:checked+.slider:before{transform:translateX(26px)}
.sound-test-header{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:15px}
.sound-test-header h2{margin:0}
#pitch-controls-container{display:flex;align-items:center;gap:8px}
.pitch-button{background:#4a4a4a;border:1px solid #fff;color:#fff;width:30px;height:30px;border-radius:5px;cursor:pointer;font-family:inherit;font-size:18px}
.pitch-reset{background:#c0392b;border:1px solid #fff;width:28px;height:28px;border-radius:50%;cursor:pointer}
.digital-display{background:#000;color:#ff8c00;padding:5px 10px;border-radius:4px;font-family:'Press Start 2P',monospace;font-size:16px;width:60px;text-align:center;border:1px solid #333;box-shadow:inset 0 0 5px rgba(0,0,0,0.5)}
#sound-buttons-container{display:flex;flex-direction:column;gap:10px;margin:20px 0}
.sound-test-row{display:flex;gap:8px;width:100%}
.sound-test-button{flex:1 1 auto;padding:10px 5px;font-family:inherit;font-size:14px;color:#FFFFFF;background:linear-gradient(145deg,#3a4a5a,#232c35);border:1px solid #1a2027;border-radius:8px;box-shadow:3px 3px 6px #1a2027,-3px -3px 6px #4e6277,inset 0 0 0 0 rgba(78,98,119,0);cursor:pointer;transition:all 0.15s ease-out;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sound-test-button:hover{color:#FFF;background:linear-gradient(145deg,#405163,#26313b)}
.sound-test-button:active{color:#FFF;background:linear-gradient(145deg,#232c35,#3a4a5a);box-shadow:1px 1px 2px #1a2027,-1px -1px 2px #4e6277,inset 3px 3px 6px #1a2027,inset -3px -3px 6px #4e6277;transform:translateY(2px)}
.sound-test-button.random-sound{background:linear-gradient(145deg,#d4ac0d,#b8860b);border-color:#805b00;box-shadow:3px 3px 6px #664800,-3px -3px 6px #ffc816}
.sound-test-button.random-pitch{background:linear-gradient(145deg,#2980b9,#1f618d);border-color:#154360;box-shadow:3px 3px 6px #11354d,-3px -3px 6px #3aa9ff}
.panel-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:15px;border-bottom:2px solid #ecf0f1;margin-bottom:15px}
#shuffle-images-button{padding:8px 12px;font-size:0.8em;margin:0 10px}
.panel-content{height:calc(100% - 140px);overflow-y:auto;padding-bottom:20px}
.design-grid{display:flex;flex-direction:column;gap:20px}
.design-section-container h3{text-align:left;margin-bottom:10px;border-bottom:1px solid #7f8c8d;padding-bottom:5px}
.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:15px}
.items-grid.single-item{grid-template-columns:minmax(120px,180px);justify-content:center}
.items-grid-row{display:flex;gap:20px}
.items-grid-row>.items-grid{flex:1}
.design-option{display:flex;flex-direction:column;align-items:center;gap:8px;background:rgba(0,0,0,0.2);padding:10px;border-radius:8px}
.design-option-title{font-size:14px;margin:0}
.preview-box{width:80px;height:80px;border:2px solid #7f8c8d;display:flex;justify-content:center;align-items:center;background-size:contain;background-repeat:no-repeat;background-position:center;transition:transform 0.2s}
.preview-box.flipped{transform:scaleX(-1)}
.preview-box img{max-width:100%;max-height:100%}
.preview-box .emoji-preview{font-size:50px;line-height:1}
.design-button-container{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.design-button{font-family:inherit;font-size:12px;padding:4px 8px;cursor:pointer;border:1px solid white;background:rgba(255,255,255,0.1);color:white;border-radius:4px}
.color-preview-box{width:80px;height:80px;border:2px solid #7f8c8d;border-radius:4px}
.color-picker-label{position:relative;display:inline-block;cursor:pointer}
.color-input{position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;cursor:pointer}
.color-picker-label .design-button{pointer-events:none}
.style-options-container{display:flex;justify-content:space-around;align-items:center;margin-top:20px;gap:20px}
.style-option-card{display:flex;flex-direction:column;align-items:center;gap:15px}
.style-option-card p{font-size:14px;margin:0}
.preview-box.large-preview{width:120px;height:120px;border:3px solid #ecf0f1;background-color:rgba(0,0,0,0.2);border-radius:10px}
.preview-box.large-preview .emoji-preview{font-size:80px}
#add-to-home-screen-prompt .prompt-note{font-size:0.8em;color:#FFFFFF;margin-top:-10px;margin-bottom:15px}
#share-container-title{width:90%;max-width:450px;z-index:12}
#game-over-screen .share-container,#how-to-play-modal .share-container{border-top:1px solid #7f8c8d;padding-top:15px;margin-top:20px}
.share-title{font-size:clamp(14px,2.5vw,18px);margin-bottom:15px;text-shadow:2px 2px 0 #000}
.sns-icons{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.sns-icon{display:flex;justify-content:center;align-items:center;width:48px;height:48px;border-radius:50%;transition:transform 0.2s ease;text-decoration:none}
.sns-icon:hover{transform:scale(1.1)}
.sns-icon svg,.sns-icon img{width:28px;height:28px;fill:#ffffff}
.sns-icon.share-line img{width:42px;height:42px}
.sns-icon.share-shinjiman{background-color:#fff}
.sns-icon.share-shinjiman img{width:42px;height:42px;border-radius:50%}
.sns-icon.share-twitter{background-color:#1DA1F2}
.sns-icon.share-line{background-color:#00B900}
.sns-icon.share-facebook{background-color:#1877F2}
.sns-icon.share-mail{background-color:#7f8c8d}
.sns-icon.share-tiktok{background-color:#000000;position:relative}
.sns-icon.share-tiktok img{border-radius:6px}
.sns-icon.share-instagram{background-color:#E1306C}
.sns-icon.share-youtube{background-color:#FF0000}
.sns-icon.share-addtohome{background-color:#555;display:none}
#add-to-home-button-settings{display:none}
.debug-slider{margin:15px 0;text-align:left}
.debug-slider label{display:block;margin-bottom:5px}
.debug-slider input[type="range"]{width:100%}
#debug-menu .panel-content{max-height:70vh;overflow-y:auto;text-align:left;padding-right:10px}
#debug-menu h4{margin-top:20px;margin-bottom:0;border-bottom:1px solid #7f8c8d;padding-bottom:5px}
.modal-close-button{position:absolute;bottom:calc(6vh + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:15;width:90%;max-width:400px;padding:15px;box-sizing:border-box;font-family:inherit;font-size:clamp(14px,2.5vw,20px);border-radius:8px;cursor:pointer;background:linear-gradient(to bottom,#4a4a4a,#2c2c2c);border:2px solid #fff;color:#fff;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;transition:all 0.1s ease-out}
.modal-close-button:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 8px 12px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.3)}
.modal-close-button:active{transform:translateX(-50%) translateY(2px);animation:none}
@keyframes rotate-collect{from{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.2)}to{transform:rotate(360deg) scale(1)}}
.helper-collect-animation{animation:rotate-collect 0.5s ease-out}
.settings-panel{width:100%;background:rgba(0,0,0,0.2);border-radius:8px;padding:15px;margin-bottom:20px;box-sizing:border-box}
.settings-panel h4{margin:0 0 15px 0;text-align:left;border-bottom:1px solid #7f8c8d;padding-bottom:10px}
.setting-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;text-align:left}
.setting-row label{flex-basis:30%;font-size:clamp(12px,2vw,14px)}
.setting-row input[type="range"]{flex-grow:1;margin:0 10px}
.setting-row .value-display{flex-basis:40px;text-align:right;font-family:inherit;font-size:16px}
.pc-only-setting{display:flex}
.touch-device .pc-only-setting{display:none}
body:not(.touch-device) .touch-icon.pc-visible,body:not(.touch-device) #attack2-wrapper.pc-visible{display:flex}
#button-settings-modal .panel-content{height:calc(100% - 210px);padding-bottom:80px}
#pause-open-button-settings-button{display:none}
#open-debug-menu-button{display:none}
.touch-device #pause-open-button-settings-button{display:inline-block}
#hp-gauge-text{color:#FFFFFF;text-shadow:1px 1px 2px rgba(0,0,0,0.7)}
#ranking-list li{color:#FFFFFF}
.button,#hp-gauge-text,#game-over-title,h1,h2,h3{text-shadow:1px 1px 2px rgba(0,0,0,0.7)}
#game-over-screen *{color:#FFFFFF !important;text-shadow:none}
.game-over-reason-container{margin:15px 0 0 0;padding:10px 15px;background-color:rgba(0,0,0,0.3);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:50px}
#reason-line1{font-size:16px;font-weight:bold;text-align:center;margin:0 0 5px 0}
.reason-line2-container{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.reason-visual{width:40px;height:40px;flex-shrink:0;background-size:contain;background-position:center;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center;font-size:30px;line-height:1}
#reason-line2{text-align:center;flex-grow:1;min-width:0;font-size:16px;line-height:1.4;margin:0}
#debug-helper-buttons-container{position:absolute;top:60px;left:50%;transform:translateX(-50%);z-index:10;background-color:rgba(0,0,0,0.5);border-radius:10px;padding:5px;display:flex;gap:5px}
#debug-helper-buttons-container.hidden{display:none}
#debug-helper-buttons-container button{font-size:24px;width:40px;height:40px;padding:0;cursor:pointer;background:#444;border:1px solid #888;color:white;border-radius:5px}
#debug-helper-buttons-container button:hover{background:#666}
@keyframes new-record-glow{0%{box-shadow:0 0 10px #ffd700,0 0 20px #ffd700,0 0 30px #ff8c00,0 0 40px #ff8c00}50%{box-shadow:0 0 20px #ff8c00,0 0 30px #ff8c00,0 0 40px #ffd700,0 0 50px #ffd700}100%{box-shadow:0 0 10px #ffd700,0 0 20px #ffd700,0 0 30px #ff8c00,0 0 40px #ff8c00}}
@keyframes title-pop{0%,100%{transform:scale(1);text-shadow:2px 2px 0 #000}50%{transform:scale(1.1);text-shadow:3px 3px 0 #000,0 0 20px #fff}}
#game-over-screen.new-record-celebration .modal-content{border-color:#ffd700;animation:new-record-glow 2s infinite ease-in-out}
#game-over-screen.new-record-celebration #game-over-title{color:#ffeb3b !important;animation:title-pop 1.5s infinite}
#confetti-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:1}
.confetti{position:absolute;width:10px;height:10px;background-color:#f00;opacity:0.9;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(100vh) rotate(720deg);opacity:0}}
#title-screen-characters{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:10}
.title-screen-char{position:absolute;background-size:contain;background-position:center;background-repeat:no-repeat;opacity:0.3;display:flex;justify-content:center;align-items:center}
@keyframes float-across{from{transform:translateX(0)}to{transform:translateX(calc(-100vw - 100px))}}
.game-over-main-content{display:flex;flex-direction:column}
.game-over-left-column,.game-over-right-column{width:100%}
#sound-test-modal .modal-content{width:100%;max-width:none;border-left:none;border-right:none;border-radius:0}
@media (orientation:landscape),(min-width:700px){#start-menu{justify-content:center;padding:1vh 0 2vh;position:relative;flex-direction:row;flex-wrap:wrap;align-items:center;gap:20px;box-sizing:border-box;height:100vh;overflow-y:auto}
#game-over-screen .modal-content{max-height:90vh;max-width:95vw;width:1000px;overflow:hidden;position:relative;padding-bottom:20px}
.game-over-main-content{display:flex;flex-direction:row;gap:20px;height:100%}
.game-over-left-column{flex:1 1 55%;display:flex;flex-direction:column;justify-content:center}
.game-over-right-column{flex:1 1 45%;background:rgba(0,0,0,0.2);padding:15px;border-radius:8px;overflow-y:auto;height:100%;box-sizing:border-box;display:flex;flex-direction:column}
#game-over-tip{margin-top:0;padding-top:0;border-top:none;flex-grow:1}
#game-over-screen .share-container{position:relative;width:100%;margin-top:auto;padding-top:15px;border-top:1px solid #4a4a4a}
#settings-modal .modal-content{max-height:85vh;overflow-y:auto}
.title-main-content{flex:1 1 50%;max-width:500px;justify-content:center}
.title-header{display:flex;align-items:center;justify-content:center;margin-bottom:10px;transform:translateY(-10%) translateX(-10%)}
#title-character-display{width:80px;height:80px;margin:0;flex-shrink:0}
#title-text{margin:0;text-align:center;font-size:2.0em}
#ranking-display{display:block;flex:1 1 35%;flex-grow:0;min-height:auto;max-width:none;height:70vh;max-height:450px;margin-top:0}
#ranking-list{flex-grow:0;max-height:calc(100% - 120px)}
#share-container-title{position:absolute;bottom:env(safe-area-inset-bottom,0);left:0;width:100%;max-width:none;padding:10px 0 10px;box-sizing:border-box;background-color:rgba(0,0,0,0.5);border-top:1px solid #4a4a4a;z-index:13}
@media (orientation:landscape) and (max-height:450px){#start-menu{align-content:flex-start}
#ranking-display{max-height:calc(100vh - 220px)}
#share-container-title{position:relative !important;bottom:auto !important;background-color:transparent !important;border-top:1px solid #4a4a4a !important;padding:10px 0 0 0 !important;margin-top:10px !important;flex-basis:100%}
#game-over-screen .modal-content{padding-bottom:20px}}}
.rank-medal{width:45px;flex-shrink:0;text-align:center;display:inline-flex;align-items:center;justify-content:center}
#ranking-list li:nth-child(-n+3){font-weight:bold}
#ranking-list li:nth-child(1){color:#ffd700}
#ranking-list li:nth-child(1) .rank-medal{font-size:clamp(28px,4.5vw,32px);text-shadow:0 0 5px #f1c40f}
#ranking-list li:nth-child(2){color:#e0e0e0}
#ranking-list li:nth-child(2) .rank-medal{font-size:clamp(25px,4vw,30px)}
#ranking-list li:nth-child(3){color:#e6914a}
#ranking-list li:nth-child(3) .rank-medal{font-size:clamp(22px,3.5vw,28px)}
@keyframes jump-float {0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-15px) rotate(-5deg); } 75% { transform: translateY(15px) rotate(5deg); }}