:root{--cell-size: 60px;--grid-gap: 5px;--border-radius: 8px;--max-width: 1460px;--spacing-small: 8px;--spacing: 16px;--spacing-large: 24px;--primary-color: #9b59b6;--secondary-color: #8e44ad;--cell-color: #9b59b6;--error-color: #e74c3c;--success: #27ae60;--accent: #f39c12;--background-color: #f0f0f0;--card-background: rgba(245, 238, 250, .8);--container-background: rgba(255, 255, 255, .95);--board-background: rgba(255, 255, 255, .12);--empty-cell-background: rgba(190, 180, 210, .22);--overlay-background: rgba(0, 0, 0, .8);--text-color: #000;--text-light: #000;--border-color: #ddd;--shadow-light: 0 2px 4px rgba(0, 0, 0, .1);--shadow-medium: 0 4px 8px rgba(0, 0, 0, .15);--font-family: Cambria, Georgia, "Times New Roman", serif;--font-size-small: .9em;--font-size-base: 1em;--font-size-large: 1.2em;--animation-speed: .3s;--animation-timing: ease-in-out;--duration-fast: .2s;--duration-normal: .3s;--duration-slow: .5s;--text-muted: #000;--z-index-base: 10;--z-index-dropdown: 100;--z-index-sticky: 200;--z-index-overlay: 400;--z-index-modal: 500;--z-index-notification: 800;--z-index-tooltip: 900;--z-index-priority: 1000;--bp-mobile: 768px;--bp-tablet: 1024px}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{transform:scale(1);text-shadow:0 0 5px currentColor}50%{transform:scale(1.1);text-shadow:0 0 15px currentColor}}@keyframes dropAnimation{0%{transform:translate3d(0,-100%,0);opacity:.5}50%{transform:translate3d(0,-10%,0);opacity:.8}to{transform:translateZ(0);opacity:1}}@keyframes scorePopup{0%{opacity:0;transform:translate(-50%) scale(.8)}30%{opacity:1;transform:translate(-50%,-30px) scale(1.1)}70%{opacity:1;transform:translate(-50%,-40px) scale(1)}to{opacity:0;transform:translate(-50%,-60px) scale(.9)}}@keyframes comboEffect{0%{opacity:0;transform:scale(.8) translateY(20px)}15%{opacity:1;transform:scale(1.2) translateY(0)}25%{transform:scale(1) translateY(0)}80%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.9) translateY(-20px)}}@keyframes comboBreak{0%{opacity:0;transform:scale(.8) translateY(-20px)}20%{opacity:1;transform:scale(1.1) translateY(0)}30%{transform:scale(1) translateY(0)}70%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.9) translateY(-10px)}}@keyframes pulseUp{0%{transform:scale(1)}50%{transform:scale(1.15);box-shadow:0 0 10px #27ae6066}to{transform:scale(1)}}@keyframes pulseDown{0%{transform:scale(1)}50%{transform:scale(.9);opacity:.8}to{transform:scale(1);opacity:1}}@keyframes levelChange{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.9)}}.animate-fade-in{animation:fadeIn var(--duration-normal) ease}.animate-slide-in{animation:slideIn var(--duration-normal) ease}.animate-spin{animation:spin 1s linear infinite}.animate-pulse{animation:pulse 1.5s ease-in-out infinite}@keyframes portraitBreathe{0%,to{transform:scale(1.004,.996)}50%{transform:scale(.996,1.004)}}@media (prefers-reduced-motion: reduce){.game-stats .character-portrait{animation:none}}*{margin:0;padding:0;box-sizing:border-box}button,input,select,textarea{font-family:var(--font-family)}body{background-color:var(--background-color);font-family:var(--font-family);font-size:var(--font-size-base);color:var(--text-color);min-height:100vh;display:flex;justify-content:center;align-items:center;background-size:cover;background-position:center;background-attachment:fixed;padding:var(--spacing-small);line-height:1.5}#game-container{display:grid;grid-template-areas:"header board info" "stats board info";grid-template-columns:220px 1fr 220px;grid-template-rows:auto 1fr;gap:var(--spacing);max-width:var(--max-width);width:95%;min-width:900px;padding:var(--spacing-large);background:transparent;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:none;opacity:0;transform:translateY(20px);transition:all var(--animation-speed) ease}#game-container.loaded{opacity:1;transform:translateY(0)}header{grid-area:header;text-align:center;margin-bottom:var(--spacing)}h1{color:var(--primary-color);font-size:2.5em;font-weight:700;margin-bottom:var(--spacing);text-shadow:0 2px 4px rgba(0,0,0,.1)}.key-guide{font-size:var(--font-size-base);color:var(--text-color);line-height:1.6}.key{display:inline-block;padding:4px 8px;margin:0 2px;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:4px;font-family:var(--font-family);font-weight:700;box-shadow:var(--shadow-light);font-size:.9em}.shortcut-hint{font-size:var(--font-size-small);opacity:.8;margin-top:var(--spacing-small);display:block}.game-area{display:contents}.game-stats{grid-area:stats;display:flex;flex-direction:column;gap:var(--spacing)}.board-panel{grid-area:board;justify-self:center;align-self:start;width:fit-content}.game-info{grid-area:info;display:flex;flex-direction:column;gap:var(--spacing)}.character-portrait{display:block;width:min(130%,22.4vw,41.2vh);width:min(130%,22.4vw,41.2dvh);max-width:none;height:auto;object-fit:contain;flex-shrink:0;align-self:center;margin-top:auto;transform-origin:center bottom;animation:portraitBreathe 4s ease-in-out infinite}@media (min-width: 1400px){#game-container{grid-template-columns:280px 1fr 280px;max-width:1660px}}@media (min-width: 1200px) and (max-width: 1399px){#game-container{grid-template-columns:250px 1fr 250px;max-width:1560px}}@media (min-width: 1000px) and (max-width: 1199px){#game-container{grid-template-columns:220px 1fr 220px;max-width:1360px;width:98%}}@media (max-width: 999px){#game-container{grid-template-areas:"header ." "board board" "stats info";grid-template-columns:1fr 1fr;gap:var(--spacing-small);min-width:auto;width:95%}.stats-grid{grid-template-columns:minmax(0,1fr)}}@media (max-width: 768px){#game-container{grid-template-areas:"header" "board" "stats" "info";grid-template-columns:1fr;width:95%;padding:var(--spacing)}.stats-grid{grid-template-columns:minmax(0,1fr)}}@media (max-width: 480px){#game-container{width:98%;padding:var(--spacing-small)}.stats-grid{grid-template-columns:1fr}}@media (max-height: 600px) and (orientation: landscape){#game-container{grid-template-areas:"header board info" "stats board info";grid-template-columns:180px 1fr 180px;max-height:90vh;overflow:hidden;width:98%}.history-card{max-height:120px}}.info-card{background:var(--card-background);border-radius:0;padding:var(--spacing);box-shadow:var(--shadow-light);border:1px solid rgba(255,255,255,.5);transition:all var(--duration-normal) ease}.info-card:hover{box-shadow:var(--shadow-medium);transform:translateY(-2px)}.stats-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--spacing-small)}.stat-card{background:var(--card-background);border-radius:0;padding:var(--spacing);text-align:center;border:1px solid rgba(255,255,255,.5);transition:all var(--duration-normal) ease;cursor:default}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-medium);background:var(--card-background)}.game-info .stat-card{background:transparent;border-color:transparent;box-shadow:none}.game-info .stat-card .stat-label{color:#fff}.setting-control{font:inherit;min-height:44px;touch-action:manipulation}.setting-control:not(:disabled){cursor:pointer}.setting-control:disabled{cursor:default}.setting-control:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.game-stats .stat-card{width:90%;--corner-cut: 20px;--stat-accent: #8050a8;position:relative;isolation:isolate;background:linear-gradient(135deg,#fff6ff40,#a997cd40);border-color:transparent;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:filter .22s ease,transform .22s ease;min-height:60px;align-content:center;padding:6px var(--spacing);line-height:1.2;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);column-gap:8px;align-items:baseline;text-align:left;clip-path:polygon(var(--corner-cut) 0,100% 0,100% calc(100% - var(--corner-cut)),calc(100% - var(--corner-cut)) 100%,0 100%,0 var(--corner-cut))}.game-stats .stat-card:before{content:"";position:absolute;top:1px;right:1px;bottom:1px;left:1px;clip-path:polygon(19px 0,100% 0,100% calc(100% - 19px),calc(100% - 19px) 100%,0 100%,0 19px);background:linear-gradient(135deg,#f2dfefd1,#c6c4e8cc);pointer-events:none}.game-stats .stat-card>*{position:relative}.game-stats .stat-card:hover{transform:translateY(-1px)}.game-stats .stat-card[data-stat=combo]{--stat-accent: #b65064}.game-stats .stat-card[data-stat=accuracy]{--stat-accent: #247f71}.game-stats .stat-card[data-stat=cps]{--stat-accent: #5c62a8}.game-stats .stat-card .stat-value{color:var(--stat-accent)}.game-stats .stat-value{font-variant-numeric:tabular-nums}.score-value-group{display:inline-flex;align-items:baseline;gap:2px;white-space:nowrap}.stat-value{display:inline;font-size:calc(var(--font-size-large) * 2);font-weight:700;margin-bottom:0;color:var(--primary-color)}.stat-label{font-size:calc(var(--font-size-small) * 2);color:var(--text-light);text-transform:none;letter-spacing:.05em}.stat-card[data-stat=score] .stat-value{color:var(--primary-color)}.stat-card[data-stat=combo] .stat-value{color:var(--error-color)}.stat-card[data-stat=accuracy] .stat-value{color:var(--success)}.stat-card[data-stat=timer] .stat-value{color:var(--accent)}.stat-card[data-stat=cps] .stat-value{color:var(--secondary-color)}.info-card h3{margin:0 0 var(--spacing) 0;color:var(--text-color);font-size:var(--font-size-base);font-weight:600;border-bottom:2px solid var(--primary-color);padding-bottom:var(--spacing-small)}.rating-card{background:var(--card-background)}.history-card{flex:0 0 400px;height:400px;max-height:400px;overflow:hidden;display:flex;flex-direction:column}.history-stats{flex:1;overflow-y:auto}.controls-card{background:transparent;border:none;box-shadow:none;padding:0}.game-stats .stat-label{color:#30243f;font-weight:700;font-size:calc(1.1em + 3px);padding-left:1em}.game-stats .stat-value{font-size:calc(1.1em + 4px)}.key-guide{margin:var(--spacing) 0;font-size:var(--font-size-large);color:var(--text-color)}.shortcut-hint{display:block;margin-top:var(--spacing-small);font-size:var(--font-size-small);color:var(--text-color);opacity:.8}.key{display:inline-block;padding:4px 8px;margin:0 2px;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:4px;font-family:var(--font-family);font-weight:700;box-shadow:var(--shadow-light)}.btn-base{border:none;border-radius:var(--border-radius);cursor:pointer;transition:all var(--duration-fast) ease;font-family:var(--font-family);font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px}#restart-button{border:none;border-radius:var(--border-radius);cursor:pointer;transition:all var(--duration-fast) ease;font-family:var(--font-family);font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:var(--spacing);width:100%;padding:var(--spacing) var(--spacing-large);font-size:var(--font-size-large);background:var(--primary-color);color:#fff;box-shadow:var(--shadow-medium);z-index:calc(var(--z-index-overlay) + 1)}#restart-button:hover:not(:disabled){background:var(--secondary-color);transform:translateY(-2px);box-shadow:0 6px 12px #0003}#restart-button:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-light)}#restart-button:disabled{opacity:.6;cursor:not-allowed}.key-hint{opacity:.9;font-size:.9em;font-weight:400;margin-left:6px;background-color:#ffffff14;padding:1px 4px;border-radius:2px;border:1px solid rgba(255,255,255,.15);transition:all var(--duration-fast) ease}#restart-button:hover .key-hint{background-color:#ffffff1f;border-color:#fff3}.rating-button-container{display:flex;justify-content:space-between;margin-top:20px;gap:15px}.modal-button{border:none;border-radius:var(--border-radius);cursor:pointer;transition:all var(--duration-fast) ease;font-family:var(--font-family);font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1;height:42px;padding:0 20px;font-size:15px}.export-button:hover{background:var(--secondary-color);transform:translateY(-1px)}.close-button{background:#f0f0f0;color:var(--text-color)}.close-button:hover{background:#e0e0e0;transform:translateY(-1px)}#rating-details-button{background:none;border:none;color:var(--primary-color);font-size:.95em;font-weight:700;cursor:pointer;padding:0 0 0 5px;margin-left:5px;opacity:.8;transition:opacity var(--duration-fast),transform var(--duration-fast);line-height:1;vertical-align:middle}#rating-details-button:hover{opacity:1;transform:scale(1.1)}@media (max-width: 480px){.rating-button-container{flex-direction:column}.modal-button{width:100%}}#game-board{--board-rows: 7;--board-content-height: calc(var(--cell-size) * 9 + 320px + var(--grid-gap) * 8);display:grid;grid-template-columns:repeat(6,calc(var(--cell-size) * 2));gap:var(--grid-gap);margin:0 auto;padding:var(--spacing);background:var(--board-background);-webkit-backdrop-filter:blur(12px) saturate(.8);backdrop-filter:blur(12px) saturate(.8);border-radius:0;width:fit-content;box-shadow:inset 0 0 0 1px #eddeffa6,inset 0 2px #fff2ff66,inset 0 0 20px #bb8beb1a,0 0 0 1px #b98ae673,0 0 16px #bc82f447,0 0 42px #9762d329,0 12px 28px #110a1e38;justify-self:center}.column-keys{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--grid-gap);padding:0 var(--spacing);margin-top:8px}.column-key{justify-self:center;width:100%;height:44px;border:1px solid var(--primary-color);border-radius:0;background:var(--container-background);color:var(--primary-color);font-size:20px;font-weight:700;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform .15s cubic-bezier(.22,1,.36,1),background-color .14s ease-out,color .14s ease-out,border-color .14s ease-out,box-shadow .18s ease-out}.column-key:active,.column-key.is-pressed{transition-duration:65ms,80ms,80ms,80ms,90ms;background:var(--primary-color);color:#fff;border-color:#e8c7ff;box-shadow:inset 0 1px 5px #33124938,0 0 12px #c589f28c;transform:translateY(2px)}.column-key:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.row{display:contents}.cell{width:calc(var(--cell-size) * 2);height:calc((var(--board-content-height) - (var(--board-rows) - 1) * var(--grid-gap)) / var(--board-rows));background:var(--empty-cell-background);box-shadow:inset 0 0 0 1px #dacbf217;border-radius:0;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;transition:all var(--animation-speed) var(--animation-timing);transform-origin:top center;will-change:transform}.cell.dropping{animation:dropAnimation .3s ease-out;animation-fill-mode:both;transform:translateZ(0);will-change:transform,opacity}.cell.filled{background-color:var(--cell-color, var(--primary-color));background-image:linear-gradient(180deg,#f5c8ffa6,#dda6f547 28%,#6229851f 65%,#3e165e52);box-shadow:inset 0 1px #ffe8ffa6,inset 0 0 12px #e7b8ff2e,inset 0 -2px 4px #36114e2e,0 0 9px #bf71ec38;transform:translate3d(0,-2px,0);will-change:transform}.cell:hover{transform:translate3d(0,-1px,0) scale(1.02)}.cell:active{opacity:.7;transform:translate3d(0,1px,0) scale(.98)}#player-rating{display:flex;align-items:center;justify-content:space-between;font-weight:700;background:linear-gradient(45deg,#9b59b61a,#9b59b61a);font-size:var(--font-size-base);padding:var(--spacing-small);border-radius:0}#rating-level{font-size:var(--font-size-large);font-weight:700;text-shadow:0 0 2px rgba(0,0,0,.2);transition:color var(--duration-slow) ease,text-shadow var(--duration-slow) ease;padding:var(--spacing-small);border-radius:0;display:inline-block;position:relative;cursor:help;background:#ffffff4d;border:1px solid rgba(255,255,255,.4)}.game-stats .stat-card.updated{transform:translateY(-1px);filter:brightness(1.06)}.multiplier{display:inline-block;font-size:var(--font-size-small);margin:0;padding:0;border:none;background:transparent;transition:all var(--duration-normal) var(--animation-timing);text-align:center;font-weight:500}.multiplier.normal{color:var(--text-light)}.multiplier.good{color:var(--success);font-weight:700}.multiplier.excellent{color:var(--error-color);font-weight:700;text-shadow:0 0 2px var(--error-color)}.multiplier.pulse-up{animation:pulseUp var(--duration-normal) ease-out}.multiplier.pulse-down{animation:pulseDown var(--duration-normal) ease-out}#player-rating button{background:none;border:none;color:var(--primary-color);font-size:.9em;cursor:pointer;padding:2px 6px;border-radius:3px;transition:all var(--duration-fast) ease}#player-rating button:hover{background:#9b59b61a;transform:scale(1.1)}.score-feedback-container{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:calc(var(--z-index-overlay) + 5)}.score-popup{position:absolute;font-weight:700;font-size:1.2em;text-shadow:0 0 4px rgba(0,0,0,.8);opacity:0;pointer-events:none;white-space:nowrap;z-index:calc(var(--z-index-overlay) + 10);transform:translate(-50%)}.score-popup.positive{color:var(--success)}.score-popup.negative{color:var(--error-color)}.score-popup.animate{animation:scorePopup 1s ease forwards}#combo-milestone-container,.combo-milestone-container{position:fixed;top:15%;left:50%;transform:translate(-50%);z-index:calc(var(--z-index-overlay) + 8);pointer-events:none}.combo-milestone{background:linear-gradient(45deg,var(--combo-color, var(--primary-color)),var(--combo-secondary, var(--secondary-color)));color:#fff;padding:var(--spacing) var(--spacing-large);border-radius:0;font-size:var(--font-size-large);font-weight:700;text-align:center;box-shadow:var(--shadow-medium);margin-bottom:var(--spacing-small);opacity:0;transform:scale(.8) translateY(-20px);transition:all var(--duration-normal) var(--animation-timing)}.combo-milestone.show{opacity:1;transform:scale(1) translateY(0);animation:comboEffect 3.5s ease forwards}.combo-milestone.combo-break{background:linear-gradient(45deg,var(--error-color),#c0392b);animation:comboBreak 2.5s ease forwards}.combo-milestone.level-2{font-size:1.3em}.combo-milestone.level-3{font-size:1.4em;text-shadow:0 0 10px rgba(255,255,255,.5)}.combo-milestone.level-4{font-size:1.5em;text-shadow:0 0 15px rgba(255,255,255,.8);box-shadow:0 0 20px var(--combo-color, var(--primary-color))}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;z-index:calc(var(--z-index-overlay) + 50);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--duration-normal) ease}.modal-overlay.show{opacity:1}.modal-overlay.closing{opacity:0;transition:opacity var(--duration-normal) ease}.modal-overlay.closing .rating-details-modal{transform:translateY(-20px);opacity:0;transition:all var(--duration-normal) ease}.rating-details-modal{background-color:var(--card-background);border-radius:0;padding:24px;width:90%;max-width:700px;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-medium);color:var(--text-color);border:1px solid var(--border-color);transform:translateY(0);opacity:1;transition:all var(--duration-normal) ease}.current-rating{font-size:1.1em;font-weight:600;margin:var(--spacing) 0;padding:var(--spacing);background:var(--background-color);border-radius:0;border-left:3px solid var(--primary-color)}.current-rating span{color:var(--primary-color);font-weight:600}.level-badge{display:inline-block;padding:2px 6px;border-radius:0;margin-left:var(--spacing-small);font-size:.9em;background:#0000000d}.rating-records-table{width:100%;border-collapse:collapse;margin-top:var(--spacing);font-size:.9em}.rating-records-table th,.rating-records-table td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--border-color)}.rating-records-table th{background-color:var(--background-color);font-weight:600;border-bottom:2px solid var(--primary-color)}.rating-records-table tr:hover{background-color:#9b59b60d}.rating-records-table td:nth-child(2){font-weight:600;color:var(--primary-color)}.level-change-animation{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:calc(var(--z-index-overlay) + 100);opacity:0;pointer-events:none;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}.level-change-animation.show{animation:levelChange 3s ease-in-out forwards}.level-change-animation:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#0000004d;z-index:-1}.level-change-content{background:var(--card-background);color:var(--text-color);padding:var(--spacing-large);border-radius:0;text-align:center;box-shadow:var(--shadow-medium);border:1px solid var(--border-color);min-width:300px;max-width:400px}.level-change-title{font-size:1.5em;font-weight:600;margin-bottom:var(--spacing);color:var(--text-color)}.level-change-from,.level-change-to{font-size:1.2em;font-weight:600;margin:var(--spacing-small) 0}.level-change-arrow{font-size:1.5em;margin:var(--spacing-small) 0;color:var(--text-light)}#rating-level{font-size:1.1em;font-weight:600;padding:4px 8px;border-radius:0;display:inline-block;cursor:help;background:var(--card-background);border:1px solid rgba(255,255,255,.3);transition:all var(--duration-normal) ease}.level-tooltip-global{position:fixed;z-index:calc(var(--z-index-tooltip));width:280px;background:var(--card-background);color:var(--text-color);padding:var(--spacing);border-radius:0;font-size:.9em;box-shadow:var(--shadow-medium);border:1px solid var(--border-color);pointer-events:none;opacity:0;visibility:hidden;transition:all var(--duration-fast) ease}.level-tooltip-global.show{opacity:1;visibility:visible}.level-tooltip-title{font-weight:600;margin-bottom:var(--spacing-small);border-bottom:1px solid var(--border-color);padding-bottom:var(--spacing-small);text-align:center;color:var(--text-color)}.level-tooltip-item{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid var(--border-color)}.level-tooltip-item:hover{background-color:var(--background-color)}.level-tooltip-item:last-child{border-bottom:none}.level-tooltip-item span:nth-child(2){font-weight:500}.level-tooltip-item span:last-child{color:var(--text-light);font-size:.85em;font-family:var(--font-family)}.rating-button-container{display:flex;gap:var(--spacing);justify-content:center;margin-top:var(--spacing-large)}.modal-button{display:flex;align-items:center;gap:var(--spacing-small);padding:var(--spacing-small) var(--spacing);border:none;border-radius:0;font-size:var(--font-size-base);font-weight:500;cursor:pointer;transition:all var(--duration-fast) ease}.export-button{background:var(--primary-color);color:#fff}.export-button:hover{background:var(--secondary-color)}.close-button{background:var(--border-color);color:var(--text-color)}.close-button:hover{background:var(--text-light);color:#fff}#game-over,.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:calc(var(--z-index-overlay) + 100);background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:none;justify-content:center;align-items:center;opacity:0;transition:opacity var(--duration-normal) ease}#game-over.show,.overlay.show{display:flex!important;opacity:1}.game-over-content{background:var(--card-background);color:var(--text-color);padding:var(--spacing-large);border-radius:0;box-shadow:var(--shadow-medium);border:1px solid var(--border-color);width:90%;max-width:500px;max-height:80vh;overflow-y:auto;margin:auto;position:relative;transform:scale(.9) translateY(20px);transition:all var(--duration-normal) ease}#game-over.show .game-over-content{transform:scale(1) translateY(0)}.game-over-content h2{margin:0 0 var(--spacing-large) 0;font-size:2em;font-weight:700;color:var(--primary-color);text-align:center;border-bottom:2px solid var(--primary-color);padding-bottom:var(--spacing)}#final-stats{margin:0}#final-stats p{display:flex;justify-content:space-between;align-items:center;margin:0 0 var(--spacing) 0;padding:var(--spacing) 0;border-bottom:1px solid var(--border-color);font-size:var(--font-size-base);color:var(--text-color)}#final-stats p:last-child{border-bottom:none;margin-bottom:0}#final-stats span{font-weight:700;font-size:1.1em;color:var(--primary-color)}.rating-result{margin:var(--spacing-large) 0 0 0;padding:var(--spacing);background:#9b59b61a;border:1px solid rgba(155,89,182,.2);border-radius:0}.rating-result p{margin:var(--spacing-small) 0;font-size:var(--font-size-base);color:var(--text-color);border-bottom:none!important;padding:var(--spacing-small) 0}.rating-result span{font-weight:600;color:var(--primary-color)}#new-best-container{margin-top:var(--spacing);padding:var(--spacing);background:linear-gradient(135deg,var(--success),#27ae60);color:#fff;border-radius:0;text-align:center;font-weight:600;box-shadow:0 4px 8px #27ae604d}.new-best{font-size:1.1em;animation:pulse 2s ease-in-out infinite}.game-over-content:after{content:"Press Space to restart";display:block;text-align:center;margin-top:var(--spacing-large);font-size:var(--font-size-small);color:var(--text-light);opacity:1;font-style:italic}@media (max-width: 768px){.game-over-content{width:95%;padding:var(--spacing);margin:var(--spacing-small)}.game-over-content h2{font-size:1.5em}#final-stats p{font-size:var(--font-size-small)}}.history-entry{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px 8px;border-bottom:1px solid var(--border-color);font-size:.9em;background:var(--card-background);border-radius:0;margin-bottom:4px;line-height:1.3;transition:background-color var(--duration-fast) ease}.history-entry:hover{background:var(--card-background)}.history-entry:last-child{border-bottom:none;margin-bottom:0}.history-entry .history-header{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--primary-color);margin-bottom:4px;padding-bottom:4px;border-bottom:1px solid rgba(155,89,182,.2);font-size:.85em}.history-entry div{font-size:.85em;color:var(--text-color);padding:1px 0}.history-entry div:nth-child(2),.history-entry div:nth-child(4),.history-entry div:nth-child(6),.history-entry div:nth-child(8){font-weight:700;color:var(--primary-color)}.loading-container{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-index-overlay);background:var(--overlay-background);display:none;justify-content:center;align-items:center;flex-direction:column}.loading-container.active{display:flex}.loading-spinner{width:50px;height:50px;border:5px solid var(--secondary-color);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}.loading-text{margin-top:var(--spacing);color:#fff;font-size:var(--font-size-large)}#error-container{position:fixed;top:var(--spacing);right:var(--spacing);max-width:300px;z-index:var(--z-index-overlay)}.error-message{background:#ff00001a;border:1px solid var(--error-color);border-radius:0;color:var(--error-color);padding:var(--spacing);margin-bottom:var(--spacing-small);animation:slideIn var(--animation-speed) var(--animation-timing)}.game-footer{position:fixed;bottom:var(--spacing-small);left:50%;transform:translate(-50%);padding:var(--spacing-small);text-align:center;z-index:var(--z-index-base);background:var(--card-background);border-radius:0;box-shadow:var(--shadow-light);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.game-footer a{text-decoration:none;transition:opacity var(--animation-speed)}.game-footer a:hover{opacity:.8}@media (max-width: 768px){.game-footer{position:static;transform:none;margin-top:var(--spacing);background:transparent;box-shadow:none}}@media (max-height: 500px) and (orientation: landscape){.game-footer{position:absolute;top:var(--spacing-small);left:var(--spacing-small);bottom:auto;transform:none;background:transparent;box-shadow:none;padding:var(--spacing-small)}.game-footer img{transform:scale(.8);opacity:.7}}@media (orientation: landscape) and (max-height: 600px){body{--landscape-height: 100vh;--grid-gap: 3px;padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));font-size:12px}#game-container{grid-template-areas:"header header header" "stats board info";grid-template-columns:minmax(110px,1fr) minmax(0,2fr) minmax(130px,1fr);grid-template-rows:32px minmax(0,1fr);gap:8px;width:100%;min-width:0;max-width:1100px;height:calc(var(--landscape-height) - max(6px,env(safe-area-inset-top)) - max(6px,env(safe-area-inset-bottom)));max-height:none;padding:8px;overflow:visible}header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;min-width:0}h1{font-size:18px;margin:0;white-space:nowrap}.key-guide{font-size:10px;line-height:1.2;margin:0;text-align:right}.key-guide br{display:none}.shortcut-hint{display:inline;margin:0}.key{padding:1px 3px;margin:0 1px}.board-panel{width:100%;min-width:0}.column-keys{padding:0 6px}#game-board{--board-content-height: calc(var(--landscape-height) - max(6px, env(safe-area-inset-top)) - max(6px, env(safe-area-inset-bottom)) - 122px);grid-template-columns:repeat(6,minmax(0,1fr));width:100%;padding:6px;touch-action:manipulation}#game-board .cell{width:100%}.game-stats,.game-info{min-width:0;min-height:0;gap:6px}.stats-grid{grid-template-columns:minmax(0,1fr);gap:6px}.stat-card{padding:6px 3px;min-width:0}.stat-value{font-size:32px;margin-bottom:0;overflow-wrap:anywhere}.stat-label{font-size:20px}.info-card{padding:6px}.info-card h3{margin-bottom:4px;padding-bottom:3px;font-size:12px}#player-rating{padding:3px;font-size:11px}#rating-level{padding:3px;font-size:12px}.game-stats .stat-label{font-size:15px}.game-stats .stat-value{font-size:16px}.history-card{flex:1;height:auto;min-height:0;max-height:none}.history-stats{min-height:0;overscroll-behavior:contain}#restart-button{margin-top:0;padding:8px 4px;min-height:44px;font-size:12px}#restart-button .key-hint,.game-footer{display:none}.game-over-content{max-height:calc(var(--landscape-height) - 24px);padding:12px}.game-over-content h2{font-size:20px;margin-bottom:8px;padding-bottom:6px}#final-stats p{margin-bottom:4px;padding:4px 0}.rating-details-modal{max-height:calc(var(--landscape-height) - 24px);overflow:auto}}@supports (height: 100dvh){@media (orientation: landscape) and (max-height: 600px){body{--landscape-height: 100dvh}}}body{--viewport-height: 100vh;--edge-top: max(8px, env(safe-area-inset-top));--edge-bottom: max(8px, env(safe-area-inset-bottom));padding:var(--edge-top) max(8px,env(safe-area-inset-right)) var(--edge-bottom) max(8px,env(safe-area-inset-left))}@supports (height: 100dvh){body{--viewport-height: 100dvh}}#game-container{width:100%;min-width:0;max-width:1660px;height:calc(var(--viewport-height) - var(--edge-top) - var(--edge-bottom));min-height:200px;max-height:none;padding:clamp(6px,1.2vw,20px);gap:clamp(6px,1vw,16px);grid-template-areas:"header board info" "stats board info";grid-template-columns:clamp(100px,18vw,280px) minmax(0,1fr) clamp(120px,18vw,280px);grid-template-rows:auto minmax(0,1fr);overflow:visible;transition-property:opacity,transform}header{min-width:0;margin-bottom:0}h1{margin-bottom:0}.brand-title{font-size:0;line-height:0;width:100%}.brand-logo{display:block;width:100%;height:auto;max-height:90px;object-fit:contain}.board-panel{display:flex;flex-direction:column;gap:8px;width:100%;max-width:777px;height:100%;min-width:0;min-height:0}#game-board{flex:1 1 0;min-height:0;width:100%;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(var(--board-rows),minmax(0,1fr));padding:clamp(6px,1vw,16px)}#game-board .cell{width:100%;height:100%}.column-keys{flex:0 0 44px;padding:0 clamp(6px,1vw,16px);margin-top:0}.game-stats,.game-info{min-width:0;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;overscroll-behavior:contain}.game-stats{overflow:visible}.game-stats .stats-grid{flex-shrink:0}.character-portrait{width:min(18.133333vw,calc(var(--viewport-height) * .341333333));max-width:106.666667%;height:auto;min-height:0;max-height:none}.game-info>*{flex-shrink:0}.history-card{flex:0 0 400px;height:400px;max-height:400px}@media (max-width: 699px) and (orientation: portrait){body{align-items:flex-start}#game-container{height:auto;grid-template-areas:"header header" "board board" "stats info";grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:40px auto auto;padding:6px;gap:8px}header{display:flex;align-items:center;justify-content:center}h1{font-size:28px}.brand-title{font-size:0}.brand-logo{max-height:36px}.board-panel{height:max(180px,calc(var(--viewport-height) - var(--edge-top) - var(--edge-bottom) - 68px))}.stat-card{padding:8px 4px}.stat-label{font-size:16px}.stat-value{font-size:24px}.info-card{padding:8px}}