:root{
  --green:#6fc267;
  --yellow:#ffd966;
  --gray:#b9bec5;
  --bg:#ffffff;
  --soft:#f2f3f5;
  --tile-border:#d9dde3;
  --text:#111827;
  --muted:#9ca3af;
  --button:#e3e6eb;
  --dark:#111827;
  --danger:#ef4444;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:#f5f6f8;color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input{font-family:inherit}
button{cursor:pointer}
.screen{width:min(430px,100%);min-height:100dvh;margin:0 auto;background:var(--bg);display:flex;flex-direction:column}
.header{height:46px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:900;user-select:none;position:relative}
.header .title{padding:8px 14px;border-radius:10px}
.header .sub{position:absolute;right:14px;font-size:12px;color:#9ca3af}
.main{flex:1;padding:6px 18px 12px}
.board{display:grid;gap:10px;margin:0 auto 20px;max-width:390px}
.row{display:grid;gap:7px}
.tile{
  aspect-ratio:1/1;border:1px solid var(--tile-border);border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:900;background:#fff;color:var(--text);
  transform-style:preserve-3d;transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.tile.filled{border:0}
.tile.green{background:var(--green);border-color:var(--green)}
.tile.yellow{background:var(--yellow);border-color:var(--yellow)}
.tile.gray{background:var(--gray);border-color:var(--gray)}
.tile.reveal{animation:flipReveal .52s ease both}
@keyframes flipReveal{0%{transform:rotateX(0deg) scale(1)}45%{transform:rotateX(90deg) scale(.98)}55%{transform:rotateX(90deg) scale(.98)}100%{transform:rotateX(0deg) scale(1)}}
.tile.pop{animation:popIn .1s ease}
@keyframes popIn{0%{transform:scale(.92)}100%{transform:scale(1)}}
.board.shake{animation:shake .28s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.message{text-align:center;min-height:34px;margin:6px 0 10px;font-weight:900;line-height:1.4;white-space:pre-wrap}
.controls{max-width:360px;margin:8px auto 0;display:flex;justify-content:center;gap:8px}
.share-btn,.small-btn{display:none;width:100%;border:0;border-radius:10px;padding:13px;background:var(--button);font-weight:900;font-size:15px}
.small-btn{display:block;width:auto;padding:10px 14px}
.share-box{display:none;white-space:pre-wrap;margin:12px auto 0;max-width:360px;background:#111827;color:white;padding:12px;border-radius:12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.keyboard-wrap{background:var(--soft);padding:14px 10px calc(18px + env(safe-area-inset-bottom))}
.inputbar{max-width:390px;height:52px;margin:0 auto 12px;border-radius:16px;background:#e8eaee;color:#a1a1aa;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.inputbar.active{color:var(--text);background:#edf2f7}
.keyboard-area{max-width:410px;margin:0 auto;display:flex;justify-content:center;align-items:flex-start;gap:6px}
.keyboard{display:grid;gap:8px;justify-items:center}
.keyrow{display:flex;justify-content:center;gap:6px}
.key,.action{width:34px;height:43px;border:0;border-radius:7px;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;cursor:pointer}
.key.green,.action.green{background:var(--green)}
.key.yellow,.action.yellow{background:var(--yellow)}
.key.gray,.action.gray{background:var(--gray)}
.action-col{display:flex;flex-direction:column;gap:8px}
.action{width:46px}
.action.enter{font-size:13px}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:20px;z-index:20;background:rgba(0,0,0,.45)}
.modal-card{width:min(390px,100%);max-height:90dvh;overflow:auto;background:white;border-radius:18px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal-card h2{margin:0 0 12px;font-size:18px}
.modal-card input,.modal-card textarea{
  width:100%;border:1px solid #d1d5db;border-radius:12px;padding:13px;margin:6px 0 10px;font-size:16px;text-align:center
}
.modal-card textarea{text-align:left;min-height:90px;resize:vertical}
.modal-card button{width:100%;border:0;border-radius:12px;padding:12px;margin-top:7px;font-weight:900}
.primary{background:#111827;color:white}.blue{background:#bae6fd;color:#0c4a6e}.light{background:#e5e7eb;color:#111827}.red{background:#fee2e2;color:#991b1b}
.small{margin-top:8px;color:#6b7280;font-size:12px;line-height:1.55}
.preview{background:#f3f4f6;border-radius:12px;padding:10px;margin:8px 0;font-weight:800;text-align:center}
.result-only{padding-top:20px}
@media(max-width:380px){
  .main{padding-left:12px;padding-right:12px}
  .key{width:31px;height:41px}
  .action{width:42px;height:41px}
  .tile{font-size:19px}
}