.g4-tool .g4-layout{align-items: flex-start;row-gap: 16px}.g4-board-panel,.g4-side-panel{min-width: 0}.g4-panel-header{gap: 12px}.g4-panel-header>span:first-child{flex: 1;min-width: 0}.g4-panel-header i{margin-right: 6px}.g4-panel-header .g4-hint{flex: 0 1 auto;min-width: 0;text-align: right}.g4-board-body,.g4-side-body{display: flex;flex-direction: column;gap: 14px}.g4-board-body{--g4-board-max: 440px}.g4-scores{display: flex;flex-wrap: wrap;gap: 10px}.g4-score-card{position: relative;flex: 1 1 120px;min-width: 0;padding: 9px 12px;background: var(--bg-soft);border: 1px solid var(--border);border-radius: var(--radius);text-align: center}.g4-score-card.is-best{background: #fff8ec;border-color: #f0dcb4}:root[data-theme="dark"] .g4-score-card.is-best{background: #241f14;border-color: #4a3f22}.g4-score-label{display: block;color: var(--text-3);font-size: 12px;font-weight: 600}.g4-score-value{display: block;color: var(--text);font-size: 23px;font-weight: 700;line-height: 1.25;font-variant-numeric: tabular-nums}.g4-gain{position: absolute;top: 4px;right: 8px;color: var(--success);font-size: 13px;font-weight: 700;opacity: 0}.g4-gain.is-on{animation: g4-rise 0.75s ease-out}@keyframes g4-rise{0%{opacity: 1;transform: translateY(0)}100%{opacity: 0;transform: translateY(-16px)}}.g4-stage{position: relative}.g4-board{--g4-n: 4;--g4-gap: 10px;--g4-tile: calc((100% - (var(--g4-n) + 1) * var(--g4-gap)) / var(--g4-n));position: relative;width: 100%;max-width: var(--g4-board-max);margin: 0 auto;aspect-ratio: 1 / 1;background: #b7a99b;border-radius: 12px;box-shadow: var(--shadow-sm);touch-action: none}.g4-board[data-size="3"]{--g4-gap: 12px}.g4-board[data-size="5"],.g4-board[data-size="6"]{--g4-gap: 8px}.g4-slots,.g4-tiles{position: absolute;inset: 0}.g4-slots{display: grid;grid-template-columns: repeat(var(--g4-n),1fr);grid-template-rows: repeat(var(--g4-n),1fr);gap: var(--g4-gap);padding: var(--g4-gap)}.g4-slot{background: rgba(238,228,218,0.38);border-radius: 8px}.g4-tile{position: absolute;left: calc(var(--g4-gap) + (var(--g4-tile) + var(--g4-gap)) * var(--c));top: calc(var(--g4-gap) + (var(--g4-tile) + var(--g4-gap)) * var(--r));display: flex;align-items: center;justify-content: center;width: var(--g4-tile);height: var(--g4-tile);border-radius: 8px;background: #eee4da;color: #241f1a;font-size: 1em;font-weight: 700;line-height: 1;font-variant-numeric: tabular-nums;transition: left 0.1s ease-out,top 0.1s ease-out}.g4-tile.is-len-3{font-size: 0.8em}.g4-tile.is-len-4{font-size: 0.64em}.g4-tile.is-len-5{font-size: 0.52em}.g4-tile.is-len-6{font-size: 0.44em}.g4-tile.is-len-7{font-size: 0.38em}.g4-tile.v-2{background: #eee4da}.g4-tile.v-4{background: #ede0c8}.g4-tile.v-8{background: #f2b179}.g4-tile.v-16{background: #f59563}.g4-tile.v-32{background: #f67c5f}.g4-tile.v-64{background: #f65e3b}.g4-tile.v-128{background: #edcf72}.g4-tile.v-256{background: #edcc61}.g4-tile.v-512{background: #edc850}.g4-tile.v-1024{background: #edc53f}.g4-tile.v-2048{background: #edc22e;box-shadow: 0 0 14px rgba(237,194,46,0.6)}.g4-tile.v-super{background: #443d36;color: #ffffff}.g4-tile.is-spawn{animation: g4-spawn 0.14s ease-out}.g4-tile.is-merge{animation: g4-merge 0.17s ease-out}@keyframes g4-spawn{from{transform: scale(0.4);opacity: 0.2}to{transform: scale(1);opacity: 1}}@keyframes g4-merge{0%{transform: scale(1)}45%{transform: scale(1.18)}100%{transform: scale(1)}}.g4-board.no-fx .g4-tile{transition: none}.g4-board.no-fx .g4-tile.is-spawn,.g4-board.no-fx .g4-tile.is-merge{animation: none}.g4-overlay{position: absolute;inset: 0;z-index: 6;display: none;flex-direction: column;align-items: center;justify-content: center;gap: 10px;padding: 16px;background: rgba(238,228,218,0.86);border-radius: 12px;text-align: center}.g4-overlay.is-on{display: flex}.g4-overlay.is-win{background: rgba(237,194,46,0.9)}.g4-overlay-title{color: #776e65;font-size: 26px;font-weight: 800}.g4-overlay.is-win .g4-overlay-title{color: #fff}.g4-overlay-text{max-width: 320px;color: #6b6259;font-size: 13.5px}.g4-overlay.is-win .g4-overlay-text{color: #fffdf5}.g4-overlay-actions{display: flex;flex-wrap: wrap;gap: 8px;justify-content: center;margin-top: 2px}.g4-pad{display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(2,auto);gap: 8px;width: 100%;max-width: 250px;margin: 0 auto}.g4-pad-btn{min-height: 44px;padding: 8px 0;background: #8f7a66;border: none;border-radius: var(--radius);color: #fff;font-size: 17px;font-weight: 700;cursor: pointer;transition: background .15s,transform .1s}.g4-pad-btn:hover{background: #9f8b77}.g4-pad-btn:active{transform: scale(0.96)}.g4-pad-btn.is-up{grid-column: 2;grid-row: 1}.g4-pad-btn.is-left{grid-column: 1;grid-row: 2}.g4-pad-btn.is-down{grid-column: 2;grid-row: 2}.g4-pad-btn.is-right{grid-column: 3;grid-row: 2}.g4-hint{color: var(--text-3);font-size: 12.5px;text-align: center}.g4-hint code{padding: 1px 5px;background: var(--bg-soft);border: 1px solid var(--border);border-radius: 4px;font-family: var(--mono);font-size: 11.5px}.g4-field{display: flex;flex-direction: column;gap: 6px;min-width: 0;margin: 0;color: var(--text-2);font-size: 13.5px;font-weight: 600}.g4-field .form-control{width: 100%;min-width: 0;padding-top: 8px;padding-bottom: 8px;font-size: 14px}.g4-field-row{display: flex;flex-wrap: wrap;gap: 12px}.g4-field-half{flex: 1 1 140px;min-width: 0}.g4-check{display: flex;align-items: center;gap: 7px;min-width: 0;color: var(--text-2);font-size: 13.5px;font-weight: 600}.g4-check input{flex: 0 0 auto;margin: 0}.g4-action-row{display: flex;flex-wrap: wrap;gap: 8px}.g4-action-row .btn{flex: 0 1 auto;min-width: 0}.g4-message{display: none;width: 100%;max-width: var(--g4-board-max);margin: 0 auto;padding: 8px 10px;background: var(--info-soft);border: 1px solid var(--info);border-radius: var(--radius);color: #0f5f6d;font-size: 13px;text-align: center}.g4-message.is-on{display: block}.g4-message.is-error{background: var(--danger-soft);border-color: var(--danger);color: #991b1b}.g4-message.is-good{background: var(--success-soft);border-color: var(--success);color: #15803d}:root[data-theme="dark"] .g4-message{color: var(--info)}:root[data-theme="dark"] .g4-message.is-error{color: var(--danger)}:root[data-theme="dark"] .g4-message.is-good{color: var(--success)}.g4-stats{display: grid;grid-template-columns: repeat(auto-fit,minmax(92px,1fr));gap: 10px}.g4-stat{padding: 8px 10px;background: var(--bg-soft);border: 1px solid var(--border);border-radius: var(--radius);text-align: center}.g4-stat-label{display: block;color: var(--text-3);font-size: 11.5px;font-weight: 600}.g4-stat-value{display: block;color: var(--text);font-size: 16px;font-weight: 700;font-variant-numeric: tabular-nums}.g4-progress-row{display: flex;flex-wrap: wrap;align-items: center;gap: 10px}.g4-progress{flex: 1 1 140px;min-width: 0;height: 8px;appearance: none;border: none;background: var(--bg-soft);border-radius: 999px;overflow: hidden}.g4-progress::-webkit-progress-bar{background: var(--bg-soft);border-radius: 999px}.g4-progress::-webkit-progress-value{background: var(--success);border-radius: 999px}.g4-progress::-moz-progress-bar{background: var(--success);border-radius: 999px}.g4-progress-text{flex: 0 1 auto;min-width: 0;color: var(--text-3);font-size: 12.5px;white-space: nowrap}.g4-note{padding: 9px 11px;background: var(--bg-soft);border: 1px solid var(--border);border-radius: var(--radius);color: var(--text-2);font-size: 12.5px;line-height: 1.6}.g4-note i{margin-right: 5px;color: var(--info)}.g4-samples{display: flex;flex-direction: column;gap: 12px;margin-top: 12px}.g4-sample{display: flex;flex-direction: column;gap: 6px;padding: 12px 14px;background: var(--bg-soft);border: 1px solid var(--border);border-radius: var(--radius)}.g4-sample-head{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 8px 12px}.g4-sample-head strong{flex: 1 1 auto;min-width: 0;color: var(--text);font-size: 14px}.g4-sample p{margin: 0;color: var(--text-2);font-size: 13.5px}.g4-sample code{padding: 1px 5px;background: #fff;border: 1px solid var(--border);border-radius: 4px;font-family: var(--mono);font-size: 12.5px}:root[data-theme="dark"] .g4-sample code{background: var(--bg);color: var(--text-2)}.g4-chip{flex: 0 0 auto}@media (max-width: 767px){.g4-board{--g4-gap: 8px;max-width: 100%}.g4-score-value{font-size: 20px}.g4-pad{max-width: 100%}.g4-overlay-title{font-size: 22px}}