:root{--color-main-bg:#1a1a2e;--color-white:#fff;--color-dark-gray-blue:#5a5aff;--color-dark-navy:#2a2a52;--color-light-gray:#ccc;--color-touch-btn-main:#3a3a5c;--color-touch-btn-active:#55a;--color-touch-btn-rotate:#4a4a7a;--color-touch-btn-down:#3a5a5a;--color-touch-btn-drop:#7a3a3a;--color-accent-blue:#00e5ff;--color-accent-pink:#ff2ee0}body{background-color:var(--color-main-bg);width:100vw;max-width:100%;color:var(--color-white);box-sizing:border-box;justify-content:center;margin:0;padding:24px;font-family:system-ui,-apple-system,Segoe UI,sans-serif;display:flex;overflow-x:hidden}#app{box-sizing:border-box;text-align:center;max-width:600px;margin:0 auto}#app.match-width{max-width:800px}h1{width:100%;max-width:420px;margin:0 auto 12px;font-size:22px}p{color:var(--color-light-gray);margin:4px 0;font-size:15px}.hidden{display:none!important}.start-screen{flex-direction:column;align-items:center;gap:16px;margin-top:40px;display:flex}.start-screen label{color:var(--color-light-gray);flex-direction:column;gap:6px;font-size:14px;display:flex}#player-name-input{border:1px solid var(--color-dark-gray-blue);color:var(--color-white);background:var(--color-dark-navy);border-radius:6px;padding:8px 12px;font-size:15px}#start-button{cursor:pointer;background:0 0;border:none;padding:0;transition:transform .15s}#start-button:hover .button-image{transition:transform .15s;transform:scale(1.05)}.versus-section{border-top:1px solid #5a5aff4d;flex-direction:column;align-items:center;gap:10px;margin-top:24px;padding-top:16px;display:flex}.join-room-row{gap:6px;display:flex}.versus-mode-buttons{gap:10px;display:flex}.room-controls{flex-direction:column;align-items:center;gap:10px;margin-top:10px;display:flex}#room-code-input{border:1px solid var(--color-dark-gray-blue);background:var(--color-dark-navy);width:110px;color:var(--color-white);text-align:center;border-radius:6px;padding:8px 10px;font-size:15px}#create-room-button,#join-room-button,#random-match-button,#room-mode-button,#cancel-wait-button{background-color:var(--color-touch-btn-rotate);color:var(--color-white);cursor:pointer;border:none;border-radius:8px;padding:8px 20px;font-size:14px}.game-area{touch-action:none;justify-content:center;align-items:stretch;gap:8px;margin-top:12px;display:flex}.side-panel{flex-direction:column;flex:1;order:2;justify-content:space-between;gap:12px;min-width:0;display:flex}.next-box{background:var(--color-dark-navy);text-align:center;border-radius:8px;padding:12px}.hold-box canvas,.next-box canvas{max-width:100%;height:auto}.canvas-wrapper{flex-shrink:0;order:1;position:relative}#game-canvas{aspect-ratio:300/600;border:2px solid var(--color-dark-gray-blue);border-radius:4px;width:100%;max-width:300px;height:auto;display:block}.play-score{flex-direction:row;justify-content:center;align-items:center;gap:20px;display:flex}.play-score p{margin:0}#score{color:var(--color-accent-blue);font-weight:700}.next-box{background:var(--color-dark-navy);text-align:center;border:1px solid #5a5aff4d;border-radius:8px;flex-direction:column;align-items:center;gap:5px;height:fit-content;padding:5px;display:flex}.next-box p{color:#aaa;margin:0;font-size:13px}#next-canvas{border:2px solid var(--color-dark-gray-blue);border-radius:4px;display:block}#game-over-overlay{aspect-ratio:300/600;border:2px solid var(--color-dark-gray-blue);background:#000000bf;border-radius:4px;justify-content:center;align-items:center;width:auto;height:calc(100% - 4px);margin:auto;display:flex;position:absolute;inset:0}#game-over-overlay.hidden{display:none}.game-over-box{text-align:center;max-height:95%;padding:0 8px;overflow-y:auto}.game-over-box h2{color:var(--color-accent-pink);text-shadow:0 0 12px var(--color-accent-pink);margin:0 0 20px;font-size:24px}.game-over-box p{color:var(--color-white);margin:0 0 8px}.game-over-button-wrap{flex-direction:row;gap:10px;display:flex}.game-over-button{cursor:pointer;background:0 0;border:none;padding:0}.game-over-button:hover .button-image{opacity:.8;transition:opacity .15s}.high-scores{background:var(--color-dark-navy);text-align:left;border-radius:8px;margin-bottom:20px;padding:6px 12px}.my-score{box-shadow:0 0 10px var(--color-accent-pink)}.all-high-score{box-shadow:0 0 10px var(--color-accent-blue)}p.high-scores-title{color:#aaa;text-align:center;text-transform:uppercase;letter-spacing:.05em;margin:0 0 6px;font-size:12px}.high-scores ol{color:var(--color-white);counter-reset:rank;margin:0;padding-left:0;font-size:14px;list-style:none}.high-scores li{counter-increment:rank;margin-bottom:2px}.high-scores li:before{content:counter(rank) "位";margin-right:10px}.high-scores :nth-child(n+4):before{display:none}.touch-controls{border-radius:8px;grid-template-columns:repeat(2,46px);justify-content:center;gap:8px;padding:12px 0 0;display:grid;position:absolute;bottom:0;right:-110px}.touch-row{justify-content:center;gap:8px;display:flex}.touch-controls button{width:48px;height:48px;color:var(--color-white);background-color:var(--color-touch-btn-main);cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;border-radius:10px;font-size:20px;transition:background-color .15s,transform .1s}.touch-controls button:active,.touch-controls button.pressed{background-color:var(--color-touch-btn-active);transform:scale(.92)}#btn-rotate{background-color:var(--color-touch-btn-rotate)}#btn-down{background-color:var(--color-touch-btn-down)}.hold-box{background-color:var(--color-dark-navy);text-align:center;border:1px solid #5a5aff4d;border-radius:8px;flex-direction:column;align-items:center;gap:8px;margin-bottom:10px;padding:10px;display:flex}.hold-box p{margin:0}.hold-box canvas{border:1px solid var(--color-dark-gray-blue);border-radius:4px}.title-image{width:auto;max-width:90%;height:auto;max-height:12vh}.button-image{width:140px;max-width:100%;height:auto;display:block}.game-over-button-wrap .button-image{width:100px}.game-over-image{width:200px;max-width:100%;height:auto}.touch-controls .button-image{width:48px;max-width:100%;height:auto;display:block}.key-guide{background:var(--color-dark-navy);text-align:left;border:1px solid #5a5aff4d;border-radius:8px;align-self:flex-start;padding:10px}.key-guide-title{color:#aaa;text-align:center;text-transform:uppercase;letter-spacing:.05em;margin:0 0 6px;font-size:12px}.key-guide-row{color:var(--color-white);align-items:center;gap:8px;margin-bottom:4px;font-size:13px;display:flex}.key-badge{background:var(--color-touch-btn-main);text-align:center;min-width:44px;color:var(--color-accent-blue);border-radius:4px;padding:2px 8px;font-size:12px;font-weight:700;display:inline-block}.waiting-screen{flex-direction:column;align-items:center;gap:16px;margin-top:60px;display:flex}.loading-spinner{border:4px solid #5a5aff4d;border-top-color:var(--color-accent-blue);border-radius:50%;width:32px;height:32px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#app.match-width .game-area{align-items:flex-start}#app.match-width .opponent-wrapper{flex:0 0 30%;max-width:160px}#app.match-width .canvas-wrapper{flex:none}#app.match-width #opponent-canvas{width:100%;height:auto}#app.match-width #game-canvas{width:100%;max-width:none}.opponent-wrapper{background:var(--color-dark-navy);border:1px solid #ff2ee04d;border-radius:8px;flex-direction:column;order:0;align-items:center;gap:6px;padding:8px;display:flex}.opponent-label{color:var(--color-accent-pink);margin:0;font-size:12px}#opponent-canvas{border:2px solid var(--color-accent-pink);border-radius:4px;display:block}#opponent-score{color:var(--color-accent-pink);font-weight:700}.versus-result{width:160px;max-width:60%;height:auto;margin:18px auto;display:block}.rank-divider{border-bottom:1px solid #ddd;margin:4px 0;list-style:none}.my-rank{color:var(--color-accent-blue);margin-top:4px;font-weight:700;list-style:none}@media screen and (width<=834px){.key-guide{display:none}}@media (width<=599px){body{box-sizing:border-box;flex-direction:column;justify-content:flex-start;height:100dvh;margin:0;padding:8px;overflow:hidden}#app{flex-direction:column;width:100%;max-width:100%;height:100%;display:flex}h1{margin:0 auto 4px}.title-image{width:auto;max-height:4vh}.play-score{justify-content:space-around;gap:10px;width:100%;margin-bottom:6px;display:flex}.play-score p{font-size:12px}.game-area{flex-direction:column;flex:1;justify-content:flex-start;align-items:center;gap:6px;height:calc(100% - 24vh);margin-top:0;position:relative}.side-panel{flex-direction:column;flex:none;order:1;gap:0;width:100%;min-width:0;height:auto}.hold-next-box{flex-direction:row;justify-content:center;align-items:center;gap:16px;width:100%;height:50px;display:flex}.hold-box,.next-box{box-sizing:border-box;flex-direction:row;align-items:center;gap:6px;height:42px;margin:0;padding:4px 8px}.hold-box p,.next-box p{margin:0;font-size:11px}.hold-box canvas,.next-box canvas{width:auto;max-width:none;height:30px}.canvas-wrapper{order:2;justify-content:center;align-items:center;width:auto;height:calc(72vh - 48px);display:flex}#game-canvas{width:auto;max-width:100%;height:100%}#app.match-width .game-area{grid-template:"panel panel""opponent board"1fr/3fr 7fr;gap:6px;height:calc(100% - 24vh);display:grid}#app.match-width .side-panel{grid-area:panel}#app.match-width .opponent-wrapper{flex-direction:column;grid-area:opponent;justify-content:flex-start;height:auto}#app.match-width .canvas-wrapper{grid-area:board;width:100%;height:100%}#app.match-width #opponent-canvas{width:100%;height:auto;max-height:100%}#app.match-width #game-canvas{width:auto;max-width:100%;height:100%}.opponent-wrapper{flex-direction:row;order:3;justify-content:center;align-items:center;gap:8px;height:8vh;margin-top:2px;display:flex}.opponent-meta{text-align:left}.opponent-label{margin:0;font-size:11px}.opponent-meta p{font-size:12px}#opponent-canvas{border-radius:4px;width:auto;height:100%}.touch-controls{inset:0 0 0 -50px;box-sizing:border-box;order:4;grid-template-rows:repeat(4,46px);grid-template-columns:46px 46px;place-content:end space-between;gap:6px;width:auto;height:auto;padding:0;inset:0}.touch-controls button{border-radius:8px;justify-content:center;align-items:center;width:46px;height:46px;padding:0;display:flex}.touch-controls .button-image{object-fit:contain;width:28px;height:28px}#btn-rotate-ccw{grid-area:1/1}#btn-left{grid-area:2/1}#btn-down{grid-area:3/1}#btn-hold{grid-area:4/1}#btn-rotate{grid-area:1/2}#btn-right{grid-area:2/2}#btn-drop{grid-area:3/2}#game-over-overlay{height:100%}.game-over-box{width:90%}.game-over-box h2 img{width:auto;max-height:35px}.high-scores{margin-bottom:10px;padding:4px 8px}.high-scores ol{font-size:11px}.game-over-button-wrap .button-image{width:120px}}