.App{width:100%;min-height:100dvh;display:flex;flex-direction:column}.play-main{flex:1;padding-bottom:16px}.play-header{text-align:center;padding:var(--space-xl) var(--space-lg) var(--space-lg)}.play-header h2{font-size:var(--fs-h2);color:var(--play-text);margin-bottom:var(--space-sm)}.play-nav{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);background:var(--play-card);border-bottom:1px solid var(--play-border);position:sticky;top:0;z-index:50}.play-nav__back{background:none;border:none;font-size:var(--fs-h3);cursor:pointer;color:var(--play-text);padding:var(--space-xs);-webkit-tap-highlight-color:transparent;font-family:var(--play-font)}.play-nav__title{flex:1;text-align:center;font-size:var(--fs-h3);font-weight:800;color:var(--play-text);letter-spacing:.03em}.play-timer{font-size:var(--fs-h3);color:var(--play-text-secondary);font-variant-numeric:tabular-nums;font-weight:600;min-width:80px;text-align:center}.play-card{background:var(--play-card);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--play-shadow-sm);transition:transform .2s ease,box-shadow .2s ease}.play-card__title{font-size:var(--fs-h2);font-weight:800;color:var(--play-text);margin-bottom:var(--space-md);letter-spacing:.02em}.play-bank-card{background:var(--play-card);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--play-shadow-sm);transition:transform .2s ease,box-shadow .2s ease}.play-bank-card:hover{transform:translateY(-2px);box-shadow:var(--play-shadow-md)}.play-bank-card__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-sm)}.play-bank-card__id{font-weight:700;font-size:var(--fs-h3);color:var(--play-text)}.play-bank-card__info{color:var(--play-text-secondary);font-size:var(--fs-xs);margin-top:var(--space-xs)}.play-bank-card__attempts{font-size:var(--fs-xs);margin-top:var(--space-xs);font-weight:500}.play-bank-card__rank{font-size:var(--fs-xs);margin-top:var(--space-xs);font-weight:600;color:var(--play-primary)}.play-bank-card__rank-detail{font-weight:500;color:var(--play-text-secondary);font-size:.9em}.play-bank-card__countdown{font-size:var(--fs-xs);margin-top:var(--space-xs);font-weight:600;color:var(--play-primary);font-variant-numeric:tabular-nums}.play-badge{display:inline-block;padding:2px 12px;border-radius:var(--radius-full);font-size:var(--fs-xs);font-weight:600;color:#fff;line-height:1.8;white-space:nowrap}.play-badge--easy{background:var(--play-easy)}.play-badge--medium{background:var(--play-medium)}.play-badge--hard{background:var(--play-hard)}.play-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);min-height:48px;padding:12px 24px;border-radius:var(--radius-md);font-size:var(--fs-body);font-weight:600;font-family:var(--play-font);cursor:pointer;border:none;transition:all .2s ease;-webkit-tap-highlight-color:transparent;text-decoration:none;line-height:1.2}.play-btn:active{transform:scale(.97)}.play-btn--primary{background:var(--play-primary);color:#fff}.play-btn--primary:hover{background:var(--play-primary-hover)}.play-btn--primary:disabled{background:var(--play-disabled);color:var(--play-text-light);cursor:not-allowed;transform:none}.play-btn--secondary{background:transparent;color:var(--play-primary);border:2px solid var(--play-primary)}.play-btn--secondary:hover{background:var(--play-primary-light)}.play-btn--secondary:disabled{border-color:var(--play-disabled);color:var(--play-text-light);cursor:not-allowed;transform:none}.play-btn--danger{background:var(--play-danger);color:#fff}.play-btn--full{width:100%}.play-form{display:flex;flex-direction:column;gap:var(--space-md)}.play-form__group{display:flex;flex-direction:column;gap:var(--space-xs)}.play-form__label{font-size:var(--fs-body);font-weight:500;color:var(--play-text)}.play-form__input{height:48px;padding:0 16px;border-radius:var(--radius-md);border:2px solid var(--play-border);font-size:var(--fs-body);font-family:var(--play-font);background:var(--play-card);color:var(--play-text);transition:border-color .2s ease,box-shadow .2s ease;outline:none;width:100%}.play-form__input:focus{border-color:var(--play-primary);box-shadow:var(--play-shadow-input-focus)}.play-form__input::placeholder{color:var(--play-text-light)}.play-form__input--error{border-color:var(--play-danger)}.play-form__error{color:var(--play-danger);font-size:var(--fs-xs);margin-top:2px}.play-form__actions{display:flex;flex-direction:column;gap:var(--space-sm);margin-top:var(--space-sm)}.play-input--challenge{height:64px;font-size:var(--fs-input);text-align:center;width:100%;padding:0 16px;border-radius:var(--radius-md);border:2px solid var(--play-border);background:var(--play-card);color:var(--play-text);font-family:var(--play-font);font-weight:700;outline:none;transition:border-color .2s ease,box-shadow .2s ease;-moz-appearance:textfield}.play-input--challenge::-webkit-outer-spin-button,.play-input--challenge::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.play-input--challenge:focus{border-color:var(--play-primary);box-shadow:var(--play-shadow-input-focus)}.play-input--challenge::placeholder{color:var(--play-text-light);font-weight:400;font-size:var(--fs-h3)}.play-question{text-align:center;padding:var(--space-xl) var(--space-lg)}.play-question p:first-child{font-size:var(--fs-h3);color:var(--play-text-secondary);margin-bottom:var(--space-sm)}.play-question p:last-child{font-size:var(--fs-hero);font-weight:700;color:var(--play-text);line-height:1.4}.play-progress{height:8px;background:var(--play-border);border-radius:4px;overflow:hidden}.play-progress__fill{height:100%;background:var(--play-accent);border-radius:4px;transition:width .3s ease}.play-result{text-align:center;padding:var(--space-xl);animation:play-fade-in .3s ease}.play-result__title{font-size:var(--fs-h1);font-weight:700;margin-bottom:var(--space-lg);color:var(--play-text)}.play-result__score{font-size:var(--fs-hero);color:var(--play-primary);font-weight:700;animation:play-score-in .4s ease-out;margin-bottom:var(--space-md)}.play-result__stats{display:flex;flex-direction:column;gap:var(--space-sm);margin:var(--space-lg) 0;text-align:center;font-size:var(--fs-h3)}.play-result__stats p{color:var(--play-text)}.play-leaderboard__select{height:48px;padding:0 16px;border-radius:var(--radius-md);border:2px solid var(--play-border);font-size:var(--fs-body);font-family:var(--play-font);background:var(--play-card);color:var(--play-text);outline:none;cursor:pointer;transition:border-color .2s ease;min-width:160px;flex:1}.play-leaderboard__select:focus{border-color:var(--play-primary)}.play-leaderboard__item--me{background:var(--play-primary-light);border-radius:var(--radius-sm);border-bottom-color:transparent;margin-top:2px;margin-bottom:2px}.play-leaderboard__header{display:flex;align-items:center;padding:var(--space-sm) var(--space-lg);border-bottom:2px solid var(--play-border);font-size:11px;font-weight:700;color:var(--play-text-secondary);letter-spacing:.04em}@media (max-width: 400px){.play-leaderboard__header{font-size:10px;padding:6px var(--space-md)}}.play-leaderboard__col-rank{width:44px;flex-shrink:0;text-align:center;position:relative;display:flex;align-items:center;justify-content:center}.play-leaderboard__col-name{flex:1;min-width:0;padding:0 var(--space-sm);font-weight:600;color:var(--play-text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.play-leaderboard__col-time{width:120px;flex-shrink:0;text-align:center;font-size:11px;color:var(--play-text-secondary);display:flex;flex-direction:column;gap:2px}.play-leaderboard__time-date{font-weight:600}.play-leaderboard__time-time{font-size:10px;opacity:.75}.play-leaderboard__col-score{width:52px;flex-shrink:0;text-align:right;font-weight:700}@media (max-width: 420px){.play-leaderboard__col-rank{width:36px}.play-leaderboard__col-time{width:85px;font-size:10px}.play-leaderboard__col-score{width:44px}.play-leaderboard__header{padding:var(--space-sm) var(--space-md)}.play-leaderboard__item{padding:8px var(--space-md)}.play-leaderboard__time-time{font-size:9px}}.play-leaderboard__item{position:relative;display:flex;align-items:center;gap:0;padding:10px var(--space-lg);border-bottom:1px solid var(--play-border);transition:background .2s ease}.play-leaderboard__rank{font-weight:700;color:var(--play-primary);font-size:var(--fs-body)}.play-leaderboard__item:last-child{border-bottom:none}.play-leaderboard__item--me{background:var(--play-primary-light);border-radius:var(--radius-sm);border-bottom-color:transparent;margin-top:4px;margin-bottom:4px}.play-leaderboard__name{flex:1;font-weight:500;color:var(--play-text)}.play-leaderboard__time{flex:1;text-align:center;font-size:var(--fs-xs);color:var(--play-text-secondary)}.play-leaderboard__score{width:60px;text-align:right;font-weight:700;color:var(--play-text)}.play-me-badge{position:absolute;top:-10px;right:-10px;background:var(--play-primary);color:#fff;font-size:10px;padding:0 6px;border-radius:var(--radius-full);font-weight:700;line-height:1.6;z-index:1;box-shadow:0 1px 4px #00000026}@media (max-width: 400px){.play-me-badge{font-size:9px;padding:0 5px;top:-8px;right:-8px}}.play-tabbar{position:fixed;bottom:0;left:0;width:100%;height:calc(64px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--play-card);border-top:1px solid var(--play-border);display:flex;align-items:center;z-index:100;box-shadow:0 -2px 12px #4a37280f}.play-tabbar__item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--play-text-secondary);font-size:var(--fs-xs);cursor:pointer;transition:color .2s ease;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;height:100%;padding:4px 0}.play-tabbar__item:active{opacity:.7}.play-tabbar__item--active{color:var(--play-primary)}.play-tabbar__icon{font-size:22px;line-height:1}.play-profile{padding-bottom:var(--space-xl)}.play-profile__info{display:flex;flex-direction:column;gap:var(--space-md)}.play-profile__row{font-size:var(--fs-body);color:var(--play-text);padding:var(--space-sm) 0;border-bottom:1px solid var(--play-border)}.play-profile__row:last-of-type{border-bottom:none}.play-profile__row strong{display:inline-block;min-width:80px;color:var(--play-text-secondary)}.play-admin__tabs{display:flex;gap:var(--space-sm);padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--play-border);overflow-x:auto;-webkit-overflow-scrolling:touch}.play-admin__tab{padding:10px 20px;border-radius:var(--radius-md);border:2px solid var(--play-border);background:transparent;font-size:var(--fs-body);font-family:var(--play-font);font-weight:500;color:var(--play-text-secondary);cursor:pointer;transition:all .2s ease;white-space:nowrap;-webkit-tap-highlight-color:transparent}.play-admin__tab--active{background:var(--play-primary);color:#fff;border-color:var(--play-primary)}.play-admin__table{width:100%;border-collapse:collapse;font-size:var(--fs-body)}.play-admin__table th,.play-admin__table td{padding:var(--space-sm) var(--space-md);text-align:left;border-bottom:1px solid var(--play-border)}.play-admin__table th{font-weight:600;color:var(--play-text-secondary);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.5px}.play-admin__table td{color:var(--play-text)}.play-admin__pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md)}.play-loading{color:var(--play-text-secondary);text-align:center;padding:var(--space-xl);font-size:var(--fs-h3)}.play-error{color:var(--play-danger);text-align:center;padding:var(--space-md);font-size:var(--fs-body)}.play-empty{color:var(--play-text-light);text-align:center;padding:var(--space-xl);font-size:var(--fs-h3)}.play-toast{position:fixed;top:80px;left:50%;transform:translate(-50%);background:var(--play-card);color:var(--play-text);padding:12px 28px;border-radius:var(--radius-full);box-shadow:0 4px 20px #00000026;font-size:var(--fs-body);font-weight:600;z-index:999;animation:play-toast-in .3s ease,play-toast-out .3s ease 1.7s forwards;border:1px solid var(--play-border)}@keyframes play-toast-in{0%{opacity:0;transform:translate(-50%) translateY(-12px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes play-toast-out{0%{opacity:1}to{opacity:0;transform:translate(-50%) translateY(-12px)}}@keyframes play-score-in{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes play-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media (min-width: 640px){.App{max-width:640px;margin:0 auto}.play-tabbar{max-width:640px;left:50%;transform:translate(-50%)}.play-form{max-width:400px;margin:0 auto}}@media (min-width: 1024px){.App{max-width:800px;margin:0 auto}.play-tabbar{max-width:800px}.play-bank-card:hover{transform:translateY(-4px);box-shadow:var(--play-shadow-lg)}}:root{--play-primary: #FF6B6B;--play-primary-hover: #e55a5a;--play-primary-light: #fff0f0;--play-secondary: #FFD93D;--play-secondary-hover: #f0c92e;--play-accent: #6BCB77;--play-accent-hover: #5ab865;--play-danger: #FF6B6B;--play-warning: #FFB347;--play-bg: #FFF8F0;--play-card: #FFFFFF;--play-border: #F0E6DC;--play-text: #4A3728;--play-text-secondary: #8C7B6B;--play-text-light: #B8A89C;--play-disabled: #E8E0D8;--play-easy: #6BCB77;--play-medium: #FFB347;--play-hard: #FF6B6B;--play-shadow-sm: 0 2px 8px rgba(74, 55, 40, .06);--play-shadow-md: 0 4px 16px rgba(74, 55, 40, .08);--play-shadow-lg: 0 8px 24px rgba(74, 55, 40, .1);--play-shadow-input-focus: 0 0 0 3px rgba(255, 107, 107, .2);--play-font: "Nunito", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, -apple-system, sans-serif;--fs-xs: clamp(.75rem, .7rem + .25vw, .875rem);--fs-body: clamp(1rem, .9rem + .5vw, 1.125rem);--fs-h3: clamp(1.125rem, 1rem + .625vw, 1.375rem);--fs-h2: clamp(1.375rem, 1.2rem + .875vw, 1.75rem);--fs-h1: clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem);--fs-hero: clamp(2rem, 1.75rem + 1.5vw, 3rem);--fs-input: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{font-family:var(--play-font);font-size:var(--fs-body);line-height:1.6;color:var(--play-text);background:var(--play-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100dvh;padding-bottom:calc(72px + env(safe-area-inset-bottom,0px));letter-spacing:.02em}#root{width:100%;min-height:100dvh;display:flex;flex-direction:column;max-width:none;margin:0;padding:0;text-align:left}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--play-border);border-radius:3px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}