{"id":14626,"date":"2026-08-03T08:21:30","date_gmt":"2026-08-03T00:21:30","guid":{"rendered":"https:\/\/tiffanysmandarin.com\/?p=14626"},"modified":"2026-10-27T23:29:30","modified_gmt":"2026-10-27T15:29:30","slug":"chinese-tea-culture","status":"publish","type":"post","link":"https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/","title":{"rendered":"Chinese Tea Culture"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_89 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/#Famous_Teas\" >Famous Teas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/#How_Tea_Is_Categorized\" >How Tea Is Categorized<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/#Foreign_Teas\" >Foreign Teas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/#Bubble_Tea_Toppings\" >Bubble Tea &#038; Toppings<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/#Learning_to_Brew_Culture\" >Learning to Brew &#038; Culture<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/#Welcome_to_Artisanal_Barista_Training\" >Welcome to Artisanal Barista Training<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/#Congratulations_on_Completing_10_Orders\" >Congratulations on Completing 10 Orders!<\/a><\/li><\/ul><\/nav><\/div>\n\n<div style=\"height:4px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<!--\n  \u5d4c\u5165\u8aaa\u660e Embed notes\n  ============================================================\n  1. \u5df2\u79fb\u9664 <!DOCTYPE>\/<html>\/<head>\/<body>\uff0c\u4ea4\u7531\u7db2\u7ad9\u9801\u9762\u6a21\u677f\u63d0\u4f9b\u3002\n  2. \u6c92\u6709 controlbar \/ \u7e41\u7c21\u5207\u63db\u6309\u9215\uff0c\u7e41\u7c21\u5207\u63db\u4ea4\u7d66\u7db2\u7ad9\u5168\u7ad9\u5171\u7528\u7684\u958b\u95dc\u3002\n  3. root \u7528 document.getElementById('tea-vocab-embed-1') \u6293\u3002\n  4. \u7e41\u7c21\u5207\u63db\uff1a\u9019\u6bb5 script \u52d5\u614b\u6e32\u67d3\u5b8c\u5167\u5bb9\u5f8c\uff0c\u6703\u76f4\u63a5\u8b80 lang_zh-TW \/ pinyin-display \u9019\u5169\u9846 cookie\u3002\n  5. \u5587\u53ed\u6309\u9215\u7528 data-trad \/ data-simp \u5c6c\u6027 + \u4e8b\u4ef6\u59d4\u6d3e\u8655\u7406\u3002\n  ============================================================\n-->\n\n<div class=\"tea-vocab-embed\" id=\"tea-vocab-embed-1\">\n<style>\n  .tea-vocab-embed{\n    --tve-bg:#ffffff;\n    --tve-ink:#201a17;\n    --tve-ink-soft:#5b524b;\n    --tve-rule:#e6ddd0;\n    --tve-oxblood:#A84A34; \/* \u7d2b\u7802\u58fa\/\u8336\u6e6f\u7684\u9676\u571f\u7d05 *\/\n    --tve-oxblood-dark:#7A3423;\n    --tve-mustard:#D4A373; \/* \u70cf\u9f8d\u8336\u6e6f\u8272 *\/\n    --tve-sage:#587B60; \/* \u8336\u8449\u7da0 *\/\n    --tve-bone:#faf6ef;\n    --tve-bone-line:#efe6d6;\n    --tve-max:1040px;\n\n    color:var(--tve-ink);\n    font-family:'Work Sans',sans-serif;\n    line-height:1.6;\n  }\n  .tea-vocab-embed *{box-sizing:border-box;}\n  .tea-vocab-embed .wrap{max-width:var(--tve-max); margin:0 auto; padding:0 24px;}\n  .tea-vocab-embed a{color:var(--tve-oxblood); text-decoration: none;}\n  .tea-vocab-embed a:hover{text-decoration: underline;}\n\n  \/* \u72ec\u7acb\u8bbe\u5b9a\u7e41\u7b80\u4f53\u5b57\u578b\uff0c\u786e\u4fdd\u5207\u6362\u65f6\u6b63\u786e\u6e32\u67d3 *\/\n  .tea-vocab-embed .lang-zh-TW { font-family: 'Noto Serif TC', serif; }\n  .tea-vocab-embed .lang-zh-CN { font-family: 'Noto Serif SC', serif; }\n\n  .tea-vocab-embed ruby{ruby-position:over;}\n  .tea-vocab-embed rt{\n    font-family:'IBM Plex Mono',monospace; color:var(--tve-oxblood); font-weight:600;\n    font-size:.58em; letter-spacing:.01em;\n  }\n  .tea-vocab-embed rt.hidden{display:none;}\n  .tea-vocab-embed rt.mouseover{opacity:0; transition:opacity .15s ease;}\n  .tea-vocab-embed ruby:hover rt.mouseover{opacity:1;}\n\n  .tea-vocab-embed button.say{\n    border:1px solid var(--tve-rule); background:#fff; border-radius:50%; width:26px; height:26px;\n    font-size:.78rem; line-height:1; cursor:pointer; color:var(--tve-oxblood); display:inline-flex;\n    align-items:center; justify-content:center; padding:0; vertical-align:middle; margin-left:6px;\n  }\n  .tea-vocab-embed button.say:hover{border-color:var(--tve-oxblood); background:var(--tve-bone);}\n\n  .tea-vocab-embed header.hero{padding:56px 0 8px;}\n  .tea-vocab-embed .eyebrow{\n    font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.14em;\n    text-transform:uppercase; color:var(--tve-oxblood); margin-bottom:14px; font-weight:600;\n  }\n  .tea-vocab-embed h1.title{\n    font-family:'Bitter',serif; font-weight:800; font-size:clamp(2.1rem,5.2vw,3.3rem);\n    margin:0 0 6px; line-height:1.05;\n  }\n  .tea-vocab-embed h1.title .en{display:block; font-size:.4em; font-weight:500; color:var(--tve-ink-soft); margin-top:10px; letter-spacing:.01em;}\n  \n  .tea-vocab-embed .hero-img {\n    display: block;\n    width: 85%;\n    margin: 32px auto 16px;\n    border-radius: 12px;\n  }\n\n  .tea-vocab-embed .dek{max-width:none; color:var(--tve-ink-soft); font-size:1.02rem; margin-top:18px;}\n\n  .tea-vocab-embed section{padding:52px 0;}\n  .tea-vocab-embed section + section{border-top:1px solid var(--tve-rule);}\n  .tea-vocab-embed .sec-head{margin-bottom:28px;}\n  .tea-vocab-embed .sec-num{font-family:'IBM Plex Mono',monospace; font-size:.72rem; color:var(--tve-mustard); font-weight:600; letter-spacing:.08em;}\n  .tea-vocab-embed h2.sec-title{font-family:'Bitter',serif; font-weight:700; font-size:1.7rem; margin:4px 0 12px;}\n  .tea-vocab-embed .sec-sub{color:var(--tve-ink-soft); font-size:1rem; max-width:800px; margin-bottom:20px;}\n\n  \/* \u7db2\u683c\u5361\u7247\u6392\u7248 *\/\n  .tea-vocab-embed .grid {\n    display:grid; \n    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); \n    gap:16px; \n    margin-top:8px;\n  }\n  .tea-vocab-embed .card {\n    border:1px solid var(--tve-rule); \n    border-radius:12px; \n    padding:16px 20px; \n    background:#fff;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.02);\n    display: flex;\n    flex-direction: column;\n  }\n  .tea-vocab-embed .card .hz {\n    display:block; \n    font-size:1.15rem; \n    margin-bottom:6px;\n  }\n  .tea-vocab-embed .card .en {\n    color:var(--tve-ink-soft); \n    font-size:.9rem; \n    display:block;\n  }\n  .tea-vocab-embed .card .desc {\n    font-size: 0.85rem;\n    color: var(--tve-ink-soft);\n    margin-top: 8px;\n    padding-top: 8px;\n    border-top: 1px dashed var(--tve-rule);\n  }\n  .tea-vocab-embed .card img {\n    width: 100%;\n    height: 120px;\n    object-fit: cover;\n    border-radius: 8px;\n    margin-top: 12px;\n  }\n\n  \/* \u5be6\u7528\u53e5\u5361\u7247 *\/\n  .tea-vocab-embed .phrase-card {\n    border-left:4px solid var(--tve-oxblood); background:var(--tve-bone); border-radius:0 12px 12px 0;\n    padding:16px 20px; margin-bottom:14px;\n  }\n  .tea-vocab-embed .phrase-card .hz{font-size:1.15rem; display:block;}\n  .tea-vocab-embed .phrase-card .en{color:var(--tve-ink-soft); margin-top:8px; font-size:.9rem; display:block;}\n\n  \/* Callout \u5340\u584a *\/\n  .tea-vocab-embed .callout {\n    background:var(--tve-bone); border:1px solid var(--tve-bone-line); border-radius:16px; padding:26px 28px;\n    display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start;\n    margin-bottom: 20px;\n  }\n  @media (max-width:600px){ .tea-vocab-embed .callout{grid-template-columns:1fr;} }\n  .tea-vocab-embed .callout .icon {font-size:2.2rem; line-height:1;}\n  .tea-vocab-embed .callout h3 {margin:0 0 8px; font-family:'Bitter',serif; font-size:1.15rem; color:var(--tve-oxblood-dark);}\n  .tea-vocab-embed .callout p {margin:0 0 10px; color:var(--tve-ink-soft); font-size:.94rem;}\n  .tea-vocab-embed .callout p:last-child {margin-bottom:0;}\n\n  \/* \u6c27\u5316\u5149\u8b5c (Oxidation Spectrum) *\/\n  .tea-vocab-embed .spectrum-track {\n    display: flex;\n    border-radius: 8px;\n    overflow: hidden;\n    margin: 16px 0 24px;\n  }\n  .tea-vocab-embed .spectrum-seg {\n    flex: 1;\n    padding: 16px 8px;\n    text-align: center;\n    color: #fff;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n  }\n  .tea-vocab-embed .spectrum-seg .hz { font-size: 1.1rem; font-weight: bold; margin-bottom: 4px; }\n  .tea-vocab-embed .spectrum-seg rt { color: #ffffff !important; opacity: 0.9; font-size: 0.6rem; letter-spacing: 0; }\n  .tea-vocab-embed .spectrum-seg .en { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.9; margin-top: 4px; }\n  @media (max-width:600px){ \n    .tea-vocab-embed .spectrum-track { flex-direction: column; }\n    .tea-vocab-embed .spectrum-seg { padding: 12px; }\n  }\n\n  \/* \u751c\u5ea6\u51b0\u584a \u9ede\u9ede\u8a2d\u8a08 UI *\/\n  .tea-vocab-embed .level-track {\n    display: flex; align-items: flex-start; gap: 28px; overflow-x: auto; padding: 12px 6px 16px; margin: 16px 0; position: relative; scrollbar-width: thin;\n  }\n  .tea-vocab-embed .level-point {\n    flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 70px; position: relative;\n  }\n  .tea-vocab-embed .level-dots { display: flex; gap: 4px; margin-bottom: 4px; }\n  .tea-vocab-embed .dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--tve-sage); background: transparent; }\n  .tea-vocab-embed .dot.filled { background: var(--tve-sage); }\n  .tea-vocab-embed .level-point .zh { display: flex; align-items: center; justify-content: center; gap: 4px; font-family: 'Noto Serif TC', serif; font-weight: 600; font-size: 1.1rem; color: var(--tve-ink); }\n  .tea-vocab-embed .level-point .en { font-size: 0.85rem; color: var(--tve-ink-soft); white-space: nowrap; }\n\n<\/style>\n\n<header class=\"hero\">\n  <div class=\"wrap\">\n    <div class=\"eyebrow\">Food Vocabulary<\/div>\n    <h1 class=\"title\">\n      <span class=\"lang-zh-TW\">\u8336\u6587\u5316<\/span><span class=\"lang-zh-CN\">\u8336\u6587\u5316<\/span>\n      <span class=\"en\">Tea in Chinese<\/span>\n    <\/h1>\n    <img decoding=\"async\" class=\"hero-img\" src=\"https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2026\/08\/\u8336\u9928.png\" alt=\"Chinese Tea House\">\n    <p class=\"dek\">One character\u2014<span class=\"lang-zh-TW\">\u8336<\/span><span class=\"lang-zh-CN\">\u8336<\/span> (ch\u00e1)\u2014covers everything from a grandmother&#8217;s afternoon pot of oolong to a plastic cup of bubble tea shaken to order on a street corner. This guide walks through both worlds: the traditional tea art and the vocabulary you&#8217;ll need to order your favorite modern drinks.<\/p>\n  <\/div>\n<\/header>\n\n<section id=\"famous-teas\">\n  <div class=\"wrap\">\n    <div class=\"sec-head\">\n      <div class=\"sec-num\">01 \u2014 <span class=\"lang-zh-TW\">\u540d\u8336<\/span><span class=\"lang-zh-CN\">\u540d\u8336<\/span><\/div>\n      <h2 class=\"sec-title\"><span class=\"ez-toc-section\" id=\"Famous_Teas\"><\/span>Famous Teas<span class=\"ez-toc-section-end\"><\/span><\/h2>\n      <p class=\"sec-sub\">A handful of teas that Taiwan and China are each especially known for.<\/p>\n    <\/div>\n    \n    <h3 style=\"font-family:'Bitter',serif; font-size:1.3rem; color:var(--tve-oxblood); margin-bottom:12px;\">Taiwan Teas<\/h3>\n    <div class=\"grid\" id=\"taiwanTeaGrid\"><\/div>\n\n    <h3 style=\"font-family:'Bitter',serif; font-size:1.3rem; color:var(--tve-oxblood); margin: 36px 0 12px;\">Mainland China Teas<\/h3>\n    <div class=\"grid\" id=\"chinaTeaGrid\"><\/div>\n  <\/div>\n<\/section>\n\n<section id=\"tea-oxidation\">\n  <div class=\"wrap\">\n    <div class=\"sec-head\">\n      <div class=\"sec-num\">02 \u2014 <ruby class=\"lang-zh-TW\"><span class=\"rb\">\u8336\u7684\u5206\u985e<\/span><rt>ch\u00e1 de f\u0113nl\u00e8i<\/rt><\/ruby><ruby class=\"lang-zh-CN\"><span class=\"rb\">\u8336\u7684\u5206\u7c7b<\/span><rt>ch\u00e1 de f\u0113nl\u00e8i<\/rt><\/ruby><\/div>\n      <h2 class=\"sec-title\"><span class=\"ez-toc-section\" id=\"How_Tea_Is_Categorized\"><\/span>How Tea Is Categorized<span class=\"ez-toc-section-end\"><\/span><\/h2>\n      <p class=\"sec-sub\">Green, white, oolong, black \u2014 they can all come from the exact same tea plant. What separates them is how much the leaves are allowed to oxidize (<ruby class=\"lang-zh-TW\"><span class=\"rb\">\u767c\u9175<\/span><rt>f\u0101xi\u00e0o<\/rt><\/ruby><ruby class=\"lang-zh-CN\"><span class=\"rb\">\u53d1\u9175<\/span><rt>f\u0101ji\u00e0o<\/rt><\/ruby>) after picking.<\/p>\n    <\/div>\n\n    <div class=\"spectrum-track\">\n      <div class=\"spectrum-seg\" style=\"background:#7a9463\">\n        <span class=\"hz\"><ruby class=\"lang-zh-TW\"><span class=\"rb\">\u7da0\u8336<\/span><rt>l\u01dcch\u00e1<\/rt><\/ruby><ruby class=\"lang-zh-CN\"><span class=\"rb\">\u7eff\u8336<\/span><rt>l\u01dcch\u00e1<\/rt><\/ruby><\/span>\n        <span class=\"en\">Green (0%)<\/span>\n      <\/div>\n      <div class=\"spectrum-seg\" style=\"background:#a3a069\">\n        <span class=\"hz\"><ruby class=\"lang-zh-TW\"><span class=\"rb\">\u767d\u8336<\/span><rt>b\u00e1ich\u00e1<\/rt><\/ruby><ruby class=\"lang-zh-CN\"><span class=\"rb\">\u767d\u8336<\/span><rt>b\u00e1ich\u00e1<\/rt><\/ruby><\/span>\n        <span class=\"en\">White (~5%)<\/span>\n      <\/div>\n      <div class=\"spectrum-seg\" style=\"background:#c2a35a\">\n        <span class=\"hz\"><ruby class=\"lang-zh-TW\"><span class=\"rb\">\u9ec3\u8336<\/span><rt>hu\u00e1ngch\u00e1<\/rt><\/ruby><ruby class=\"lang-zh-CN\"><span class=\"rb\">\u9ec4\u8336<\/span><rt>hu\u00e1ngch\u00e1<\/rt><\/ruby><\/span>\n        <span class=\"en\">Yellow (~10%)<\/span>\n      <\/div>\n      <div class=\"spectrum-seg\" style=\"background:#c07f3f\">\n        <span class=\"hz\"><ruby class=\"lang-zh-TW\"><span class=\"rb\">\u70cf\u9f8d\u8336<\/span><rt>w\u016bl\u00f3ngch\u00e1<\/rt><\/ruby><ruby class=\"lang-zh-CN\"><span class=\"rb\">\u4e4c\u9f99\u8336<\/span><rt>w\u016bl\u00f3ngch\u00e1<\/rt><\/ruby><\/span>\n        <span class=\"en\">Oolong (10-70%)<\/span>\n      <\/div>\n      <div class=\"spectrum-seg\" style=\"background:#a5442f\">\n        <span class=\"hz\"><ruby class=\"lang-zh-TW\"><span class=\"rb\">\u7d05\u8336<\/span><rt>h\u00f3ngch\u00e1<\/rt><\/ruby><ruby class=\"lang-zh-CN\"><span class=\"rb\">\u7ea2\u8336<\/span><rt>h\u00f3ngch\u00e1<\/rt><\/ruby><\/span>\n        <span class=\"en\">Black (100%)<\/span>\n      <\/div>\n      <div class=\"spectrum-seg\" style=\"background:#3d332c\">\n        <span class=\"hz\"><ruby class=\"lang-zh-TW\"><span class=\"rb\">\u9ed1\u8336<\/span><rt>h\u0113ich\u00e1<\/rt><\/ruby><ruby class=\"lang-zh-CN\"><span class=\"rb\">\u9ed1\u8336<\/span><rt>h\u0113ich\u00e1<\/rt><\/ruby><\/span>\n        <span class=\"en\">Post-fermented<\/span>\n      <\/div>\n    <\/div>\n\n    <div class=\"callout\">\n      <div class=\"icon\">\ud83c\udf43<\/div>\n      <div>\n        <h3>The same plant, six different results<\/h3>\n        <p><ruby class=\"lang-zh-TW\"><span class=\"rb\">\u7da0\u8336<\/span><rt>l\u01dcch\u00e1<\/rt><\/ruby><ruby class=\"lang-zh-CN\"><span class=\"rb\">\u7eff\u8336<\/span><rt>l\u01dcch\u00e1<\/rt><\/ruby> (Green tea) is heated right after picking, which stops oxidation entirely \u2014 keeping it grassy and fresh. <ruby class=\"lang-zh-TW\"><span class=\"rb\">\u7d05\u8336<\/span><rt>h\u00f3ngch\u00e1<\/rt><\/ruby><ruby class=\"lang-zh-CN\"><span class=\"rb\">\u7ea2\u8336<\/span><rt>h\u00f3ngch\u00e1<\/rt><\/ruby> (Black tea) is fully oxidized before drying, turning the leaves dark and the flavor malty. <ruby class=\"lang-zh-TW\"><span class=\"rb\">\u70cf\u9f8d\u8336<\/span><rt>w\u016bl\u00f3ngch\u00e1<\/rt><\/ruby><ruby class=\"lang-zh-CN\"><span class=\"rb\">\u4e4c\u9f99\u8336<\/span><rt>w\u016bl\u00f3ngch\u00e1<\/rt><\/ruby> (Oolong) sits in between, ranging from nearly green to nearly black. <ruby class=\"lang-zh-TW\"><span class=\"rb\">\u9ed1\u8336<\/span><rt>h\u0113ich\u00e1<\/rt><\/ruby><ruby class=\"lang-zh-CN\"><span class=\"rb\">\u9ed1\u8336<\/span><rt>h\u0113ich\u00e1<\/rt><\/ruby> (Dark tea), like Pu-erh, is fermented by microbes after drying, much like aging cheese or wine.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<section id=\"foreign-teas\">\n  <div class=\"wrap\">\n    <div class=\"sec-head\">\n      <div class=\"sec-num\">03 \u2014 <span class=\"lang-zh-TW\">\u5916\u570b\u8336<\/span><span class=\"lang-zh-CN\">\u5916\u56fd\u8336<\/span><\/div>\n      <h2 class=\"sec-title\"><span class=\"ez-toc-section\" id=\"Foreign_Teas\"><\/span>Foreign Teas<span class=\"ez-toc-section-end\"><\/span><\/h2>\n      <p class=\"sec-sub\">Caf\u00e9 menus in Taiwan and China carry plenty of familiar foreign teas too.<\/p>\n    <\/div>\n    <div class=\"grid\" id=\"foreignTeaGrid\"><\/div>\n  <\/div>\n<\/section>\n\n<section id=\"bubble-tea\">\n  <div class=\"wrap\">\n    <div class=\"sec-head\">\n      <div class=\"sec-num\">04 \u2014 <span class=\"lang-zh-TW\">\u624b\u6416\u98f2<\/span><span class=\"lang-zh-CN\">\u624b\u6447\u996e<\/span><\/div>\n      <h2 class=\"sec-title\"><span class=\"ez-toc-section\" id=\"Bubble_Tea_Toppings\"><\/span>Bubble Tea &#038; Toppings<span class=\"ez-toc-section-end\"><\/span><\/h2>\n      <p class=\"sec-sub\">Literally &#8220;hand-shaken drink&#8221; (<span class=\"lang-zh-TW\">\u624b\u6416\u98f2<\/span><span class=\"lang-zh-CN\">\u624b\u6447\u996e<\/span> sh\u01d2uy\u00e1oy\u01d0n). The counter staff will expect you to specify your toppings, sugar, and ice levels.<\/p>\n    <\/div>\n    <div class=\"grid\" id=\"toppingsGrid\"><\/div>\n\n    <h3 style=\"font-family:'Bitter',serif; font-size:1.2rem; color:var(--tve-oxblood); margin-top:36px;\">Sugar Level (<span class=\"lang-zh-TW\">\u751c\u5ea6<\/span><span class=\"lang-zh-CN\">\u751c\u5ea6<\/span>)<\/h3>\n    <div class=\"level-track\">\n      <div class=\"level-point\">\n        <div class=\"level-dots\"><span class=\"dot filled\"><\/span><span class=\"dot filled\"><\/span><span class=\"dot filled\"><\/span><span class=\"dot filled\"><\/span><\/div>\n        <div class=\"zh\">\n          <ruby class=\"lang-zh-TW\"><span class=\"rb\">\u5168\u7cd6<\/span><rt>qu\u00e1nt\u00e1ng<\/rt><\/ruby>\n          <ruby class=\"lang-zh-CN\"><span class=\"rb\">\u5168\u7cd6<\/span><rt>qu\u00e1nt\u00e1ng<\/rt><\/ruby>\n          <button type=\"button\" class=\"say\" data-trad=\"\u5168\u7cd6\" data-simp=\"\u5168\u7cd6\" aria-label=\"Play pronunciation\">\ud83d\udd0a<\/button>\n        <\/div>\n        <div class=\"en\">100% sugar<\/div>\n      <\/div>\n      <div class=\"level-point\">\n        <div class=\"level-dots\"><span class=\"dot filled\"><\/span><span class=\"dot filled\"><\/span><span class=\"dot filled\"><\/span><span class=\"dot\"><\/span><\/div>\n        <div class=\"zh\">\n          <ruby class=\"lang-zh-TW\"><span class=\"rb\">\u5c11\u7cd6<\/span><rt>sh\u01ceot\u00e1ng<\/rt><\/ruby>\n          <ruby class=\"lang-zh-CN\"><span class=\"rb\">\u5c11\u7cd6<\/span><rt>sh\u01ceot\u00e1ng<\/rt><\/ruby>\n          <button type=\"button\" class=\"say\" data-trad=\"\u5c11\u7cd6\" data-simp=\"\u5c11\u7cd6\" aria-label=\"Play pronunciation\">\ud83d\udd0a<\/button>\n        <\/div>\n        <div class=\"en\">70% sugar<\/div>\n      <\/div>\n      <div class=\"level-point\">\n        <div class=\"level-dots\"><span class=\"dot filled\"><\/span><span class=\"dot filled\"><\/span><span class=\"dot\"><\/span><span class=\"dot\"><\/span><\/div>\n        <div class=\"zh\">\n          <ruby class=\"lang-zh-TW\"><span class=\"rb\">\u534a\u7cd6<\/span><rt>b\u00e0nt\u00e1ng<\/rt><\/ruby>\n          <ruby class=\"lang-zh-CN\"><span class=\"rb\">\u534a\u7cd6<\/span><rt>b\u00e0nt\u00e1ng<\/rt><\/ruby>\n          <button type=\"button\" class=\"say\" data-trad=\"\u534a\u7cd6\" data-simp=\"\u534a\u7cd6\" aria-label=\"Play pronunciation\">\ud83d\udd0a<\/button>\n        <\/div>\n        <div class=\"en\">50% sugar<\/div>\n      <\/div>\n      <div class=\"level-point\">\n        <div class=\"level-dots\"><span class=\"dot filled\"><\/span><span class=\"dot\"><\/span><span class=\"dot\"><\/span><span class=\"dot\"><\/span><\/div>\n        <div class=\"zh\">\n          <!-- \u5fae\u5b57\u62fc\u97f3\u7e41\u7c21\u4e0d\u540c -->\n          <ruby class=\"lang-zh-TW\"><span class=\"rb\">\u5fae\u7cd6<\/span><rt>w\u00e9it\u00e1ng<\/rt><\/ruby>\n          <ruby class=\"lang-zh-CN\"><span class=\"rb\">\u5fae\u7cd6<\/span><rt>w\u0113it\u00e1ng<\/rt><\/ruby>\n          <button type=\"button\" class=\"say\" data-trad=\"\u5fae\u7cd6\" data-simp=\"\u5fae\u7cd6\" aria-label=\"Play pronunciation\">\ud83d\udd0a<\/button>\n        <\/div>\n        <div class=\"en\">30% sugar<\/div>\n      <\/div>\n      <div class=\"level-point\">\n        <div class=\"level-dots\"><span class=\"dot\"><\/span><span class=\"dot\"><\/span><span class=\"dot\"><\/span><span class=\"dot\"><\/span><\/div>\n        <div class=\"zh\">\n          <ruby class=\"lang-zh-TW\"><span class=\"rb\">\u7121\u7cd6<\/span><rt>w\u00fat\u00e1ng<\/rt><\/ruby>\n          <ruby class=\"lang-zh-CN\"><span class=\"rb\">\u65e0\u7cd6<\/span><rt>w\u00fat\u00e1ng<\/rt><\/ruby>\n          <button type=\"button\" class=\"say\" data-trad=\"\u7121\u7cd6\" data-simp=\"\u65e0\u7cd6\" aria-label=\"Play pronunciation\">\ud83d\udd0a<\/button>\n        <\/div>\n        <div class=\"en\">0% sugar<\/div>\n      <\/div>\n    <\/div>\n\n    <h3 style=\"font-family:'Bitter',serif; font-size:1.2rem; color:var(--tve-oxblood); margin-top:20px;\">Ice Level (<span class=\"lang-zh-TW\">\u51b0\u584a<\/span><span class=\"lang-zh-CN\">\u51b0\u5757<\/span>)<\/h3>\n    <div class=\"level-track\">\n      <div class=\"level-point\">\n        <div class=\"level-dots\"><span class=\"dot filled\"><\/span><span class=\"dot filled\"><\/span><span class=\"dot filled\"><\/span><\/div>\n        <div class=\"zh\">\n          <ruby class=\"lang-zh-TW\"><span class=\"rb\">\u6b63\u5e38\u51b0<\/span><rt>zh\u00e8ngch\u00e1ng b\u012bng<\/rt><\/ruby>\n          <ruby class=\"lang-zh-CN\"><span class=\"rb\">\u6b63\u5e38\u51b0<\/span><rt>zh\u00e8ngch\u00e1ng b\u012bng<\/rt><\/ruby>\n          <button type=\"button\" class=\"say\" data-trad=\"\u6b63\u5e38\u51b0\" data-simp=\"\u6b63\u5e38\u51b0\" aria-label=\"Play pronunciation\">\ud83d\udd0a<\/button>\n        <\/div>\n        <div class=\"en\">Regular ice<\/div>\n      <\/div>\n      <div class=\"level-point\">\n        <div class=\"level-dots\"><span class=\"dot filled\"><\/span><span class=\"dot filled\"><\/span><span class=\"dot\"><\/span><\/div>\n        <div class=\"zh\">\n          <ruby class=\"lang-zh-TW\"><span class=\"rb\">\u5c11\u51b0<\/span><rt>sh\u01ceob\u012bng<\/rt><\/ruby>\n          <ruby class=\"lang-zh-CN\"><span class=\"rb\">\u5c11\u51b0<\/span><rt>sh\u01ceob\u012bng<\/rt><\/ruby>\n          <button type=\"button\" class=\"say\" data-trad=\"\u5c11\u51b0\" data-simp=\"\u5c11\u51b0\" aria-label=\"Play pronunciation\">\ud83d\udd0a<\/button>\n        <\/div>\n        <div class=\"en\">Less ice<\/div>\n      <\/div>\n      <div class=\"level-point\">\n        <div class=\"level-dots\"><span class=\"dot filled\"><\/span><span class=\"dot\"><\/span><span class=\"dot\"><\/span><\/div>\n        <div class=\"zh\">\n          <!-- \u5fae\u5b57\u62fc\u97f3\u7e41\u7c21\u4e0d\u540c -->\n          <ruby class=\"lang-zh-TW\"><span class=\"rb\">\u5fae\u51b0<\/span><rt>w\u00e9ib\u012bng<\/rt><\/ruby>\n          <ruby class=\"lang-zh-CN\"><span class=\"rb\">\u5fae\u51b0<\/span><rt>w\u0113ib\u012bng<\/rt><\/ruby>\n          <button type=\"button\" class=\"say\" data-trad=\"\u5fae\u51b0\" data-simp=\"\u5fae\u51b0\" aria-label=\"Play pronunciation\">\ud83d\udd0a<\/button>\n        <\/div>\n        <div class=\"en\">A little ice<\/div>\n      <\/div>\n      <div class=\"level-point\">\n        <div class=\"level-dots\"><span class=\"dot\"><\/span><span class=\"dot\"><\/span><span class=\"dot\"><\/span><\/div>\n        <div class=\"zh\">\n          <ruby class=\"lang-zh-TW\"><span class=\"rb\">\u53bb\u51b0<\/span><rt>q\u00f9b\u012bng<\/rt><\/ruby>\n          <ruby class=\"lang-zh-CN\"><span class=\"rb\">\u53bb\u51b0<\/span><rt>q\u00f9b\u012bng<\/rt><\/ruby>\n          <button type=\"button\" class=\"say\" data-trad=\"\u53bb\u51b0\" data-simp=\"\u53bb\u51b0\" aria-label=\"Play pronunciation\">\ud83d\udd0a<\/button>\n        <\/div>\n        <div class=\"en\">No ice<\/div>\n      <\/div>\n    <\/div>\n\n    <div id=\"bobaOrderingSentences\" style=\"margin-top: 24px;\"><\/div>\n  <\/div>\n<\/section>\n\n<section id=\"tea-culture\">\n  <div class=\"wrap\">\n    <div class=\"sec-head\">\n      <div class=\"sec-num\">05 \u2014 <span class=\"lang-zh-TW\">\u5b78\u6ce1\u8336<\/span><span class=\"lang-zh-CN\">\u5b66\u6ce1\u8336<\/span><\/div>\n      <h2 class=\"sec-title\"><span class=\"ez-toc-section\" id=\"Learning_to_Brew_Culture\"><\/span>Learning to Brew &#038; Culture<span class=\"ez-toc-section-end\"><\/span><\/h2>\n    <\/div>\n    <div class=\"grid\" id=\"brewGrid\" style=\"margin-bottom: 30px;\"><\/div>\n\n    <div class=\"callout\">\n      <div class=\"icon\">\ud83e\uded6<\/div>\n      <div>\n        <h3>Kung Fu Tea isn&#8217;t Martial Arts (<span class=\"lang-zh-TW\">\u5de5\u592b\u8336<\/span><span class=\"lang-zh-CN\">\u5de5\u592b\u8336<\/span>)<\/h3>\n        <p>The term <span class=\"lang-zh-TW\">\u5de5\u592b<\/span><span class=\"lang-zh-CN\">\u5de5\u592b<\/span> (g\u014dngfu) here doesn&#8217;t mean fighting! It literally translates to &#8220;time and effort.&#8221; Gongfu tea refers to the traditional, meticulous process of brewing tea in small clay teapots with multiple short infusions, maximizing the flavor profile of the leaves.<\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"callout\">\n      <div class=\"icon\">\ud83d\udc38<\/div>\n      <div>\n        <h3>Tea Pets (<span class=\"lang-zh-TW\">\u8336\u5bf5<\/span><span class=\"lang-zh-CN\">\u8336\u5ba0<\/span>)<\/h3>\n        <p>When you visit a traditional tea house, you might notice small clay animal figures on the tea tray. These are &#8220;Tea Pets&#8221; (<span class=\"lang-zh-TW\">\u8336\u5bf5<\/span><span class=\"lang-zh-CN\">\u8336\u5ba0<\/span> ch\u00e1ch\u01d2ng). It&#8217;s a fun tradition to pour leftover hot tea or the first steep over them for good luck and to season the clay.<\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"callout\">\n      <div class=\"icon\">\ud83c\udf75<\/div>\n      <div>\n        <h3>Start on Yongkang Street (<span class=\"lang-zh-TW\">\u6c38\u5eb7\u8857<\/span><span class=\"lang-zh-CN\">\u6c38\u5eb7\u8857<\/span>)<\/h3>\n        <p>If you&#8217;re in Taipei and want to actually sit down and learn, Yongkang Street is the classic starting point. It&#8217;s a small, walkable neighborhood dense with tea houses that run short brewing lessons for visitors. It&#8217;s an easy way to go from just ordering tea to understanding water temperature and steeping time.<\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"callout\">\n      <div class=\"icon\">\ud83d\udd70\ufe0f<\/div>\n      <div>\n        <h3>The Idiom: <span class=\"lang-zh-TW\">\u8336\u9918\u98ef\u5f8c<\/span><span class=\"lang-zh-CN\">\u8336\u4f59\u996d\u540e<\/span> (ch\u00e1y\u00fa f\u00e0nh\u00f2u)<\/h3>\n        <p>Literally &#8220;after tea and after rice&#8221; \u2014 this idiom describes the unhurried stretch of leisure time after a meal, when people gather around to drink tea, chat, and gossip.<\/p>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n(function(){\nfunction ruby(han, py, cls){ return `<ruby class=\"${cls}\"><span class=\"rb\">${han}<\/span><rt>${py}<\/rt><\/ruby>`; }\nfunction bilingualTerm(t){\n  return ruby(t.trad, t.tradPy, \"lang-zh-TW\") + ruby(t.simp, t.simpPy, \"lang-zh-CN\");\n}\nfunction bilingualSentence(s){\n  const trad = s.tradWords.map(([h,p]) => p ? ruby(h,p,\"lang-zh-TW\") : `<span class=\"lang-zh-TW\">${h}<\/span>`).join(\"\");\n  const simp = s.simpWords.map(([h,p]) => p ? ruby(h,p,\"lang-zh-CN\") : `<span class=\"lang-zh-CN\">${h}<\/span>`).join(\"\");\n  return trad + simp;\n}\n\nconst root = document.getElementById('tea-vocab-embed-1');\nif(!root) return;\n\nfunction getCookie(name){\n  const m = document.cookie.match(new RegExp('(?:^|; )' + name.replace(\/[-.*+?^${}()|[\\]\\\\]\/g, '\\\\$&') + '=([^;]*)'));\n  return m ? decodeURIComponent(m[1]) : undefined;\n}\n\nfunction speak(trad, simp){\n  if(!('speechSynthesis' in window)) return;\n  const isSimp = getCookie('lang_zh-TW') === '0';\n  const text = isSimp ? simp : trad;\n  const u = new SpeechSynthesisUtterance(text);\n  u.lang = isSimp ? 'zh-CN' : 'zh-TW';\n  speechSynthesis.cancel();\n  speechSynthesis.speak(u);\n}\nfunction sayBtn(trad, simp){\n  return `<button type=\"button\" class=\"say\" data-trad=\"${trad}\" data-simp=\"${simp}\" aria-label=\"Play pronunciation\">\ud83d\udd0a<\/button>`;\n}\n\nroot.addEventListener('click', function(e){\n  const btn = e.target.closest('button.say');\n  if(btn){\n    speak(btn.dataset.trad, btn.dataset.simp);\n  }\n});\n\nfunction applySiteLanguagePrefs(){\n  const isSimplified = getCookie('lang_zh-TW') === '0';\n  const hideClass = isSimplified ? 'lang-zh-TW' : 'lang-zh-CN';\n  const showClass = isSimplified ? 'lang-zh-CN' : 'lang-zh-TW';\n\n  root.querySelectorAll('.' + hideClass).forEach(el => {\n    el.style.display = 'none';\n  });\n  root.querySelectorAll('.' + showClass).forEach(el => {\n    el.style.display = '';\n  });\n\n  const pinyinPref = getCookie('pinyin-display');\n  if(pinyinPref === 'hidden' || pinyinPref === 'mouseover'){\n    root.querySelectorAll('rt').forEach(rt => rt.classList.add(pinyinPref));\n  }\n}\n\n\/\/ Data Arrays\nconst famousTeasTaiwanData = [\n  {trad:\"\u51cd\u9802\u70cf\u9f8d\u8336\", tradPy:\"d\u00f2ngd\u01d0ng w\u016bl\u00f3ngch\u00e1\", simp:\"\u51bb\u9876\u4e4c\u9f99\u8336\", simpPy:\"d\u00f2ngd\u01d0ng w\u016bl\u00f3ngch\u00e1\", en:\"Dong Ding Oolong\", desc:\"Medium roasted, smooth & toasty.\"},\n  {trad:\"\u963f\u91cc\u5c71\u9ad8\u5c71\u8336\", tradPy:\"\u0101l\u01d0sh\u0101n g\u0101osh\u0101nch\u00e1\", simp:\"\u963f\u91cc\u5c71\u9ad8\u5c71\u8336\", simpPy:\"\u0101l\u01d0sh\u0101n g\u0101osh\u0101nch\u00e1\", en:\"Alishan High Mountain\", desc:\"Grown at high altitude, floral & creamy.\"},\n  {trad:\"\u6771\u65b9\u7f8e\u4eba\u8336\", tradPy:\"d\u014dngf\u0101ng m\u011bir\u00e9nch\u00e1\", simp:\"\u4e1c\u65b9\u7f8e\u4eba\u8336\", simpPy:\"d\u014dngf\u0101ng m\u011bir\u00e9nch\u00e1\", en:\"Oriental Beauty\", desc:\"Bitten by leafhoppers, naturally sweet.\"},\n  {trad:\"\u6587\u5c71\u5305\u7a2e\u8336\", tradPy:\"w\u00e9nsh\u0101n b\u0101ozh\u01d2ngch\u00e1\", simp:\"\u6587\u5c71\u5305\u79cd\u8336\", simpPy:\"w\u00e9nsh\u0101n b\u0101ozh\u01d2ngch\u00e1\", en:\"Wenshan Baozhong\", desc:\"Barely oxidized, highly floral.\"},\n  {trad:\"\u65e5\u6708\u6f6d\u7d05\u8336\", tradPy:\"r\u00ecyu\u00e8t\u00e1n h\u00f3ngch\u00e1\", simp:\"\u65e5\u6708\u6f6d\u7ea2\u8336\", simpPy:\"r\u00ecyu\u00e8t\u00e1n h\u00f3ngch\u00e1\", en:\"Sun Moon Lake Black\", desc:\"Malty and full-bodied.\"}\n];\n\nconst famousTeasChinaData = [\n  {trad:\"\u897f\u6e56\u9f8d\u4e95\", tradPy:\"x\u012bh\u00fa l\u00f3ngj\u01d0ng\", simp:\"\u897f\u6e56\u9f99\u4e95\", simpPy:\"x\u012bh\u00fa l\u00f3ngj\u01d0ng\", en:\"West Lake Dragon Well\", desc:\"Flat leaves, chestnut-like taste.\"},\n  {trad:\"\u5b89\u6eaa\u9435\u89c0\u97f3\", tradPy:\"\u0101nx\u012b ti\u011bgu\u0101ny\u012bn\", simp:\"\u5b89\u6eaa\u94c1\u89c2\u97f3\", simpPy:\"\u0101nx\u012b ti\u011bgu\u0101ny\u012bn\", en:\"Anxi Tieguanyin\", desc:\"Rolled oolong with an orchid scent.\"},\n  {trad:\"\u666e\u6d31\u8336\", tradPy:\"p\u01d4'\u011brch\u00e1\", simp:\"\u666e\u6d31\u8336\", simpPy:\"p\u01d4'\u011brch\u00e1\", en:\"Pu-erh\", desc:\"Earthy, deep, and meant to age.\"},\n  {trad:\"\u78a7\u87ba\u6625\", tradPy:\"b\u00eclu\u00f3ch\u016bn\", simp:\"\u78a7\u87ba\u6625\", simpPy:\"b\u00eclu\u00f3ch\u016bn\", en:\"Biluochun\", desc:\"Tightly curled, fruity green tea.\"},\n  {trad:\"\u5927\u7d05\u888d\", tradPy:\"d\u00e0h\u00f3ngp\u00e1o\", simp:\"\u5927\u7ea2\u888d\", simpPy:\"d\u00e0h\u00f3ngp\u00e1o\", en:\"Big Red Robe\", desc:\"Heavily roasted 'rock tea', mineral taste.\"}\n];\n\nconst foreignTeasData = [\n  {trad:\"\u4f2f\u7235\u8336\", tradPy:\"b\u00f3ju\u00e9ch\u00e1\", simp:\"\u4f2f\u7235\u8336\", simpPy:\"b\u00f3ju\u00e9ch\u00e1\", en:\"Earl Grey\"},\n  {trad:\"\u82f1\u5f0f\u65e9\u9910\u8336\", tradPy:\"y\u012bngsh\u00ec z\u01ceoc\u0101nch\u00e1\", simp:\"\u82f1\u5f0f\u65e9\u9910\u8336\", simpPy:\"y\u012bngsh\u00ec z\u01ceoc\u0101nch\u00e1\", en:\"English Breakfast\"},\n  {trad:\"\u6d0b\u7518\u83ca\u8336\", tradPy:\"y\u00e1ngg\u0101nj\u00fach\u00e1\", simp:\"\u6d0b\u7518\u83ca\u8336\", simpPy:\"y\u00e1ngg\u0101nj\u00fach\u00e1\", en:\"Chamomile\"},\n  {trad:\"\u8584\u8377\u8336\", tradPy:\"b\u00f2h\u00e9ch\u00e1\", simp:\"\u8584\u8377\u8336\", simpPy:\"b\u00f2h\u00e9ch\u00e1\", en:\"Peppermint\"},\n  {trad:\"\u6d1b\u795e\u82b1\u8336\", tradPy:\"lu\u00f2sh\u00e9nhu\u0101ch\u00e1\", simp:\"\u6d1b\u795e\u82b1\u8336\", simpPy:\"lu\u00f2sh\u00e9nhu\u0101ch\u00e1\", en:\"Hibiscus\"},\n  {trad:\"\u5357\u975e\u570b\u5bf6\u8336\", tradPy:\"n\u00e1nf\u0113i gu\u00f3b\u01ceoch\u00e1\", simp:\"\u5357\u975e\u56fd\u5b9d\u8336\", simpPy:\"n\u00e1nf\u0113i gu\u00f3b\u01ceoch\u00e1\", en:\"Rooibos\"},\n  {trad:\"\u7119\u8336\", tradPy:\"b\u00e8ich\u00e1\", simp:\"\u7119\u8336\", simpPy:\"b\u00e8ich\u00e1\", en:\"Hojicha\"},\n  {trad:\"\u62b9\u8336\", tradPy:\"m\u01d2ch\u00e1\", simp:\"\u62b9\u8336\", simpPy:\"m\u01d2ch\u00e1\", en:\"Matcha\"}\n];\n\nconst toppingsData = [\n  {trad:\"\u6ce2\u9738\", tradPy:\"b\u014db\u00e0\", simp:\"\u6ce2\u9738\", simpPy:\"b\u014db\u00e0\", en:\"Large boba pearls\", img:\"https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2026\/08\/\u6ce2\u9738.png\"},\n  {trad:\"\u5c0f\u73cd\u73e0\", tradPy:\"xi\u01ceo zh\u0113nzh\u016b\", simp:\"\u5c0f\u73cd\u73e0\", simpPy:\"xi\u01ceo zh\u0113nzh\u016b\", en:\"Mini pearls\", img:\"https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2026\/08\/\u5c0f\u73cd\u73e0.png\"},\n  {trad:\"\u5e03\u4e01\", tradPy:\"b\u00f9d\u012bng\", simp:\"\u5e03\u4e01\", simpPy:\"b\u00f9d\u012bng\", en:\"Pudding\", img:\"https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2026\/08\/\u5e03\u4e01.png\"},\n  {trad:\"\u4ed9\u8349\", tradPy:\"xi\u0101nc\u01ceo\", simp:\"\u4ed9\u8349\", simpPy:\"xi\u0101nc\u01ceo\", en:\"Grass jelly\", img:\"https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2026\/08\/\u4ed9\u8349.png\"},\n  {trad:\"\u6930\u679c\", tradPy:\"y\u0113gu\u01d2\", simp:\"\u6930\u679c\", simpPy:\"y\u0113gu\u01d2\", en:\"Coconut jelly\", img:\"https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2026\/08\/\u6930\u679c.png\"},\n  {trad:\"\u611b\u7389\", tradPy:\"\u00e0iy\u00f9\", simp:\"\u7231\u7389\", simpPy:\"\u00e0iy\u00f9\", en:\"Aiyu jelly\", img:\"https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2026\/08\/\u611b\u7389.png\"},\n  {trad:\"\u7d05\u8c46\", tradPy:\"h\u00f3ngd\u00f2u\", simp:\"\u7ea2\u8c46\", simpPy:\"h\u00f3ngd\u00f2u\", en:\"Red bean\", img:\"https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2026\/08\/\u7d05\u8c46.png\"},\n  {trad:\"\u828b\u5713\", tradPy:\"y\u00f9yu\u00e1n\", simp:\"\u828b\u5706\", simpPy:\"y\u00f9yu\u00e1n\", en:\"Taro balls\", img:\"https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2026\/08\/\u828b\u5713.png\"},\n  {trad:\"\u71d5\u9ea5\", tradPy:\"y\u00e0nm\u00e0i\", simp:\"\u71d5\u9ea6\", simpPy:\"y\u00e0nm\u00e0i\", en:\"Oats\", img:\"https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2026\/08\/\u71d5\u9ea5.png\"},\n  {trad:\"\u5976\u84cb\", tradPy:\"n\u01ceig\u00e0i\", simp:\"\u5976\u76d6\", simpPy:\"n\u01ceig\u00e0i\", en:\"Milk foam\", img:\"https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2026\/08\/\u5976\u84cb.png\"}\n];\n\nconst brewData = [\n  {trad:\"\u8336\u85dd\", tradPy:\"ch\u00e1y\u00ec\", simp:\"\u8336\u827a\", simpPy:\"ch\u00e1y\u00ec\", en:\"The art of tea\"},\n  {trad:\"\u5de5\u592b\u8336\", tradPy:\"g\u014dngf\u016bch\u00e1\", simp:\"\u5de5\u592b\u8336\", simpPy:\"g\u014dngf\u016bch\u00e1\", en:\"Gongfu tea\"},\n  {trad:\"\u8336\u5177\", tradPy:\"ch\u00e1j\u00f9\", simp:\"\u8336\u5177\", simpPy:\"ch\u00e1j\u00f9\", en:\"Tea set\"},\n  {trad:\"\u8336\u58fa\", tradPy:\"ch\u00e1h\u00fa\", simp:\"\u8336\u58f6\", simpPy:\"ch\u00e1h\u00fa\", en:\"Teapot\"},\n  {trad:\"\u805e\u9999\u676f\", tradPy:\"w\u00e9nxi\u0101ngb\u0113i\", simp:\"\u95fb\u9999\u676f\", simpPy:\"w\u00e9nxi\u0101ngb\u0113i\", en:\"Aroma cup\"},\n  {trad:\"\u8336\u5bf5\", tradPy:\"ch\u00e1ch\u01d2ng\", simp:\"\u8336\u5ba0\", simpPy:\"ch\u00e1ch\u01d2ng\", en:\"Tea pet\"}\n];\n\nconst orderingSentences = [\n  {\n    tradWords:[[\"\u6211\u8981\", \"w\u01d2 y\u00e0o\"],[\"\u4e00\u676f\", \"y\u00ecb\u0113i\"],[\"\u73cd\u73e0\u5976\u8336\", \"zh\u0113nzh\u016bn\u01ceich\u00e1\"],[\"\uff0c\", \"\"],[\"\u534a\u7cd6\", \"b\u00e0nt\u00e1ng\"],[\"\u53bb\u51b0\", \"q\u00f9b\u012bng\"],[\"\u3002\", \"\"]],\n    simpWords:[[\"\u6211\u8981\", \"w\u01d2 y\u00e0o\"],[\"\u4e00\u676f\", \"y\u00ecb\u0113i\"],[\"\u73cd\u73e0\u5976\u8336\", \"zh\u0113nzh\u016bn\u01ceich\u00e1\"],[\"\uff0c\", \"\"],[\"\u534a\u7cd6\", \"b\u00e0nt\u00e1ng\"],[\"\u53bb\u51b0\", \"q\u00f9b\u012bng\"],[\"\u3002\", \"\"]],\n    en:\"One pearl milk tea, half sugar, no ice.\"\n  },\n  {\n    tradWords:[[\"\u8acb\u554f\", \"q\u01d0ngw\u00e8n\"],[\"\u9019\u676f\", \"zh\u00e8b\u0113i\"],[\"\u53ef\u4ee5\", \"k\u011by\u01d0\"],[\"\u505a\u6210\", \"zu\u00f2ch\u00e9ng\"],[\"\u5fae\u7cd6\u5fae\u51b0\", \"w\u00e9it\u00e1ng w\u00e9ib\u012bng\"],[\"\u55ce\", \"ma\"],[\"\uff1f\", \"\"]],\n    simpWords:[[\"\u8bf7\u95ee\", \"q\u01d0ngw\u00e8n\"],[\"\u8fd9\u676f\", \"zh\u00e8b\u0113i\"],[\"\u53ef\u4ee5\", \"k\u011by\u01d0\"],[\"\u505a\u6210\", \"zu\u00f2ch\u00e9ng\"],[\"\u5fae\u7cd6\u5fae\u51b0\", \"w\u0113it\u00e1ng w\u0113ib\u012bng\"],[\"\u5417\", \"ma\"],[\"\uff1f\", \"\"]],\n    en:\"Could this be made 30% sugar, light ice?\"\n  },\n  {\n    tradWords:[[\"\u6211\u8981\", \"w\u01d2 y\u00e0o\"],[\"\u4e00\u676f\", \"y\u00ec b\u0113i\"],[\"\u5927\u676f\u7684\", \"d\u00e0b\u0113i de\"],[\"\u71b1\", \"r\u00e8\"],[\"\u70cf\u9f8d\u5976\u8336\", \"w\u016bl\u00f3ngn\u01ceich\u00e1\"],[\"\uff0c\", \"\"],[\"\u7121\u7cd6\", \"w\u00fat\u00e1ng\"],[\"\u52a0\", \"ji\u0101\"],[\"\u828b\u5713\", \"y\u00f9yu\u00e1n\"],[\"\u3002\", \"\"]],\n    simpWords:[[\"\u6211\u8981\", \"w\u01d2 y\u00e0o\"],[\"\u4e00\u676f\", \"y\u00ec b\u0113i\"],[\"\u5927\u676f\u7684\", \"d\u00e0b\u0113i de\"],[\"\u70ed\", \"r\u00e8\"],[\"\u4e4c\u9f99\u5976\u8336\", \"w\u016bl\u00f3ngn\u01ceich\u00e1\"],[\"\uff0c\", \"\"],[\"\u65e0\u7cd6\", \"w\u00fat\u00e1ng\"],[\"\u52a0\", \"ji\u0101\"],[\"\u828b\u5706\", \"y\u00f9yu\u00e1n\"],[\"\u3002\", \"\"]],\n    en:\"I want a large hot oolong milk tea, no sugar with taro balls.\"\n  }\n];\n\nfunction renderGrid(id, data){\n  const el = root.querySelector(\"#\" + id);\n  if(!el) return;\n  el.innerHTML = data.map(d => `\n    <div class=\"card\">\n      <span class=\"hz\">${bilingualTerm(d)} ${sayBtn(d.trad, d.simp)}<\/span>\n      <span class=\"en\">${d.en}<\/span>\n      ${d.desc ? `<div class=\"desc\">${d.desc}<\/div>` : \"\"}\n      ${d.img ? `<img decoding=\"async\" src=\"${d.img}\" alt=\"${d.en}\">` : \"\"}\n    <\/div>\n  `).join(\"\");\n}\n\nfunction renderSentenceBlock(s){\n  const tradFull = s.tradWords.map(([h]) => h).join(\"\");\n  const simpFull = s.simpWords.map(([h]) => h).join(\"\");\n  return `\n    <div class=\"phrase-card\">\n      <span class=\"hz\">${bilingualSentence(s)} ${sayBtn(tradFull, simpFull)}<\/span>\n      <span class=\"en\">${s.en}<\/span>\n    <\/div>\n  `;\n}\n\nrenderGrid(\"taiwanTeaGrid\", famousTeasTaiwanData);\nrenderGrid(\"chinaTeaGrid\", famousTeasChinaData);\nrenderGrid(\"foreignTeaGrid\", foreignTeasData);\nrenderGrid(\"toppingsGrid\", toppingsData);\nrenderGrid(\"brewGrid\", brewData);\n\nconst bobaEl = root.querySelector(\"#bobaOrderingSentences\");\nif(bobaEl) {\n  bobaEl.innerHTML = orderingSentences.map(renderSentenceBlock).join(\"\");\n}\n\napplySiteLanguagePrefs();\n})();\n<\/script>\n<\/div>\n\n\n<!DOCTYPE html>\r\n<html lang=\"zh-TW\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Boba & Smoothie Barista Challenge \ud83e\uddcb \u53f0\u7063\u624b\u6416\u98f2\u8207\u679c\u6614\u5e97\u54e1\u5927\u6311\u6230<\/title>\r\n    <!-- Tailwind CSS -->\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <!-- Google Fonts -->\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+TC:wght@400;500;700;900&family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n    <style>\r\n        \/* Scoped root wrapper with a high-end artisanal tea house aesthetic and important flags *\/\r\n        .barista-game-root {\r\n            font-family: 'Plus Jakarta Sans', 'Noto Sans TC', sans-serif !important;\r\n            background-color: #f7f3ee !important;\r\n            color: #2c2621 !important;\r\n            min-height: 100vh !important;\r\n            display: flex !important;\r\n            flex-direction: column !important;\r\n            justify-content: space-between !important;\r\n        }\r\n        .barista-game-root * {\r\n            box-sizing: border-box !important;\r\n        }\r\n        \/* Ensure header elements inherit light text color despite universal text color rules *\/\r\n        .barista-game-root header, .barista-game-root header * {\r\n            color: #f7f3ee !important;\r\n        }\r\n        .barista-game-root header button {\r\n            color: inherit !important;\r\n        }\r\n        .barista-game-root header .bg-\\[\\#d4af37\\] {\r\n            color: #2c2621 !important;\r\n        }\r\n        .barista-game-root header button#lang-btn-en {\r\n            color: #2c2621 !important;\r\n        }\r\n        .barista-game-root ::-webkit-scrollbar {\r\n            width: 6px !important;\r\n            height: 6px !important;\r\n        }\r\n        .barista-game-root ::-webkit-scrollbar-track {\r\n            background: #ede6dc !important;\r\n            border-radius: 4px !important;\r\n        }\r\n        .barista-game-root ::-webkit-scrollbar-thumb {\r\n            background: #c5b4a2 !important;\r\n            border-radius: 4px !important;\r\n        }\r\n        .barista-game-root ::-webkit-scrollbar-thumb:hover {\r\n            background: #a38e78 !important;\r\n        }\r\n        @keyframes float-gentle {\r\n            0%, 100% { transform: translateY(0); }\r\n            50% { transform: translateY(-6px); }\r\n        }\r\n        .barista-game-root .animate-float {\r\n            animation: float-gentle 3.5s ease-in-out infinite !important;\r\n        }\r\n        .barista-game-root .font-serif-title {\r\n            font-family: 'Playfair Display', serif !important;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n\r\n    <!-- Scoped Game Root Wrapper -->\r\n    <div class=\"barista-game-root\">\r\n\r\n        <!-- Mobile Screen Warning Banner -->\r\n        <div id=\"mobile-warning\" class=\"bg-[#eef2eb] border-b border-[#d8e2d0] px-4 py-2 text-xs text-[#3b4d32] text-center flex items-center justify-center gap-2 hidden md:hidden\">\r\n            <span>\ud83c\udf3f<\/span>\r\n            <span id=\"banner-tip\"><strong>Tip:<\/strong> For the best artisanal barista training experience, a tablet or desktop screen is recommended.<\/span>\r\n            <button onclick=\"dismissMobileWarning()\" class=\"ml-2 font-bold text-[#3b4d32] hover:text-black px-1.5 py-0.5 bg-[#d8e2d0] rounded cursor-pointer\">\u2715<\/button>\r\n        <\/div>\r\n\r\n        <!-- Header: Artisanal Tea House Theme -->\r\n        <header class=\"bg-[#2c2621] text-[#f7f3ee] shadow-xl sticky top-0 z-40 border-b border-[#4a3f36]\">\r\n            <div class=\"max-w-6xl mx-auto px-4 py-3.5 flex flex-wrap justify-between items-center gap-3\">\r\n                <div class=\"flex items-center space-x-3.5\">\r\n                    <span class=\"text-3xl animate-float\" id=\"header-icon\">\ud83e\uddcb<\/span>\r\n                    <div>\r\n                        <h1 class=\"text-base sm:text-xl font-black tracking-wide flex items-center gap-2.5 flex-wrap font-serif-title\" id=\"main-title\">\r\n                            Boba & Smoothie Barista Challenge\r\n                            <span class=\"text-[11px] bg-[#4a3f36] text-[#d4af37] px-2.5 py-0.5 rounded-full font-normal border border-[#6b5b4d] font-sans\" id=\"badge-training\">10-Order Training<\/span>\r\n                        <\/h1>\r\n                        <p class=\"text-[11px] sm:text-xs text-[#c5b4a2] font-medium tracking-wide\" id=\"sub-title\">Practice Reading Chinese Beverage Shop Menus \uff5c \u7df4\u7fd2\u770b\u61c2\u4e2d\u6587\u98f2\u6599\u5e97\u83dc\u55ae<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <div class=\"flex items-center gap-2 sm:gap-3 flex-wrap\">\r\n                    <!-- Stats Pill -->\r\n                    <div class=\"bg-[#3a322b] border border-[#594d43] px-3.5 py-1.5 rounded-xl flex items-center gap-2.5 sm:gap-3 text-xs sm:text-sm shadow-inner\">\r\n                        <div>\u2b50 <span id=\"lbl-score\">Score<\/span>: <span id=\"score-display\" class=\"font-bold text-[#f3e5ab]\">0<\/span><\/div>\r\n                        <div class=\"w-px h-4 bg-[#594d43]\"><\/div>\r\n                        <div>\ud83c\udfaf $<span id=\"money-display\" class=\"font-bold text-[#a3d9a5]\">0<\/span><\/div>\r\n                        <div class=\"w-px h-4 bg-[#594d43]\"><\/div>\r\n                        <div>\ud83d\udccb <span id=\"orders-display\" class=\"font-bold text-[#9bc9ed]\">0\/10<\/span><\/div>\r\n                    <\/div>\r\n\r\n                    <!-- App UI Language Switcher (EN \/ JA \/ KO) -->\r\n                    <div class=\"bg-[#3a322b] border border-[#594d43] rounded-xl p-1 flex items-center gap-1 text-xs font-bold\">\r\n                        <span class=\"text-[10px] text-[#c5b4a2] px-1\">Lang:<\/span>\r\n                        <button onclick=\"setAppLang('en')\" id=\"lang-btn-en\" class=\"px-2 py-1 rounded-lg bg-[#d4af37] text-[#2c2621] transition cursor-pointer\">EN<\/button>\r\n                        <button onclick=\"setAppLang('ja')\" id=\"lang-btn-ja\" class=\"px-2 py-1 rounded-lg text-[#c5b4a2] hover:text-white transition cursor-pointer\">\u65e5\u672c\u8a9e<\/button>\r\n                        <button onclick=\"setAppLang('ko')\" id=\"lang-btn-ko\" class=\"px-2 py-1 rounded-lg text-[#c5b4a2] hover:text-white transition cursor-pointer\">\ud55c\uad6d\uc5b4<\/button>\r\n                    <\/div>\r\n\r\n                    <!-- Character Script Toggle Button -->\r\n                    <button onclick=\"toggleCharMode()\" id=\"char-mode-btn\" class=\"bg-[#4a3f36] hover:bg-[#594d43] text-[#f7f3ee] border border-[#6b5b4d] font-bold px-3 py-1.5 rounded-xl text-xs transition cursor-pointer flex items-center gap-1.5 shadow-sm\" title=\"Switch Traditional\/Simplified Chinese\">\r\n                        <span>\ud83d\udd24<\/span> <span id=\"char-mode-text\">\u7e41\u9ad4\u4e2d\u6587 (Traditional)<\/span>\r\n                    <\/button>\r\n\r\n                    <!-- Dictionary Button -->\r\n                    <button onclick=\"toggleDictionary()\" class=\"bg-[#d4af37] hover:bg-[#e6c268] text-[#2c2621] font-bold px-3.5 py-2 rounded-xl shadow-md transition transform active:scale-95 flex items-center gap-1.5 text-xs sm:text-sm cursor-pointer\">\r\n                        <span>\ud83d\udcd6<\/span> <span id=\"lbl-handbook\">Handbook<\/span>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/header>\r\n\r\n        <!-- Main Game Container -->\r\n        <main class=\"max-w-6xl w-full mx-auto p-4 sm:p-6 flex-1 flex flex-col gap-6\">\r\n\r\n            <!-- Mode Selection \/ Start Screen -->\r\n            <div id=\"start-screen\" class=\"bg-white\/95 backdrop-blur border border-[#e5ded4] rounded-3xl shadow-xl p-6 sm:p-10 text-center max-w-2xl mx-auto my-auto flex flex-col gap-6\">\r\n                <div class=\"w-24 h-24 bg-[#f4eee6] rounded-full flex items-center justify-center mx-auto text-5xl shadow-inner animate-float border border-[#e5ded4]\">\r\n                    \ud83e\uded6\r\n                <\/div>\r\n                <div>\r\n                    <h2 class=\"text-2xl sm:text-3xl font-black text-[#2c2621] mb-2 font-serif-title\" id=\"start-title\"><span class=\"ez-toc-section\" id=\"Welcome_to_Artisanal_Barista_Training\"><\/span>Welcome to Artisanal Barista Training<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n                    <p class=\"text-[#6b5b4d] text-sm sm:text-base leading-relaxed\" id=\"start-desc\">\r\n                        Foreign patrons will place orders in foreign languages. Complete <span class=\"font-bold text-[#9c7b5b]\">\u301010 Orders\u3011<\/span> per shop to graduate. Accurately replicate their requests on the <span class=\"font-bold text-[#9c7b5b]\">\u3010Strictly Chinese POS Terminal\u3011<\/span>:\r\n                    <\/p>\r\n                <\/div>\r\n\r\n                <!-- Mode Switch Buttons -->\r\n                <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\r\n                    <button onclick=\"selectGameMode('tea')\" class=\"p-5 bg-gradient-to-br from-[#f9f5f0] to-[#f0e7dc] hover:from-[#f4eee6] hover:to-[#e8ded1] border-2 border-[#d4af37]\/60 rounded-2xl shadow-sm flex flex-col items-center text-center transition transform active:scale-95 cursor-pointer group\">\r\n                        <span class=\"text-4xl mb-2 group-hover:scale-110 transition\">\ud83e\uddcb<\/span>\r\n                        <h3 class=\"font-black text-[#2c2621] text-lg mb-1 font-serif-title\" id=\"mode-title-tea\">\u3010Boba Tea Lounge\u3011<\/h3>\r\n                        <p class=\"text-xs text-[#6b5b4d]\" id=\"mode-desc-tea\">15 tea bases, milk options, cheese-foam & toppings, sweetness & ice levels<\/p>\r\n                    <\/button>\r\n\r\n                    <button onclick=\"selectGameMode('smoothie')\" class=\"p-5 bg-gradient-to-br from-[#f2f7f4] to-[#e4ede7] hover:from-[#eaf3ed] hover:to-[#d8e5dc] border-2 border-[#87a987]\/60 rounded-2xl shadow-sm flex flex-col items-center text-center transition transform active:scale-95 cursor-pointer group\">\r\n                        <span class=\"text-4xl mb-2 group-hover:scale-110 transition\">\ud83e\udd6d<\/span>\r\n                        <h3 class=\"font-black text-[#2c2621] text-lg mb-1 font-serif-title\" id=\"mode-title-smoothie\">\u3010Fresh Fruit & Smoothie Bar\u3011<\/h3>\r\n                        <p class=\"text-xs text-[#6b5b4d]\" id=\"mode-desc-smoothie\">14 artisanal fruits (pick 1~3), multi-selectable bases (smoothie\/slush\/milk\/coconut milk)<\/p>\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Gameplay Screen (Hidden by default) -->\r\n            <div id=\"game-screen\" class=\"hidden flex flex-col gap-4\">\r\n                \r\n                <!-- Mode Switcher Bar in Game -->\r\n                <div class=\"bg-white border border-[#e5ded4] rounded-2xl p-3 shadow-sm flex flex-wrap justify-between items-center gap-3\">\r\n                    <div class=\"flex items-center gap-2\">\r\n                        <span class=\"text-xs text-[#6b5b4d] font-bold\" id=\"lbl-current-mode\">Current Shop Mode:<\/span>\r\n                        <span id=\"current-mode-badge\" class=\"px-3 py-1 bg-[#2c2621] text-[#f7f3ee] text-xs font-black rounded-xl tracking-wide\">\u3010Boba Tea Lounge\u3011<\/span>\r\n                    <\/div>\r\n                    <div class=\"flex items-center gap-2\">\r\n                        <button onclick=\"switchGameMode('tea')\" id=\"mode-btn-tea\" class=\"px-3 py-1.5 text-xs font-bold rounded-xl transition bg-[#2c2621] text-white cursor-pointer\">Tea Lounge<\/button>\r\n                        <button onclick=\"switchGameMode('smoothie')\" id=\"mode-btn-smoothie\" class=\"px-3 py-1.5 text-xs font-bold rounded-xl transition bg-[#f0e7dc] text-[#6b5b4d] hover:bg-[#e8ded1] cursor-pointer\">Smoothie Bar<\/button>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Customer Order Card (On Top) -->\r\n                <div class=\"w-full\">\r\n                    <div class=\"bg-white border border-[#e5ded4] rounded-3xl shadow-sm p-5 sm:p-6 flex flex-col relative overflow-hidden\">\r\n                        <!-- Patience Bar -->\r\n                        <div class=\"w-full bg-[#f0e7dc] h-2.5 rounded-full overflow-hidden mb-4 border border-[#e5ded4]\">\r\n                            <div id=\"patience-bar\" class=\"bg-[#87a987] h-full w-full transition-all duration-300\"><\/div>\r\n                        <\/div>\r\n                        <div class=\"flex justify-between w-full text-xs text-[#6b5b4d] mb-2 px-1 font-medium\">\r\n                            <span id=\"customer-name\" class=\"font-bold text-[#2c2621]\">Customer<\/span>\r\n                            <span id=\"patience-text\">Patience Countdown...<\/span>\r\n                        <\/div>\r\n\r\n                        <!-- Customer Avatar & Speech Bubble -->\r\n                        <div class=\"flex items-start gap-4 w-full mt-1\">\r\n                            <div id=\"customer-avatar\" class=\"w-16 h-16 bg-[#f4eee6] rounded-2xl flex items-center justify-center text-4xl shadow-sm shrink-0 border border-[#e5ded4]\">\r\n                                \ud83e\uddd1\u200d\ud83e\uddb0\r\n                            <\/div>\r\n                            <div class=\"flex-1 bg-[#f9f5f0] border border-[#e5ded4] rounded-2xl p-4 relative shadow-inner\">\r\n                                <h4 class=\"text-xs font-bold text-[#9c7b5b] mb-1.5 flex items-center gap-1.5 uppercase tracking-wider\">\r\n                                    <span>\ud83d\udde3\ufe0f<\/span> <span id=\"lbl-cust-order\">Customer Order:<\/span>\r\n                                <\/h4>\r\n                                <p id=\"customer-order-speech\" class=\"text-base sm:text-lg font-bold text-[#2c2621] leading-relaxed font-mono tracking-wide\">\r\n                                    Loading...\r\n                                <\/p>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- POS Terminal & Receipt Side-by-Side Below -->\r\n                <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-6 items-start\">\r\n                    \r\n                    <!-- Left: Cashier Order Ticket (Col 4) -->\r\n                    <div class=\"lg:col-span-4 bg-white border border-dashed border-[#d4af37]\/70 rounded-3xl shadow-sm p-5 flex flex-col gap-3.5\">\r\n                        <div class=\"flex justify-between items-center border-b border-[#e5ded4] pb-2.5\">\r\n                            <h3 class=\"font-bold text-[#2c2621] flex items-center gap-1.5 text-sm font-serif-title\" id=\"lbl-receipt-title\">\r\n                                <span>\ud83e\uddfe<\/span> Cashier Order Ticket (Chinese)\r\n                            <\/h3>\r\n                            <button onclick=\"resetCurrentOrder()\" class=\"text-xs text-[#b85c53] hover:text-[#96423a] font-semibold underline cursor-pointer\" id=\"lbl-reset\">Reset<\/button>\r\n                        <\/div>\r\n\r\n                        <div id=\"ticket-rows-container\" class=\"space-y-2 text-xs sm:text-sm font-medium\">\r\n                            <!-- Dynamically populated rows -->\r\n                        <\/div>\r\n\r\n                        <button onclick=\"submitOrder()\" class=\"mt-2 w-full bg-gradient-to-r from-[#2c2621] to-[#4a3f36] hover:from-[#1f1a17] hover:to-[#332b25] text-[#f7f3ee] font-bold py-3.5 px-4 rounded-2xl shadow-md transition transform active:scale-95 flex items-center justify-center gap-2 cursor-pointer text-sm sm:text-base border border-[#594d43]\">\r\n                            <span>\u2728<\/span> <span id=\"lbl-confirm\">Confirm & Serve!<\/span>\r\n                        <\/button>\r\n                    <\/div>\r\n\r\n                    <!-- Right: POS Text Selection Station (Col 8 - Strictly Chinese) -->\r\n                    <div class=\"lg:col-span-8 bg-white border border-[#e5ded4] rounded-3xl shadow-sm p-5 sm:p-6 flex flex-col gap-5\">\r\n                        \r\n                        <!-- Category Tabs (Strictly Chinese) -->\r\n                        <div class=\"flex border-b border-[#e5ded4] gap-1.5 overflow-x-auto pb-1.5\" id=\"pos-tabs-container\">\r\n                            <!-- Populated by mode -->\r\n                        <\/div>\r\n\r\n                        <!-- Tab Contents Container -->\r\n                        <div class=\"min-h-[360px] max-h-[460px] overflow-y-auto pr-1\">\r\n                            \r\n                            <!-- 1. Size Selection -->\r\n                            <div id=\"panel-size\" class=\"grid grid-cols-2 gap-3\"><\/div>\r\n\r\n                            <!-- 2. Fruit Selection (Smoothie Mode Only) -->\r\n                            <div id=\"panel-fruit\" class=\"hidden grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3\"><\/div>\r\n\r\n                            <!-- 3. Drinks \/ Teas \/ Smoothie Bases -->\r\n                            <div id=\"panel-drink\" class=\"hidden grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3\"><\/div>\r\n\r\n                            <!-- 4. Toppings (Tea Mode only) -->\r\n                            <div id=\"panel-topping\" class=\"hidden grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3\"><\/div>\r\n\r\n                            <!-- 5. Sugar Levels (Tea Mode only) -->\r\n                            <div id=\"panel-sugar\" class=\"hidden grid grid-cols-2 sm:grid-cols-3 gap-3\"><\/div>\r\n\r\n                            <!-- 6. Ice Levels (Tea Mode only) -->\r\n                            <div id=\"panel-ice\" class=\"hidden grid grid-cols-2 sm:grid-cols-3 gap-3\"><\/div>\r\n\r\n                        <\/div>\r\n\r\n                        <!-- Helper Tip -->\r\n                        <div class=\"bg-[#f9f5f0] border border-[#e5ded4] rounded-2xl p-3 text-xs text-[#6b5b4d] flex items-center gap-2.5\">\r\n                            <span class=\"text-base\">\ud83d\udca1<\/span>\r\n                            <span id=\"pos-tip\">Compare with the customer request above and click the corresponding Chinese options on the cashier.<\/span>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Shift Complete \/ Summary Screen (Hidden by default) -->\r\n            <div id=\"summary-screen\" class=\"hidden bg-white border border-[#e5ded4] rounded-3xl shadow-xl p-6 sm:p-10 text-center max-w-xl mx-auto my-auto flex flex-col gap-6\">\r\n                <div class=\"w-20 h-20 bg-[#f4eee6] text-[#2c2621] rounded-full flex items-center justify-center mx-auto text-4xl shadow-inner border border-[#d4af37]\">\r\n                    \ud83c\udfc6\r\n                <\/div>\r\n                <div>\r\n                    <h2 class=\"text-2xl sm:text-3xl font-black text-[#2c2621] mb-1 font-serif-title\" id=\"summary-title\"><span class=\"ez-toc-section\" id=\"Congratulations_on_Completing_10_Orders\"><\/span>Congratulations on Completing 10 Orders!<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n                    <p id=\"summary-rank\" class=\"text-[#9c7b5b] font-bold text-lg\">Performance: Master Barista<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"bg-[#f9f5f0] rounded-2xl p-4 border border-[#e5ded4] grid grid-cols-2 gap-4 text-center\">\r\n                    <div class=\"bg-white p-3 rounded-xl shadow-sm border border-[#e5ded4]\">\r\n                        <p class=\"text-xs text-[#6b5b4d]\" id=\"lbl-total-score\">Total Score<\/p>\r\n                        <p id=\"final-score\" class=\"text-xl font-black text-[#2c2621]\">0<\/p>\r\n                    <\/div>\r\n                    <div class=\"bg-white p-3 rounded-xl shadow-sm border border-[#e5ded4]\">\r\n                        <p class=\"text-xs text-[#6b5b4d]\" id=\"lbl-total-revenue\">Total Revenue<\/p>\r\n                        <p id=\"final-money\" class=\"text-xl font-black text-[#3b6e48]\">$0<\/p>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <button onclick=\"returnToMenu()\" class=\"bg-[#2c2621] hover:bg-[#3d332d] text-[#f7f3ee] font-bold text-base py-3 px-8 rounded-2xl shadow-lg transition transform active:scale-95 cursor-pointer border border-[#594d43]\" id=\"lbl-return-menu\">\r\n                    Return to Shop Selection \ud83d\udd04\r\n                <\/button>\r\n            <\/div>\r\n\r\n        <\/main>\r\n\r\n        <!-- Handbook \/ Dictionary Modal -->\r\n        <div id=\"dictionary-modal\" class=\"fixed inset-0 bg-[#2c2621]\/60 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden\">\r\n            <div class=\"bg-white w-full max-w-3xl rounded-3xl shadow-2xl border border-[#e5ded4] flex flex-col max-h-[85vh] overflow-hidden\">\r\n                <!-- Modal Header -->\r\n                <div class=\"bg-[#2c2621] text-[#f7f3ee] px-6 py-4 flex justify-between items-center border-b border-[#4a3f36]\">\r\n                    <div class=\"flex items-center gap-2.5\">\r\n                        <span class=\"text-2xl\">\ud83d\udcd6<\/span>\r\n                        <h3 class=\"font-bold text-lg font-serif-title\" id=\"handbook-title\">Taiwanese Beverage & Smoothie Study Handbook<\/h3>\r\n                    <\/div>\r\n                    <button onclick=\"toggleDictionary()\" class=\"text-[#c5b4a2] hover:text-white text-xl font-bold px-2 py-1 cursor-pointer\">\u2715<\/button>\r\n                <\/div>\r\n\r\n                <!-- Modal Content -->\r\n                <div class=\"p-4 sm:p-6 overflow-y-auto flex-1 space-y-6 text-sm\">\r\n                    <!-- Dict Section 1: Teas -->\r\n                    <div>\r\n                        <h4 class=\"font-bold text-[#2c2621] border-b border-[#e5ded4] pb-1.5 mb-2.5 font-serif-title\" id=\"hb-sec1\">\ud83c\udf75 Tea Bases (Complete Handbook Collection)<\/h4>\r\n                        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs sm:text-sm\">\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u7d05\u8336\" data-simp=\"\u7ea2\u8336\">\u7d05\u8336 (h\u00f3ngch\u00e1)<\/span><span class=\"text-[#6b5b4d]\">black tea<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u7da0\u8336\" data-simp=\"\u7eff\u8336\">\u7da0\u8336 (l\u01dcch\u00e1)<\/span><span class=\"text-[#6b5b4d]\">green tea<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u70cf\u9f8d\u8336\" data-simp=\"\u4e4c\u9f99\u8336\">\u70cf\u9f8d\u8336 (w\u016bl\u00f3ngch\u00e1)<\/span><span class=\"text-[#6b5b4d]\">oolong tea<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u9752\u8336\" data-simp=\"\u9752\u8336\">\u9752\u8336 (q\u012bngch\u00e1)<\/span><span class=\"text-[#6b5b4d]\">light oolong-style tea<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u56db\u5b63\u6625\u8336\" data-simp=\"\u56db\u5b63\u6625\u8336\">\u56db\u5b63\u6625\u8336 (s\u00ecj\u00ecch\u016bn ch\u00e1)<\/span><span class=\"text-[#6b5b4d]\">Four Seasons Spring tea<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u963f\u85a9\u59c6\u7d05\u8336\" data-simp=\"\u963f\u8428\u59c6\u7ea2\u8336\">\u963f\u85a9\u59c6\u7d05\u8336 (\u0101s\u00e0m\u01d4 h\u00f3ngch\u00e1)<\/span><span class=\"text-[#6b5b4d]\">Assam black tea<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u9435\u89c0\u97f3\" data-simp=\"\u94c1\u89c2\u97f3\">\u9435\u89c0\u97f3 (ti\u011bgu\u0101ny\u012bn)<\/span><span class=\"text-[#6b5b4d]\">Tieguanyin oolong<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u6771\u65b9\u7f8e\u4eba\u8336\" data-simp=\"\u4e1c\u65b9\u7f8e\u4eba\u8336\">\u6771\u65b9\u7f8e\u4eba\u8336 (d\u014dngf\u0101ng m\u011bir\u00e9n)<\/span><span class=\"text-[#6b5b4d]\">Oriental Beauty tea<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u8309\u8389\u82b1\u8336\" data-simp=\"\u8309\u8389\u82b1\u8336\">\u8309\u8389\u82b1\u8336 (m\u00f2l\u00echu\u0101 ch\u00e1)<\/span><span class=\"text-[#6b5b4d]\">jasmine flower tea<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u9ea5\u8336\" data-simp=\"\u9ea6\u8336\">\u9ea5\u8336 (m\u00e0ich\u00e1)<\/span><span class=\"text-[#6b5b4d]\">barley tea (no caffeine)<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u666e\u6d31\u8336\" data-simp=\"\u666e\u6d31\u8336\">\u666e\u6d31\u8336 (p\u01d4'\u011brch\u00e1)<\/span><span class=\"text-[#6b5b4d]\">pu-erh tea<\/span><\/div>\r\n                            <div class=\"bg-[#f4eee6] p-2.5 rounded-xl flex justify-between border border-[#d4af37]\/60 font-bold\"><span class=\"item-name\" data-trad=\"\u7119\u8336\" data-simp=\"\u7119\u8336\">\u7119\u8336 (b\u00e8ich\u00e1)<\/span><span class=\"text-[#6b5b4d]\">roasted green tea<\/span><\/div>\r\n                            <div class=\"bg-[#f4eee6] p-2.5 rounded-xl flex justify-between border border-[#d4af37]\/60 font-bold\"><span class=\"item-name\" data-trad=\"\u62b9\u8336\" data-simp=\"\u62b9\u8336\">\u62b9\u8336 (m\u01d2ch\u00e1)<\/span><span class=\"text-[#6b5b4d]\">matcha green tea<\/span><\/div>\r\n                            <div class=\"bg-[#f4eee6] p-2.5 rounded-xl flex justify-between border border-[#d4af37]\/60 font-bold\"><span class=\"item-name\" data-trad=\"\u570b\u5bf6\u8336\" data-simp=\"\u56fd\u5b9d\u8336\">\u570b\u5bf6\u8336 (gu\u00f3b\u01ceoch\u00e1)<\/span><span class=\"text-[#6b5b4d]\">rooibos tea<\/span><\/div>\r\n                            <div class=\"bg-[#f4eee6] p-2.5 rounded-xl flex justify-between border border-[#d4af37]\/60 font-bold\"><span class=\"item-name\" data-trad=\"\u4f2f\u7235\u8336\" data-simp=\"\u4f2f\u7235\u8336\">\u4f2f\u7235\u8336 (b\u00f3ju\u00e9ch\u00e1)<\/span><span class=\"text-[#6b5b4d]\">Earl Grey tea<\/span><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Dict Section 2: Milk & Special -->\r\n                    <div>\r\n                        <h4 class=\"font-bold text-[#2c2621] border-b border-[#e5ded4] pb-1.5 mb-2.5 font-serif-title\" id=\"hb-sec2\">\ud83e\udd5b Milk & Specials<\/h4>\r\n                        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs sm:text-sm\">\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u5976\u8336\" data-simp=\"\u5976\u8336\">\u5976\u8336 (n\u01ceich\u00e1)<\/span><span class=\"text-[#6b5b4d]\">milk tea<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u9bae\u5976\u8336\" data-simp=\"\u9c9c\u5976\u8336\">\u9bae\u5976\u8336 (xi\u0101nn\u01ceich\u00e1)<\/span><span class=\"text-[#6b5b4d]\">fresh milk tea<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u71d5\u9ea5\u5976\" data-simp=\"\u71d5\u9ea6\u5976\">\u71d5\u9ea5\u5976 (y\u00e0nm\u00e0i n\u01cei)<\/span><span class=\"text-[#6b5b4d]\">oat milk<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u6c34\u679c\u8336\" data-simp=\"\u6c34\u679c\u8336\">\u6c34\u679c\u8336 (shu\u01d0gu\u01d2ch\u00e1)<\/span><span class=\"text-[#6b5b4d]\">fruit tea<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u591a\u591a\u7da0\u8336\" data-simp=\"\u591a\u591a\u7eff\u8336\">\u591a\u591a\u7da0\u8336 (du\u014ddu\u014d l\u01dcch\u00e1)<\/span><span class=\"text-[#6b5b4d]\">green tea with yogurt drink<\/span><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Dict Section 3: Toppings (Including \u5976\u84cb) -->\r\n                    <div>\r\n                        <h4 class=\"font-bold text-[#2c2621] border-b border-[#e5ded4] pb-1.5 mb-2.5 font-serif-title\" id=\"hb-sec3\">\ud83e\uddcb Toppings (Including Cheese-foam)<\/h4>\r\n                        <div class=\"grid grid-cols-2 sm:grid-cols-3 gap-2 text-xs sm:text-sm\">\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u73cd\u73e0\uff08\u6ce2\u9738\uff09\" data-simp=\"\u73cd\u73e0\uff08\u6ce2\u9738\uff09\">\u73cd\u73e0\uff08\u6ce2\u9738\uff09<\/span><span class=\"text-[#6b5b4d]\">tapioca<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u5c0f\u73cd\u73e0\uff0f\u7c89\u5713\" data-simp=\"\u5c0f\u73cd\u73e0\uff0f\u7c89\u5706\">\u5c0f\u73cd\u73e0\uff0f\u7c89\u5713<\/span><span class=\"text-[#6b5b4d]\">small pearls<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u6930\u679c\" data-simp=\"\u6930\u679c\">\u6930\u679c<\/span><span class=\"text-[#6b5b4d]\">nata de coco<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u4ed9\u8349\" data-simp=\"\u4ed9\u8349\">\u4ed9\u8349<\/span><span class=\"text-[#6b5b4d]\">grass jelly<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u611b\u7389\" data-simp=\"\u7231\u7389\">\u611b\u7389<\/span><span class=\"text-[#6b5b4d]\">aiyu jelly<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u5e03\u4e01\" data-simp=\"\u5e03\u4e01\">\u5e03\u4e01<\/span><span class=\"text-[#6b5b4d]\">pudding<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u5bd2\u5929\" data-simp=\"\u5bd2\u5929\">\u5bd2\u5929<\/span><span class=\"text-[#6b5b4d]\">agar jelly<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u828b\u5713\" data-simp=\"\u828b\u5706\">\u828b\u5713<\/span><span class=\"text-[#6b5b4d]\">taro balls<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u7d05\u8c46\" data-simp=\"\u7ea2\u8c46\">\u7d05\u8c46<\/span><span class=\"text-[#6b5b4d]\">red beans<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u8606\u8588\" data-simp=\"\u82a6\u835f\">\u8606\u8588<\/span><span class=\"text-[#6b5b4d]\">aloe<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u8336\u51cd\" data-simp=\"\u8336\u51bb\">\u8336\u51cd<\/span><span class=\"text-[#6b5b4d]\">tea jelly<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u5496\u5561\u51cd\" data-simp=\"\u5496\u5561\u51bb\">\u5496\u5561\u51cd<\/span><span class=\"text-[#6b5b4d]\">coffee jelly<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u849f\u84bb\" data-simp=\"\u849f\u84bb\">\u849f\u84bb<\/span><span class=\"text-[#6b5b4d]\">konjac jelly<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl flex justify-between border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u71d5\u9ea5\" data-simp=\"\u71d5\u9ea6\">\u71d5\u9ea5<\/span><span class=\"text-[#6b5b4d]\">oats<\/span><\/div>\r\n                            <div class=\"bg-[#f4eee6] p-2.5 rounded-xl flex justify-between border border-[#d4af37]\/60 font-bold col-span-2 sm:col-span-1\"><span class=\"item-name\" data-trad=\"\u5976\u84cb\" data-simp=\"\u5976\u76d6\">\u5976\u84cb<\/span><span class=\"text-[#6b5b4d]\">cheese-foam<\/span><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Dict Section 4: Fruits & Smoothie Bases -->\r\n                    <div>\r\n                        <h4 class=\"font-bold text-[#2c2621] border-b border-[#e5ded4] pb-1.5 mb-2.5 font-serif-title\" id=\"hb-sec4\">\ud83e\udd6d Fruits (14 Types) & Bases (Multi-select)<\/h4>\r\n                        <div class=\"grid grid-cols-2 sm:grid-cols-3 gap-2 text-xs sm:text-sm mb-3\">\r\n                            <div class=\"bg-[#f4f7f4] p-2.5 rounded-xl flex justify-between border border-[#d8e2d0]\"><span class=\"item-name font-medium\" data-trad=\"\u6ab8\u6aac\" data-simp=\"\u67e0\u6aac\">\u6ab8\u6aac<\/span><span class=\"text-[#6b5b4d]\">lemon<\/span><\/div>\r\n                            <div class=\"bg-[#f4f7f4] p-2.5 rounded-xl flex justify-between border border-[#d8e2d0]\"><span class=\"item-name font-medium\" data-trad=\"\u767e\u9999\u679c\" data-simp=\"\u767e\u9999\u679c\">\u767e\u9999\u679c<\/span><span class=\"text-[#6b5b4d]\">passion fruit<\/span><\/div>\r\n                            <div class=\"bg-[#f4f7f4] p-2.5 rounded-xl flex justify-between border border-[#d8e2d0]\"><span class=\"item-name font-medium\" data-trad=\"\u67f3\u6a59\" data-simp=\"\u67f3\u6a59\">\u67f3\u6a59<\/span><span class=\"text-[#6b5b4d]\">orange<\/span><\/div>\r\n                            <div class=\"bg-[#f4f7f4] p-2.5 rounded-xl flex justify-between border border-[#d8e2d0]\"><span class=\"item-name font-medium\" data-trad=\"\u8461\u8404\u67da\" data-simp=\"\u8461\u8404\u67da\">\u8461\u8404\u67da<\/span><span class=\"text-[#6b5b4d]\">grapefruit<\/span><\/div>\r\n                            <div class=\"bg-[#f4f7f4] p-2.5 rounded-xl flex justify-between border border-[#d8e2d0]\"><span class=\"item-name font-medium\" data-trad=\"\u91d1\u6854\" data-simp=\"\u91d1\u6854\">\u91d1\u6854<\/span><span class=\"text-[#6b5b4d]\">kumquat<\/span><\/div>\r\n                            <div class=\"bg-[#f4f7f4] p-2.5 rounded-xl flex justify-between border border-[#d8e2d0]\"><span class=\"item-name font-medium\" data-trad=\"\u8292\u679c\" data-simp=\"\u8292\u679c\">\u8292\u679c<\/span><span class=\"text-[#6b5b4d]\">mango<\/span><\/div>\r\n                            <div class=\"bg-[#f4f7f4] p-2.5 rounded-xl flex justify-between border border-[#d8e2d0]\"><span class=\"item-name font-medium\" data-trad=\"\u9cf3\u68a8\" data-simp=\"\u51e4\u68a8\">\u9cf3\u68a8<\/span><span class=\"text-[#6b5b4d]\">pineapple<\/span><\/div>\r\n                            <div class=\"bg-[#f4f7f4] p-2.5 rounded-xl flex justify-between border border-[#d8e2d0]\"><span class=\"item-name font-medium\" data-trad=\"\u8349\u8393\" data-simp=\"\u8349\u8393\">\u8349\u8393<\/span><span class=\"text-[#6b5b4d]\">strawberry<\/span><\/div>\r\n                            <div class=\"bg-[#f4f7f4] p-2.5 rounded-xl flex justify-between border border-[#d8e2d0]\"><span class=\"item-name font-medium\" data-trad=\"\u5947\u7570\u679c\" data-simp=\"\u5947\u5f02\u679c\">\u5947\u7570\u679c<\/span><span class=\"text-[#6b5b4d]\">kiwi<\/span><\/div>\r\n                            <div class=\"bg-[#f4f7f4] p-2.5 rounded-xl flex justify-between border border-[#d8e2d0]\"><span class=\"item-name font-medium\" data-trad=\"\u916a\u68a8\" data-simp=\"\u916a\u68a8\">\u916a\u68a8<\/span><span class=\"text-[#6b5b4d]\">avocado<\/span><\/div>\r\n                            <div class=\"bg-[#f4f7f4] p-2.5 rounded-xl flex justify-between border border-[#d8e2d0]\"><span class=\"item-name font-medium\" data-trad=\"\u6728\u74dc\" data-simp=\"\u6728\u74dc\">\u6728\u74dc<\/span><span class=\"text-[#6b5b4d]\">papaya<\/span><\/div>\r\n                            <div class=\"bg-[#f4f7f4] p-2.5 rounded-xl flex justify-between border border-[#d8e2d0]\"><span class=\"item-name font-medium\" data-trad=\"\u9999\u8549\" data-simp=\"\u9999\u8549\">\u9999\u8549<\/span><span class=\"text-[#6b5b4d]\">banana<\/span><\/div>\r\n                            <div class=\"bg-[#f4f7f4] p-2.5 rounded-xl flex justify-between border border-[#d8e2d0]\"><span class=\"item-name font-medium\" data-trad=\"\u85cd\u8393\" data-simp=\"\u84dd\u8393\">\u85cd\u8393<\/span><span class=\"text-[#6b5b4d]\">blueberry<\/span><\/div>\r\n                            <div class=\"bg-[#f4f7f4] p-2.5 rounded-xl flex justify-between border border-[#d8e2d0]\"><span class=\"item-name font-medium\" data-trad=\"\u897f\u74dc\" data-simp=\"\u897f\u74dc\">\u897f\u74dc<\/span><span class=\"text-[#6b5b4d]\">watermelon<\/span><\/div>\r\n                        <\/div>\r\n                        <div class=\"grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs sm:text-sm font-bold text-center\">\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl border border-[#e5ded4]\"><span class=\"item-name\" data-trad=\"\u679c\u6614\" data-simp=\"\u679c\u6614\">\u679c\u6614<\/span> (smoothie)<\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl border border-[#e5ded4]\"><span class=\"item-name\" data-trad=\"\u51b0\u6c99\" data-simp=\"\u51b0\u6c99\">\u51b0\u6c99<\/span> (slush)<\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl border border-[#e5ded4]\"><span class=\"item-name\" data-trad=\"\u725b\u5976\" data-simp=\"\u725b\u5976\">\u725b\u5976<\/span> (milk)<\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl border border-[#e5ded4]\"><span class=\"item-name\" data-trad=\"\u6930\u5976\" data-simp=\"\u6930\u5976\">\u6930\u5976<\/span> (coconut milk)<\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <!-- Dict Section 5: Sugar & Ice -->\r\n                    <div>\r\n                        <h4 class=\"font-bold text-[#2c2621] border-b border-[#e5ded4] pb-1.5 mb-2.5 font-serif-title\" id=\"hb-sec5\">\ud83e\uddca Sugar & Ice Levels (Tea Shop)<\/h4>\r\n                        <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2 text-xs sm:text-sm\">\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u5168\u7cd6 \/ \u5c11\u7cd6 \/ \u534a\u7cd6 \/ \u5fae\u7cd6 \/ \u7121\u7cd6\" data-simp=\"\u5168\u7cd6 \/ \u5c11\u7cd6 \/ \u534a\u7cd6 \/ \u5fae\u7cd6 \/ \u65e0\u7cd6\">\u5168\u7cd6 \/ \u5c11\u7cd6 \/ \u534a\u7cd6 \/ \u5fae\u7cd6 \/ \u7121\u7cd6<\/span><\/div>\r\n                            <div class=\"bg-[#f9f5f0] p-2.5 rounded-xl border border-[#e5ded4]\"><span class=\"item-name font-medium\" data-trad=\"\u6b63\u5e38\u51b0 \/ \u5c11\u51b0 \/ \u5fae\u51b0 \/ \u53bb\u51b0 \/ \u71b1\u7684\" data-simp=\"\u6b63\u5e38\u51b0 \/ \u5c11\u51b0 \/ \u5fae\u51b0 \/ \u53bb\u51b0 \/ \u70ed\u7684\">\u6b63\u5e38\u51b0 \/ \u5c11\u51b0 \/ \u5fae\u51b0 \/ \u53bb\u51b0 \/ \u71b1\u7684<\/span><\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <!-- Modal Footer -->\r\n                <div class=\"bg-[#f9f5f0] px-6 py-3.5 flex justify-end border-t border-[#e5ded4]\">\r\n                    <button onclick=\"toggleDictionary()\" class=\"bg-[#2c2621] hover:bg-[#3d332d] text-[#f7f3ee] font-bold px-5 py-2 rounded-xl text-sm cursor-pointer\" id=\"hb-close\">Close Handbook<\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Notification Toast -->\r\n        <div id=\"toast\" class=\"fixed top-20 left-1\/2 transform -translate-x-1\/2 z-50 hidden transition-all duration-300 max-w-md w-full px-4\">\r\n            <div id=\"toast-content\" class=\"p-4 rounded-2xl shadow-xl border text-center font-bold text-sm sm:text-base flex items-center justify-center gap-2\">\r\n                <span>\u2728<\/span> <span id=\"toast-message\">Notification message<\/span>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Footer -->\r\n        <footer class=\"text-center py-4 text-xs text-[#6b5b4d] font-medium\" id=\"footer-text\">\r\n            Boba & Smoothie Barista Challenge \ud83e\uddcb Mandarin Chinese Order Training Simulation\r\n        <\/footer>\r\n\r\n    <\/div>\r\n\r\n    <!-- Game Logic JavaScript -->\r\n    <script>\r\n        \/\/ Catalog data with Traditional, Simplified, and Multi-language speech translations\r\n        const SIZES = [\r\n            { id: 'large', trad: '\u5927\u676f', simp: '\u5927\u676f', priceAdd: 10, en: 'large', ja: 'L\u30b5\u30a4\u30ba', ko: '\ub77c\uc9c0' },\r\n            { id: 'medium', trad: '\u4e2d\u676f', simp: '\u4e2d\u676f', priceAdd: 0, en: 'medium', ja: 'M\u30b5\u30a4\u30ba', ko: '\ubbf8\ub514\uc5c4' }\r\n        ];\r\n\r\n        const TEA_DRINKS = [\r\n            { id: 'hongcha', trad: '\u7d05\u8336', simp: '\u7ea2\u8336', en: 'black tea', ja: '\u30d6\u30e9\u30c3\u30af\u30c6\u30a3\u30fc', ko: '\ube14\ub799\ud2f0', price: 40 },\r\n            { id: 'lvcha', trad: '\u7da0\u8336', simp: '\u7eff\u8336', en: 'green tea', ja: '\u30b0\u30ea\u30fc\u30f3\u30c6\u30a3\u30fc', ko: '\ub179\ucc28', price: 40 },\r\n            { id: 'wulong', trad: '\u70cf\u9f8d\u8336', simp: '\u4e4c\u9f99\u8336', en: 'oolong tea', ja: '\u30a6\u30fc\u30ed\u30f3\u8336', ko: '\uc6b0\ub871\ucc28', price: 45 },\r\n            { id: 'qingcha', trad: '\u9752\u8336', simp: '\u9752\u8336', en: 'light oolong-style tea', ja: '\u9752\u8336(\u30e9\u30a4\u30c8\u30a6\u30fc\u30ed\u30f3)', ko: '\uccad\ucc28', price: 45 },\r\n            { id: 'sijichun', trad: '\u56db\u5b63\u6625\u8336', simp: '\u56db\u5b63\u6625\u8336', en: 'Four Seasons Spring tea', ja: '\u56db\u5b63\u6625\u8336', ko: '\uc0ac\uacc4\ucd98\ucc28', price: 45 },\r\n            { id: 'asam', trad: '\u963f\u85a9\u59c6\u7d05\u8336', simp: '\u963f\u8428\u59c6\u7ea2\u8336', en: 'Assam black tea', ja: '\u30a2\u30c3\u30b5\u30e0\u7d05\u8336', ko: '\uc544\uc0bc \ud64d\ucc28', price: 45 },\r\n            { id: 'tieguanyin', trad: '\u9435\u89c0\u97f3', simp: '\u94c1\u89c2\u97f3', en: 'Tieguanyin oolong', ja: '\u9244\u89b3\u97f3\u8336', ko: '\ucca0\uad00\uc74c', price: 50 },\r\n            { id: 'dongfang', trad: '\u6771\u65b9\u7f8e\u4eba\u8336', simp: '\u4e1c\u65b9\u7f8e\u4eba\u8336', en: 'Oriental Beauty tea', ja: '\u6771\u65b9\u7f8e\u4eba\u8336', ko: '\ub3d9\ubc29\ubbf8\uc778\ucc28', price: 55 },\r\n            { id: 'molihuacha', trad: '\u8309\u8389\u82b1\u8336', simp: '\u8309\u8389\u82b1\u8336', en: 'jasmine flower tea', ja: '\u30b8\u30e3\u30b9\u30df\u30f3\u8336', ko: '\uc790\uc2a4\ubbfc\ucc28', price: 45 },\r\n            { id: 'maicha', trad: '\u9ea5\u8336', simp: '\u9ea6\u8336', en: 'barley tea', ja: '\u9ea6\u8336', ko: '\ubcf4\ub9ac\ucc28', price: 40 },\r\n            { id: 'puer', trad: '\u666e\u6d31\u8336', simp: '\u666e\u6d31\u8336', en: 'pu-erh tea', ja: '\u30d7\u30fc\u30a2\u30fc\u30eb\u8336', ko: '\ubcf4\uc774\ucc28', price: 45 },\r\n            { id: 'hojicha', trad: '\u7119\u8336', simp: '\u7119\u8336', en: 'roasted green tea', ja: '\u307b\u3046\u3058\u8336', ko: '\ud638\uc9c0\ucc28', price: 50 },\r\n            { id: 'matcha', trad: '\u62b9\u8336', simp: '\u62b9\u8336', en: 'matcha green tea', ja: '\u62b9\u8336', ko: '\ub9d0\ucc28', price: 55 },\r\n            { id: 'rooibos', trad: '\u570b\u5bf6\u8336', simp: '\u56fd\u5b9d\u8336', en: 'rooibos tea', ja: '\u30eb\u30a4\u30dc\u30b9\u30c6\u30a3\u30fc', ko: '\ub8e8\uc774\ubcf4\uc2a4\ucc28', price: 50 },\r\n            { id: 'earlgrey', trad: '\u4f2f\u7235\u8336', simp: '\u4f2f\u7235\u8336', en: 'Earl Grey tea', ja: '\u30a2\u30fc\u30eb\u30b0\u30ec\u30a4', ko: '\uc5bc\uadf8\ub808\uc774', price: 50 },\r\n            { id: 'naicha', trad: '\u5976\u8336', simp: '\u5976\u8336', en: 'milk tea', ja: '\u30df\u30eb\u30af\u30c6\u30a3\u30fc', ko: '\ubc00\ud06c\ud2f0', price: 50 },\r\n            { id: 'xiannaicha', trad: '\u9bae\u5976\u8336', simp: '\u9c9c\u5976\u8336', en: 'fresh milk tea', ja: '\u30d5\u30ec\u30c3\u30b7\u30e5\u30df\u30eb\u30af\u30c6\u30a3\u30fc', ko: '\uc0dd\uc6b0\uc720 \ubc00\ud06c\ud2f0', price: 60 },\r\n            { id: 'yanmainai', trad: '\u71d5\u9ea5\u5976', simp: '\u71d5\u9ea6\u5976', en: 'oat milk', ja: '\u30aa\u30fc\u30c4\u30df\u30eb\u30af', ko: '\uc624\ud2b8\ubc00\ud06c', price: 65 },\r\n            { id: 'shuiguo', trad: '\u6c34\u679c\u8336', simp: '\u6c34\u679c\u8336', en: 'fruit tea', ja: '\u30d5\u30eb\u30fc\u30c4\u30c6\u30a3\u30fc', ko: '\uacfc\uc77c\ud2f0', price: 60 },\r\n            { id: 'duoduolv', trad: '\u591a\u591a\u7da0\u8336', simp: '\u591a\u591a\u7eff\u8336', en: 'green tea with yogurt drink', ja: '\u30e4\u30af\u30eb\u30c8\u7dd1\u8336', ko: '\uc694\uad6c\ub974\ud2b8 \ub179\ucc28', price: 55 }\r\n        ];\r\n\r\n        const TEA_TOPPINGS = [\r\n            { id: 'none', trad: '\u4e0d\u52a0\u6599', simp: '\u4e0d\u52a0\u6599', en: 'no topping', ja: '\u30c8\u30c3\u30d4\u30f3\u30b0\u306a\u3057', ko: '\ud1a0\ud551 \uc5c6\uc74c', price: 0 },\r\n            { id: 'zhenzhu', trad: '\u73cd\u73e0\uff08\u6ce2\u9738\uff09', simp: '\u73cd\u73e0\uff08\u6ce2\u9738\uff09', en: 'tapioca pearls', ja: '\u30bf\u30d4\u30aa\u30ab', ko: '\ud0c0\ud53c\uc624\uce74 \ud384', price: 10 },\r\n            { id: 'xiaozhenzhu', trad: '\u5c0f\u73cd\u73e0\uff0f\u7c89\u5713', simp: '\u5c0f\u73cd\u73e0\uff0f\u7c89\u5706', en: 'small tapioca pearls', ja: '\u30df\u30cb\u30bf\u30d4\u30aa\u30ab', ko: '\ubbf8\ub2c8 \ud0c0\ud53c\uc624\uce74', price: 10 },\r\n            { id: 'yeguo', trad: '\u6930\u679c', simp: '\u6930\u679c', en: 'nata de coco', ja: '\u30ca\u30bf\u30c7\u30b3\u30b3', ko: '\ub098\ud0c0\ucf54\ucf54', price: 10 },\r\n            { id: 'xiancao', trad: '\u4ed9\u8349', simp: '\u4ed9\u8349', en: 'grass jelly', ja: '\u4ed9\u8349\u30bc\u30ea\u30fc', ko: '\uc120\ucd08\uc824\ub9ac', price: 10 },\r\n            { id: 'aiyu', trad: '\u611b\u7389', simp: '\u7231\u7389', en: 'aiyu jelly', ja: '\u611b\u7389\u30bc\u30ea\u30fc', ko: '\uc544\uc774\uc720 \uc824\ub9ac', price: 10 },\r\n            { id: 'puding', trad: '\u5e03\u4e01', simp: '\u5e03\u4e01', en: 'pudding', ja: '\u30d7\u30ea\u30f3', ko: '\ud478\ub529', price: 15 },\r\n            { id: 'hantian', trad: '\u5bd2\u5929', simp: '\u5bd2\u5929', en: 'agar jelly', ja: '\u5bd2\u5929\u30bc\u30ea\u30fc', ko: '\ud55c\ucc9c \uc824\ub9ac', price: 15 },\r\n            { id: 'yuyuan', trad: '\u828b\u5713', simp: '\u828b\u5706', en: 'taro balls', ja: '\u30bf\u30ed\u30a4\u30e2\u56e3\u5b50', ko: '\ud1a0\ub780\ubcfc', price: 15 },\r\n            { id: 'hongdou', trad: '\u7d05\u8c46', simp: '\u7ea2\u8c46', en: 'red beans', ja: '\u5c0f\u8c46', ko: '\ud325', price: 10 },\r\n            { id: 'luhui', trad: '\u8606\u8588', simp: '\u82a6\u835f', en: 'aloe', ja: '\u30a2\u30ed\u30a8', ko: '\uc54c\ub85c\uc5d0', price: 10 },\r\n            { id: 'chadong', trad: '\u8336\u51cd', simp: '\u8336\u51bb', en: 'tea jelly', ja: '\u8336\u30bc\u30ea\u30fc', ko: '\ucc28 \uc824\ub9ac', price: 10 },\r\n            { id: 'kafeidong', trad: '\u5496\u5561\u51cd', simp: '\u5496\u5561\u51bb', en: 'coffee jelly', ja: '\u30b3\u30fc\u30d2\u30fc\u30bc\u30ea\u30fc', ko: '\ucee4\ud53c \uc824\ub9ac', price: 10 },\r\n            { id: 'juruo', trad: '\u849f\u84bb', simp: '\u849f\u84bb', en: 'konjac jelly', ja: '\u3053\u3093\u306b\u3083\u304f\u30bc\u30ea\u30fc', ko: '\uace4\uc57d \uc824\ub9ac', price: 10 },\r\n            { id: 'yanmai', trad: '\u71d5\u9ea5', simp: '\u71d5\u9ea6', en: 'oats', ja: '\u30aa\u30fc\u30c4\u9ea6', ko: '\uc624\ud2b8\ubc00', price: 10 },\r\n            { id: 'naigai', trad: '\u5976\u84cb', simp: '\u5976\u76d6', en: 'cheese-foam topping', ja: '\u30c1\u30fc\u30ba\u30d5\u30a9\u30fc\u30e0', ko: '\uce58\uc988\ud3fc', price: 15 }\r\n        ];\r\n\r\n        const FRUITS = [\r\n            { id: 'ningmeng', trad: '\u6ab8\u6aac', simp: '\u67e0\u6aac', en: 'lemon', ja: '\u30ec\u30e2\u30f3', ko: '\ub808\ubaac', price: 10 },\r\n            { id: 'baixiangguo', trad: '\u767e\u9999\u679c', simp: '\u767e\u9999\u679c', en: 'passion fruit', ja: '\u30d1\u30c3\u30b7\u30e7\u30f3\u30d5\u30eb\u30fc\u30c4', ko: '\ud328\uc158\ud6c4\ub974\uce20', price: 15 },\r\n            { id: 'liucheng', trad: '\u67f3\u6a59', simp: '\u67f3\u6a59', en: 'orange', ja: '\u30aa\u30ec\u30f3\u30b8', ko: '\uc624\ub80c\uc9c0', price: 15 },\r\n            { id: 'putaoyou', trad: '\u8461\u8404\u67da', simp: '\u8461\u8404\u67da', en: 'grapefruit', ja: '\u30b0\u30ec\u30fc\u30d7\u30d5\u30eb\u30fc\u30c4', ko: '\uc790\ubabd', price: 15 },\r\n            { id: 'jinju', trad: '\u91d1\u6854', simp: '\u91d1\u6854', en: 'kumquat', ja: '\u30ad\u30f3\u30ab\u30f3', ko: '\uae08\uade4', price: 10 },\r\n            { id: 'mango', trad: '\u8292\u679c', simp: '\u8292\u679c', en: 'mango', ja: '\u30de\u30f3\u30b4\u30fc', ko: '\ub9dd\uace0', price: 20 },\r\n            { id: 'fengli', trad: '\u9cf3\u68a8', simp: '\u51e4\u68a8', en: 'pineapple', ja: '\u30d1\u30a4\u30ca\u30c3\u30d7\u30eb', ko: '\ud30c\uc778\uc560\ud50c', price: 15 },\r\n            { id: 'caomei', trad: '\u8349\u8393', simp: '\u8349\u8393', en: 'strawberry', ja: '\u30b9\u30c8\u30ed\u30d9\u30ea\u30fc', ko: '\ub538\uae30', price: 20 },\r\n            { id: 'qiyiguo', trad: '\u5947\u7570\u679c', simp: '\u5947\u5f02\u679c', en: 'kiwi', ja: '\u30ad\u30a6\u30a4', ko: '\ud0a4\uc704', price: 20 },\r\n            { id: 'laoli', trad: '\u916a\u68a8', simp: '\u916a\u68a8', en: 'avocado', ja: '\u30a2\u30dc\u30ab\u30c9', ko: '\uc544\ubcf4\uce74\ub3c4', price: 25 },\r\n            { id: 'mugua', trad: '\u6728\u74dc', simp: '\u6728\u74dc', en: 'papaya', ja: '\u30d1\u30d1\u30a4\u30e4', ko: '\ud30c\ud30c\uc57c', price: 20 },\r\n            { id: 'xiangjiao', trad: '\u9999\u8549', simp: '\u9999\u8549', en: 'banana', ja: '\u30d0\u30ca\u30ca', ko: '\ubc14\ub098\ub098', price: 15 },\r\n            { id: 'lanmei', trad: '\u85cd\u8393', simp: '\u84dd\u8393', en: 'blueberry', ja: '\u30d6\u30eb\u30fc\u30d9\u30ea\u30fc', ko: '\ube14\ub8e8\ubca0\ub9ac', price: 25 },\r\n            { id: 'xigua', trad: '\u897f\u74dc', simp: '\u897f\u74dc', en: 'watermelon', ja: '\u30b9\u30a4\u30ab', ko: '\uc218\ubc15', price: 15 }\r\n        ];\r\n\r\n        const SMOOTHIE_BASES = [\r\n            { id: 'guoxi', trad: '\u679c\u6614', simp: '\u679c\u6614', en: 'smoothie', ja: '\u30b9\u30e0\u30fc\u30b8\u30fc', ko: '\uc2a4\ubb34\ub514', price: 60 },\r\n            { id: 'bingsha', trad: '\u51b0\u6c99', simp: '\u51b0\u6c99', en: 'slush', ja: '\u30d5\u30e9\u30c3\u30da', ko: '\uc2ac\ub7ec\uc2dc', price: 55 },\r\n            { id: 'niunai', trad: '\u725b\u5976', simp: '\u725b\u5976', en: 'milk', ja: '\u30df\u30eb\u30af', ko: '\uc6b0\uc720', price: 65 },\r\n            { id: 'yenai', trad: '\u6930\u5976', simp: '\u6930\u5976', en: 'coconut milk', ja: '\u30b3\u30b3\u30ca\u30c3\u30c4\u30df\u30eb\u30af', ko: '\ucf54\ucf54\ub11b \ubc00\ud06c', price: 70 }\r\n        ];\r\n\r\n        const SUGARS = [\r\n            { id: 'quantang', trad: '\u5168\u7cd6', simp: '\u5168\u7cd6', en: 'full sugar', ja: '\u7518\u3055\u666e\u901a(100%)', ko: '100% \ub2f9\ub3c4' },\r\n            { id: 'shaotang', trad: '\u5c11\u7cd6', simp: '\u5c11\u7cd6', en: 'less sugar', ja: '\u7518\u3055\u63a7\u3048\u3081(70%)', ko: '70% \ub2f9\ub3c4' },\r\n            { id: 'bantang', trad: '\u534a\u7cd6', simp: '\u534a\u7cd6', en: 'half sugar', ja: '\u7518\u3055\u534a\u5206(50%)', ko: '50% \ub2f9\ub3c4' },\r\n            { id: 'weitang', trad: '\u5fae\u7cd6', simp: '\u5fae\u7cd6', en: 'slightly sweet', ja: '\u5fae\u7cd6(30%)', ko: '30% \ub2f9\ub3c4' },\r\n            { id: 'wutang', trad: '\u7121\u7cd6', simp: '\u65e0\u7cd6', en: 'no sugar', ja: '\u7121\u7cd6(0%)', ko: '0% \ub2f9\ub3c4' }\r\n        ];\r\n\r\n        const ICES = [\r\n            { id: 'zhengchang', trad: '\u6b63\u5e38\u51b0', simp: '\u6b63\u5e38\u51b0', en: 'regular ice', ja: '\u6c37\u666e\u901a', ko: '\uc77c\ubc18 \uc5bc\uc74c' },\r\n            { id: 'shaobing', trad: '\u5c11\u51b0', simp: '\u5c11\u51b0', en: 'less ice', ja: '\u6c37\u5c11\u306a\u3081', ko: '\uc5bc\uc74c \uc801\uac8c' },\r\n            { id: 'weibing', trad: '\u5fae\u51b0', simp: '\u5fae\u51b0', en: 'very little ice', ja: '\u6c37\u5fae\u5c11', ko: '\uc5bc\uc74c \uc544\uc8fc \uc801\uac8c' },\r\n            { id: 'qubing', trad: '\u53bb\u51b0', simp: '\u53bb\u51b0', en: 'no ice', ja: '\u6c37\u629c\u304d', ko: '\uc5bc\uc74c \uc81c\uc678' },\r\n            { id: 're', trad: '\u71b1\u7684', simp: '\u70ed\u7684', en: 'hot', ja: '\u30db\u30c3\u30c8', ko: '\ub530\ub73b\ud558\uac8c' }\r\n        ];\r\n\r\n        const CUSTOMERS = [\r\n            { name: 'Foreign Guest', avatar: '\ud83d\udc71\u200d\u2642\ufe0f' },\r\n            { name: 'International Friend', avatar: '\ud83d\udc69\u200d\ud83e\uddb0' },\r\n            { name: 'Exchange Student', avatar: '\ud83d\udc68\u200d\ud83c\udfeb' },\r\n            { name: 'World Traveler', avatar: '\ud83d\udc69\u200d\ud83d\udcbc' }\r\n        ];\r\n\r\n        \/\/ Clean UI Translations (EN, JA, KO - Fixed Korean duplication bug)\r\n        const UI_TEXTS = {\r\n            en: {\r\n                bannerTip: 'Tip: For the best artisanal barista training experience, a tablet or desktop screen is recommended.',\r\n                badgeTraining: '10-Order Training',\r\n                subTitle: 'Practice Reading Chinese Beverage Shop Menus \uff5c \u7df4\u7fd2\u770b\u61c2\u4e2d\u6587\u98f2\u6599\u5e97\u83dc\u55ae',\r\n                score: 'Score',\r\n                handbook: 'Handbook',\r\n                startTitle: 'Welcome to Artisanal Barista Training',\r\n                startDesc: 'Foreign patrons will place orders in foreign languages. Complete <span class=\"font-bold text-[#9c7b5b]\">\u301010 Orders\u3011<\/span> per shop to graduate. Accurately replicate their requests on the <span class=\"font-bold text-[#9c7b5b]\">\u3010Strictly Chinese POS Terminal\u3011<\/span>:',\r\n                modeTitleTea: '\u3010Boba Tea Lounge\u3011',\r\n                modeDescTea: '15 tea bases, milk options, cheese-foam & toppings, sweetness & ice levels',\r\n                modeTitleSmoothie: '\u3010Fresh Fruit & Smoothie Bar\u3011',\r\n                modeDescSmoothie: '14 artisanal fruits (pick 1~3), multi-selectable bases (smoothie\/slush\/milk\/coconut milk)',\r\n                currMode: 'Current Shop Mode:',\r\n                modeBtnTea: 'Tea Lounge',\r\n                modeBtnSmoothie: 'Smoothie Bar',\r\n                custOrder: 'Customer Order:',\r\n                receiptTitle: 'Cashier Order Ticket (Chinese)',\r\n                reset: 'Reset',\r\n                confirm: 'Confirm & Serve!',\r\n                posTip: 'Compare with the customer request above and click the corresponding Chinese options on the cashier.',\r\n                sumTitle: 'Congratulations on Completing 10 Orders!',\r\n                totScore: 'Total Score',\r\n                totRev: 'Total Revenue',\r\n                retMenu: 'Return to Shop Selection \ud83d\udd04',\r\n                hbTitle: 'Taiwanese Beverage & Smoothie Study Handbook',\r\n                hbClose: 'Close Handbook',\r\n                sec1: '\ud83c\udf75 Tea Bases (Complete Handbook Collection)',\r\n                sec2: '\ud83e\udd5b Milk & Specials',\r\n                sec3: '\ud83e\uddcb Toppings (Including Cheese-foam)',\r\n                sec4: '\ud83e\udd6d Fruits (14 Types) & Bases (Multi-select)',\r\n                sec5: '\ud83e\uddca Sugar & Ice Levels (Tea Shop)',\r\n                footer: 'Boba & Smoothie Barista Challenge \ud83e\uddcb Mandarin Chinese Order Training Simulation'\r\n            },\r\n            ja: {\r\n                bannerTip: '\u30d2\u30f3\u30c8\uff1a\u6700\u9069\u306a\u30c8\u30ec\u30fc\u30cb\u30f3\u30b0\u4f53\u9a13\u306e\u305f\u3081\u306b\u3001\u30bf\u30d6\u30ec\u30c3\u30c8\u307e\u305f\u306f\u30c7\u30b9\u30af\u30c8\u30c3\u30d7\u753b\u9762\u306e\u4f7f\u7528\u3092\u304a\u52e7\u3081\u3057\u307e\u3059\u3002',\r\n                badgeTraining: '10\u30aa\u30fc\u30c0\u30fc\u7279\u8a13',\r\n                subTitle: '\u53f0\u6e7e\u306e\u30c9\u30ea\u30f3\u30af\u30e1\u30cb\u30e5\u30fc\u306e\u8aad\u307f\u65b9\u3092\u7df4\u7fd2\u3057\u3088\u3046 \uff5c \u7df4\u7fd2\u770b\u61c2\u4e2d\u6587\u98f2\u6599\u5e97\u83dc\u55ae',\r\n                score: '\u30b9\u30b3\u30a2',\r\n                handbook: '\u30cf\u30f3\u30c9\u30d6\u30c3\u30af',\r\n                startTitle: '\u8077\u4eba\u30d0\u30ea\u30b9\u30bf\u30c8\u30ec\u30fc\u30cb\u30f3\u30b0\u3078\u3088\u3046\u3053\u305d',\r\n                startDesc: '\u5916\u56fd\u304b\u3089\u306e\u304a\u5ba2\u69d8\u304c\u5916\u56fd\u8a9e\u3067\u6ce8\u6587\u3057\u307e\u3059\u3002\u5404\u30b7\u30e7\u30c3\u30d7\u3067 <span class=\"font-bold text-[#9c7b5b]\">\u301010\u30aa\u30fc\u30c0\u30fc\u3011<\/span> \u3092\u5b8c\u4e86\u3057\u3066\u5352\u696d\u3057\u3088\u3046\uff01 <span class=\"font-bold text-[#9c7b5b]\">\u3010\u4e2d\u56fd\u8a9e\u5c02\u7528\u306ePOS\u7aef\u672b\u3011<\/span> \u3067\u6ce8\u6587\u3092\u6b63\u78ba\u306b\u518d\u73fe\u3057\u3066\u304f\u3060\u3055\u3044\uff1a',\r\n                modeTitleTea: '\u3010\u30bf\u30d4\u30aa\u30ab\u30df\u30eb\u30af\u30c6\u30a3\u30fc\u30e9\u30a6\u30f3\u30b8\u3011',\r\n                modeDescTea: '15\u7a2e\u985e\u306e\u8336\u8449\u30d9\u30fc\u30b9\u3001\u30df\u30eb\u30af\u3001\u30c1\u30fc\u30ba\u30d5\u30a9\u30fc\u30e0\uff06\u30c8\u30c3\u30d4\u30f3\u30b0\u3001\u7518\u3055\u30fb\u6c37\u306e\u8abf\u6574',\r\n                modeTitleSmoothie: '\u3010\u30d5\u30ec\u30c3\u30b7\u30e5\u30d5\u30eb\u30fc\u30c4\uff06\u30b9\u30e0\u30fc\u30b8\u30fc\u30d0\u30fc\u3011',\r\n                modeDescSmoothie: '14\u7a2e\u985e\u306e\u53b3\u9078\u30d5\u30eb\u30fc\u30c4\uff081\u301c3\u3064\u9078\u629e\uff09\u3001\u8907\u6570\u9078\u629e\u53ef\u80fd\u306a\u30d9\u30fc\u30b9\uff08\u30b9\u30e0\u30fc\u30b8\u30fc\/\u30d5\u30e9\u30c3\u30da\/\u30df\u30eb\u30af\/\u30b3\u30b3\u30ca\u30c3\u30c4\u30df\u30eb\u30af\uff09',\r\n                currMode: '\u73fe\u5728\u306e\u30b7\u30e7\u30c3\u30d7\u30e2\u30fc\u30c9:',\r\n                modeBtnTea: '\u30c6\u30a3\u30fc\u30e9\u30a6\u30f3\u30b8',\r\n                modeBtnSmoothie: '\u30b9\u30e0\u30fc\u30b8\u30fc\u30d0\u30fc',\r\n                custOrder: '\u304a\u5ba2\u69d8\u306e\u6ce8\u6587:',\r\n                receiptTitle: '\u30ec\u30b8\u6ce8\u6587\u4f1d\u7968\uff08\u4e2d\u56fd\u8a9e\uff09',\r\n                reset: '\u30ea\u30bb\u30c3\u30c8',\r\n                confirm: '\u78ba\u8a8d\u3057\u3066\u63d0\u4f9b\uff01',\r\n                posTip: '\u4e0a\u306e\u5ba2\u89b3\u7684\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u6bd4\u8f03\u3057\u3001\u30ec\u30b8\u3067\u5bfe\u5fdc\u3059\u308b\u4e2d\u56fd\u8a9e\u30aa\u30d7\u30b7\u30e7\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u304f\u3060\u3055\u3044\u3002',\r\n                sumTitle: '10\u30aa\u30fc\u30c0\u30fc\u9054\u6210\u304a\u3081\u3067\u3068\u3046\u3054\u3056\u3044\u307e\u3059\uff01',\r\n                totScore: '\u7dcf\u30b9\u30b3\u30a2',\r\n                totRev: '\u7dcf\u58f2\u4e0a',\r\n                retMenu: '\u30b7\u30e7\u30c3\u30d7\u9078\u629e\u306b\u623b\u308b \ud83d\udd04',\r\n                hbTitle: '\u53f0\u6e7e\u30c9\u30ea\u30f3\u30af\u30fb\u30b9\u30e0\u30fc\u30b8\u30fc\u5b66\u7fd2\u30cf\u30f3\u30c9\u30d6\u30c3\u30af',\r\n                hbClose: '\u30cf\u30f3\u30c9\u30d6\u30c3\u30af\u3092\u9589\u3058\u308b',\r\n                sec1: '\ud83c\udf75 \u304a\u8336\u30d9\u30fc\u30b9\uff08\u5b8c\u5168\u7248\u30b3\u30ec\u30af\u30b7\u30e7\u30f3\uff09',\r\n                sec2: '\ud83e\udd5b \u30df\u30eb\u30af\uff06\u7279\u88fd\u30c9\u30ea\u30f3\u30af',\r\n                sec3: '\ud83e\uddcb \u30c8\u30c3\u30d4\u30f3\u30b0\uff08\u30c1\u30fc\u30ba\u30d5\u30a9\u30fc\u30e0\u542b\u3080\uff09',\r\n                sec4: '\ud83e\udd6d \u30d5\u30eb\u30fc\u30c4\uff0814\u7a2e\u985e\uff09\uff06\u30d9\u30fc\u30b9\uff08\u8907\u6570\u9078\u629e\uff09',\r\n                sec5: '\ud83e\uddca \u7518\u3055\u30fb\u6c37\u306e\u30ec\u30d9\u30eb\uff08\u304a\u8336\u5e97\uff09',\r\n                footer: '\u30bf\u30d4\u30aa\u30ab\uff06\u30b9\u30e0\u30fc\u30b8\u30fc\u5e97\u54e1\u30c1\u30e3\u30ec\u30f3\u30b8 \ud83e\uddcb \u53f0\u6e7e\u83ef\u8a9e\u6ce8\u6587\u30c8\u30ec\u30fc\u30cb\u30f3\u30b0\u30b7\u30df\u30e5\u30ec\u30fc\u30b7\u30e7\u30f3'\r\n            },\r\n            ko: {\r\n                bannerTip: '\ud301: \ucd5c\uc801\uc758 \ubc14\ub9ac\uc2a4\ud0c0 \ud2b8\ub808\uc774\ub2dd \uacbd\ud5d8\uc744 \uc704\ud574 \ud0dc\ube14\ub9bf\uc774\ub098 \ub370\uc2a4\ud06c\ud0d1 \ud654\uba74 \uc0ac\uc6a9\uc744 \uad8c\uc7a5\ud569\ub2c8\ub2e4.',\r\n                badgeTraining: '10\uac1c \uc8fc\ubb38 \ud2b8\ub808\uc774\ub2dd',\r\n                subTitle: '\uc911\uad6d\uc5b4 \uc74c\ub8cc \uba54\ub274 \uc77d\uae30 \uc5f0\uc2b5 \uff5c \u7df4\u7fd2\u770b\u61c2\u4e2d\u6587\u98f2\u6599\u5e97\u83dc\u55ae',\r\n                score: '\uc810\uc218',\r\n                handbook: '\ud578\ub4dc\ubd81',\r\n                startTitle: '\uc544\ud2f0\uc0b0 \ubc14\ub9ac\uc2a4\ud0c0 \ud2b8\ub808\uc774\ub2dd\uc5d0 \uc624\uc2e0 \uac83\uc744 \ud658\uc601\ud569\ub2c8\ub2e4',\r\n                startDesc: '\uc678\uad6d\uc778 \uc190\ub2d8\ub4e4\uc774 \uc678\uad6d\uc5b4\ub85c \uc8fc\ubb38\ud569\ub2c8\ub2e4. \uac01 \ub9e4\uc7a5\uc5d0\uc11c <span class=\"font-bold text-[#9c7b5b]\">\u301010\uac1c \uc8fc\ubb38\u3011<\/span> \uc744 \uc644\ub8cc\ud558\uc5ec \uc218\ub8cc\ud558\uc138\uc694. <span class=\"font-bold text-[#9c7b5b]\">\u3010\uc911\uad6d\uc5b4 \uc804\uc6a9 POS \ub2e8\ub9d0\uae30\u3011<\/span> \uc5d0\uc11c \uc694\uccad\uc0ac\ud56d\uc744 \uc815\ud655\ud788 \uc77c\uce58\uc2dc\ud0a4\uc138\uc694:',\r\n                modeTitleTea: '\u3010\ubc84\ube14\ud2f0 \ub77c\uc6b4\uc9c0\u3011',\r\n                modeDescTea: '15\uac00\uc9c0 \ucc28 \ubca0\uc774\uc2a4, \uc6b0\uc720, \uce58\uc988\ud3fc \ubc0f \ud1a0\ud551, \ub2f9\ub3c4 \ubc0f \uc5bc\uc74c \uc870\uc808',\r\n                modeTitleSmoothie: '\u3010\uc0dd\uacfc\uc77c \uc2a4\ubb34\ub514 \ubc14\u3011',\r\n                modeDescSmoothie: '14\uac00\uc9c0 \uc2e0\uc120\ud55c \uacfc\uc77c(1~3\uac1c \uc120\ud0dd), \ubcf5\uc218 \uc120\ud0dd \uac00\ub2a5\ud55c \ubca0\uc774\uc2a4(\uc2a4\ubb34\ub514\/\uc2ac\ub7ec\uc2dc\/\uc6b0\uc720\/\ucf54\ucf54\ub11b \ubc00\ud06c)',\r\n                currMode: '\ud604\uc7ac \ub9e4\uc7a5 \ubaa8\ub4dc:',\r\n                modeBtnTea: '\ud2f0 \ub77c\uc6b4\uc9c0',\r\n                modeBtnSmoothie: '\uc2a4\ubb34\ub514 \ubc14',\r\n                custOrder: '\uc190\ub2d8 \uc8fc\ubb38:',\r\n                receiptTitle: 'POS \uacc4\uc0b0\ub300 \uc8fc\ubb38\uc11c (\uc911\uad6d\uc5b4)',\r\n                reset: '\ucd08\uae30\ud654',\r\n                confirm: '\ud655\uc778 \ubc0f \uc11c\ube59!',\r\n                posTip: '\uc704\uc758 \uc190\ub2d8 \uc694\uccad\uc0ac\ud56d\uc744 \ube44\uad50\ud558\uc5ec \uacc4\uc0b0\ub300\uc5d0\uc11c \ud574\ub2f9\ud558\ub294 \uc911\uad6d\uc5b4 \uc635\uc158\uc744 \ud074\ub9ad\ud558\uc138\uc694.',\r\n                sumTitle: '10\uac1c \uc8fc\ubb38 \uc644\ub8cc\ub97c \ucd95\ud558\ud569\ub2c8\ub2e4!',\r\n                totScore: '\ucd1d \uc810\uc218',\r\n                totRev: '\ucd1d \ub9e4\ucd9c',\r\n                retMenu: '\ub9e4\uc7a5 \uc120\ud0dd\uc73c\ub85c \ub3cc\uc544\uac00\uae30 \ud83d\udd04',\r\n                hbTitle: '\ub300\ub9cc \uc74c\ub8cc \ubc0f \uc2a4\ubb34\ub514 \ud559\uc2b5 \ud578\ub4dc\ubd81',\r\n                hbClose: '\ud578\ub4dc\ubd81 \ub2eb\uae30',\r\n                sec1: '\ud83c\udf75 \ucc28 \ubca0\uc774\uc2a4 (\uc804\uccb4 \ud578\ub4dc\ubd81 \uceec\ub809\uc158)',\r\n                sec2: '\ud83e\udd5b \uc6b0\uc720 \ubc0f \ud2b9\uc120 \uc74c\ub8cc',\r\n                sec3: '\ud83e\uddcb \ud1a0\ud551 (\uce58\uc988\ud3fc \ud3ec\ud568)',\r\n                sec4: '\ud83e\udd6d \uacfc\uc77c (14\uc885) \ubc0f \ubca0\uc774\uc2a4 (\ubcf5\uc218 \uc120\ud0dd)',\r\n                sec5: '\ud83e\uddca \ub2f9\ub3c4 \ubc0f \uc5bc\uc74c \ub808\ubca8 (\ud2f0\uc20d)',\r\n                footer: '\ubc84\ube14\ud2f0 & \uc2a4\ubb34\ub514 \ubc14\ub9ac\uc2a4\ud0c0 \ucc4c\ub9b0\uc9c0 \ud83e\uddcb \ub9cc\ub2e4\ub9b0 \uc911\uad6d\uc5b4 \uc8fc\ubb38 \ud2b8\ub808\uc774\ub2dd \uc2dc\ubbac\ub808\uc774\uc158'\r\n            }\r\n        };\r\n\r\n        \/\/ Game State\r\n        let currentMode = 'tea'; \/\/ 'tea' or 'smoothie'\r\n        let charMode = 'trad';   \/\/ 'trad' or 'simp'\r\n        let appLang = 'en';      \/\/ 'en', 'ja', 'ko'\r\n        let score = 0;\r\n        let money = 0;\r\n        let ordersCount = 0;\r\n        const maxOrders = 10;\r\n        let patienceTimer = null;\r\n        let patienceLeft = 100;\r\n\r\n        let currentOrder = {\r\n            size: null,\r\n            fruits: [],\r\n            bases: [],\r\n            drink: null,\r\n            topping: 'none',\r\n            sugar: null,\r\n            ice: null\r\n        };\r\n\r\n        let targetOrder = {\r\n            size: null,\r\n            fruits: [],\r\n            bases: [],\r\n            drink: null,\r\n            topping: null,\r\n            sugar: null,\r\n            ice: null\r\n        };\r\n\r\n        function getItemName(item) {\r\n            return charMode === 'simp' ? item.simp : item.trad;\r\n        }\r\n\r\n        function setAppLang(lang) {\r\n            appLang = lang;\r\n            ['en', 'ja', 'ko'].forEach(l => {\r\n                const btn = document.getElementById(`lang-btn-${l}`);\r\n                if (btn) {\r\n                    if (l === lang) {\r\n                        btn.className = 'px-2 py-1 rounded-lg bg-[#d4af37] text-[#2c2621] transition cursor-pointer font-bold';\r\n                    } else {\r\n                        btn.className = 'px-2 py-1 rounded-lg text-[#c5b4a2] hover:text-white transition cursor-pointer';\r\n                    }\r\n                }\r\n            });\r\n            updateStaticUI();\r\n            if (targetOrder.size) {\r\n                generateCustomerSpeech();\r\n            }\r\n        }\r\n\r\n        function toggleCharMode() {\r\n            charMode = charMode === 'trad' ? 'simp' : 'trad';\r\n            const charText = document.getElementById('char-mode-text');\r\n            if (charMode === 'trad') {\r\n                charText.innerText = appLang === 'ja' ? '\u7e41\u4f53\u5b57 (Traditional)' : appLang === 'ko' ? '\ubc88\uccb4\uc790 (Traditional)' : '\u7e41\u9ad4\u4e2d\u6587 (Traditional)';\r\n            } else {\r\n                charText.innerText = appLang === 'ja' ? '\u7c21\u4f53\u5b57 (Simplified)' : appLang === 'ko' ? '\uac04\uccb4\uc790 (Simplified)' : '\u7c21\u9ad4\u4e2d\u6587 (Simplified)';\r\n            }\r\n            \r\n            updateStaticUI();\r\n            renderPOSTabs();\r\n            renderPOSOptions();\r\n            renderReceiptTicket();\r\n            updateHandbookNames();\r\n        }\r\n\r\n        function updateHandbookNames() {\r\n            document.querySelectorAll('.item-name').forEach(el => {\r\n                const trad = el.getAttribute('data-trad');\r\n                const simp = el.getAttribute('data-simp');\r\n                el.innerText = charMode === 'simp' ? simp : trad;\r\n            });\r\n        }\r\n\r\n        function updateStaticUI() {\r\n            const t = UI_TEXTS[appLang];\r\n            document.getElementById('banner-tip').innerHTML = t.bannerTip;\r\n            document.getElementById('badge-training').innerText = t.badgeTraining;\r\n            document.getElementById('sub-title').innerText = t.subTitle;\r\n            document.getElementById('lbl-score').innerText = t.score;\r\n            document.getElementById('lbl-handbook').innerText = t.handbook;\r\n            document.getElementById('start-title').innerText = t.startTitle;\r\n            document.getElementById('start-desc').innerHTML = t.startDesc;\r\n            document.getElementById('mode-title-tea').innerText = t.modeTitleTea;\r\n            document.getElementById('mode-desc-tea').innerText = t.modeDescTea;\r\n            document.getElementById('mode-title-smoothie').innerText = t.modeTitleSmoothie;\r\n            document.getElementById('mode-desc-smoothie').innerText = t.modeDescSmoothie;\r\n            document.getElementById('lbl-current-mode').innerText = t.currMode;\r\n            document.getElementById('lbl-cust-order').innerText = t.custOrder;\r\n            document.getElementById('lbl-receipt-title').innerHTML = `<span>\ud83e\uddfe<\/span> ${t.receiptTitle}`;\r\n            document.getElementById('lbl-reset').innerText = t.reset;\r\n            document.getElementById('lbl-confirm').innerText = t.confirm;\r\n            document.getElementById('summary-title').innerText = t.sumTitle;\r\n            document.getElementById('lbl-total-score').innerText = t.totScore;\r\n            document.getElementById('lbl-total-revenue').innerText = t.totRev;\r\n            document.getElementById('lbl-return-menu').innerText = t.retMenu;\r\n            document.getElementById('handbook-title').innerText = t.hbTitle;\r\n            document.getElementById('hb-close').innerText = t.hbClose;\r\n            document.getElementById('hb-sec1').innerText = t.sec1;\r\n            document.getElementById('hb-sec2').innerText = t.sec2;\r\n            document.getElementById('hb-sec3').innerText = t.sec3;\r\n            document.getElementById('hb-sec4').innerText = t.sec4;\r\n            document.getElementById('hb-sec5').innerText = t.sec5;\r\n            document.getElementById('pos-tip').innerText = t.posTip;\r\n            document.getElementById('footer-text').innerText = t.footer;\r\n\r\n            document.getElementById('mode-btn-tea').innerText = t.modeBtnTea;\r\n            document.getElementById('mode-btn-smoothie').innerText = t.modeBtnSmoothie;\r\n\r\n            const charText = document.getElementById('char-mode-text');\r\n            if (charMode === 'trad') {\r\n                charText.innerText = appLang === 'ja' ? '\u7e41\u4f53\u5b57 (Traditional)' : appLang === 'ko' ? '\ubc88\uccb4\uc790 (Traditional)' : '\u7e41\u9ad4\u4e2d\u6587 (Traditional)';\r\n            } else {\r\n                charText.innerText = appLang === 'ja' ? '\u7c21\u4f53\u5b57 (Simplified)' : appLang === 'ko' ? '\uac04\uccb4\uc790 (Simplified)' : '\u7c21\u9ad4\u4e2d\u6587 (Simplified)';\r\n            }\r\n        }\r\n\r\n        function selectGameMode(mode) {\r\n            currentMode = mode;\r\n            startGame();\r\n        }\r\n\r\n        function switchGameMode(mode) {\r\n            currentMode = mode;\r\n            const badgeText = mode === 'tea' ? '\u3010\u73cd\u73e0\u5976\u8336 Lounge\u3011' : '\u3010\u9bae\u679c\u679c\u6614 Bar\u3011';\r\n            document.getElementById('current-mode-badge').innerText = badgeText;\r\n            document.getElementById('header-icon').innerText = mode === 'tea' ? '\ud83e\uddcb' : '\ud83e\udd6d';\r\n\r\n            const t = UI_TEXTS[appLang];\r\n            if (mode === 'tea') {\r\n                document.getElementById('mode-btn-tea').className = 'px-3 py-1.5 text-xs font-bold rounded-xl transition bg-[#2c2621] text-white cursor-pointer';\r\n                document.getElementById('mode-btn-smoothie').className = 'px-3 py-1.5 text-xs font-bold rounded-xl transition bg-[#f0e7dc] text-[#6b5b4d] hover:bg-[#e8ded1] cursor-pointer';\r\n            } else {\r\n                document.getElementById('mode-btn-smoothie').className = 'px-3 py-1.5 text-xs font-bold rounded-xl transition bg-[#3b6e48] text-white cursor-pointer';\r\n                document.getElementById('mode-btn-tea').className = 'px-3 py-1.5 text-xs font-bold rounded-xl transition bg-[#f0e7dc] text-[#6b5b4d] hover:bg-[#e8ded1] cursor-pointer';\r\n            }\r\n            document.getElementById('mode-btn-tea').innerText = t.modeBtnTea;\r\n            document.getElementById('mode-btn-smoothie').innerText = t.modeBtnSmoothie;\r\n\r\n            renderPOSTabs();\r\n            renderPOSOptions();\r\n            resetCurrentOrder();\r\n            loadNewCustomer();\r\n        }\r\n\r\n        function startGame() {\r\n            score = 0;\r\n            money = 0;\r\n            ordersCount = 0;\r\n            updateStats();\r\n\r\n            document.getElementById('start-screen').classList.add('hidden');\r\n            document.getElementById('summary-screen').classList.add('hidden');\r\n            document.getElementById('game-screen').classList.remove('hidden');\r\n\r\n            switchGameMode(currentMode);\r\n        }\r\n\r\n        function returnToMenu() {\r\n            if (patienceTimer) clearInterval(patienceTimer);\r\n            document.getElementById('game-screen').classList.add('hidden');\r\n            document.getElementById('summary-screen').classList.add('hidden');\r\n            document.getElementById('start-screen').classList.remove('hidden');\r\n        }\r\n\r\n        function renderPOSTabs() {\r\n            const tabsContainer = document.getElementById('pos-tabs-container');\r\n            if (currentMode === 'tea') {\r\n                tabsContainer.innerHTML = `\r\n                    <button onclick=\"switchTab('size')\" id=\"tab-size\" class=\"px-3 py-2 font-bold text-xs sm:text-sm rounded-t-xl transition bg-[#2c2621] text-white cursor-pointer shrink-0\">1. \u676f\u578b\u5927\u5c0f<\/button>\r\n                    <button onclick=\"switchTab('drink')\" id=\"tab-drink\" class=\"px-3 py-2 font-bold text-xs sm:text-sm rounded-t-xl transition bg-[#f9f5f0] text-[#6b5b4d] hover:bg-[#f0e7dc] cursor-pointer shrink-0\">2. \u8336\u5e95\/\u5976\u985e<\/button>\r\n                    <button onclick=\"switchTab('topping')\" id=\"tab-topping\" class=\"px-3 py-2 font-bold text-xs sm:text-sm rounded-t-xl transition bg-[#f9f5f0] text-[#6b5b4d] hover:bg-[#f0e7dc] cursor-pointer shrink-0\">3. \u52a0\u6599(\u542b\u5976\u84cb)<\/button>\r\n                    <button onclick=\"switchTab('sugar')\" id=\"tab-sugar\" class=\"px-3 py-2 font-bold text-xs sm:text-sm rounded-t-xl transition bg-[#f9f5f0] text-[#6b5b4d] hover:bg-[#f0e7dc] cursor-pointer shrink-0\">4. \u751c\u5ea6<\/button>\r\n                    <button onclick=\"switchTab('ice')\" id=\"tab-ice\" class=\"px-3 py-2 font-bold text-xs sm:text-sm rounded-t-xl transition bg-[#f9f5f0] text-[#6b5b4d] hover:bg-[#f0e7dc] cursor-pointer shrink-0\">5. \u51b0\u584a<\/button>\r\n                `;\r\n            } else {\r\n                tabsContainer.innerHTML = `\r\n                    <button onclick=\"switchTab('size')\" id=\"tab-size\" class=\"px-3 py-2 font-bold text-xs sm:text-sm rounded-t-xl transition bg-[#3b6e48] text-white cursor-pointer shrink-0\">1. \u676f\u578b\u5927\u5c0f<\/button>\r\n                    <button onclick=\"switchTab('fruit')\" id=\"tab-fruit\" class=\"px-3 py-2 font-bold text-xs sm:text-sm rounded-t-xl transition bg-[#f9f5f0] text-[#6b5b4d] hover:bg-[#f0e7dc] cursor-pointer shrink-0\">2. \u6c34\u679c(1~3\u7a2e)<\/button>\r\n                    <button onclick=\"switchTab('drink')\" id=\"tab-drink\" class=\"px-3 py-2 font-bold text-xs sm:text-sm rounded-t-xl transition bg-[#f9f5f0] text-[#6b5b4d] hover:bg-[#f0e7dc] cursor-pointer shrink-0\">3. \u57fa\u5e95(\u53ef\u8907\u9078)<\/button>\r\n                `;\r\n            }\r\n            renderReceiptTicket();\r\n        }\r\n\r\n        function renderPOSOptions() {\r\n            const sizeContainer = document.getElementById('panel-size');\r\n            sizeContainer.innerHTML = SIZES.map(s => `\r\n                <button onclick=\"selectSize('${s.id}')\" id=\"btn-size-${s.id}\" class=\"p-4 bg-[#f9f5f0] hover:bg-[#f4eee6] border border-[#e5ded4] rounded-2xl flex flex-col items-center justify-center text-center transition active:scale-95 cursor-pointer shadow-xs\">\r\n                    <span class=\"font-black text-[#2c2621] text-base sm:text-lg mb-1\">${getItemName(s)}<\/span>\r\n                    <span class=\"text-xs text-[#8c7a6b]\">${s.priceAdd > 0 ? '(+$'+s.priceAdd+')' : '(Standard)'}<\/span>\r\n                <\/button>\r\n            `).join('');\r\n\r\n            const fruitContainer = document.getElementById('panel-fruit');\r\n            if (fruitContainer) {\r\n                fruitContainer.innerHTML = FRUITS.map(f => `\r\n                    <button onclick=\"toggleFruit('${f.id}')\" id=\"btn-fruit-${f.id}\" class=\"p-3 bg-[#f9f5f0] hover:bg-[#edf4ee] border border-[#e5ded4] rounded-2xl flex flex-col justify-center items-center text-center transition active:scale-95 cursor-pointer shadow-xs\">\r\n                        <span class=\"font-bold text-[#2c2621] text-sm mb-0.5\">\ud83c\udf4e ${getItemName(f)}<\/span>\r\n                        <span class=\"text-xs text-[#8c7a6b] font-mono\">+$${f.price}<\/span>\r\n                    <\/button>\r\n                `).join('');\r\n            }\r\n\r\n            const drinkContainer = document.getElementById('panel-drink');\r\n            if (currentMode === 'tea') {\r\n                drinkContainer.innerHTML = TEA_DRINKS.map(d => `\r\n                    <button onclick=\"selectDrink('${d.id}')\" id=\"btn-drink-${d.id}\" class=\"p-3 bg-[#f9f5f0] hover:bg-[#f4eee6] border border-[#e5ded4] rounded-2xl flex flex-col justify-center items-center text-center transition active:scale-95 cursor-pointer shadow-xs\">\r\n                        <span class=\"font-bold text-[#2c2621] text-sm mb-0.5\">${getItemName(d)}<\/span>\r\n                        <span class=\"text-xs text-[#8c7a6b] font-mono\">$${d.price}<\/span>\r\n                    <\/button>\r\n                `).join('');\r\n            } else {\r\n                drinkContainer.innerHTML = SMOOTHIE_BASES.map(d => `\r\n                    <button onclick=\"toggleBase('${d.id}')\" id=\"btn-base-${d.id}\" class=\"p-3 bg-[#f9f5f0] hover:bg-[#edf4ee] border border-[#e5ded4] rounded-2xl flex flex-col justify-center items-center text-center transition active:scale-95 cursor-pointer shadow-xs\">\r\n                        <span class=\"font-bold text-[#2c2621] text-sm mb-0.5\">${getItemName(d)}<\/span>\r\n                        <span class=\"text-xs text-[#8c7a6b] font-mono\">+$${d.price}<\/span>\r\n                    <\/button>\r\n                `).join('');\r\n            }\r\n\r\n            if (currentMode === 'tea') {\r\n                const toppingContainer = document.getElementById('panel-topping');\r\n                toppingContainer.innerHTML = TEA_TOPPINGS.map(t => `\r\n                    <button onclick=\"selectTopping('${t.id}')\" id=\"btn-topping-${t.id}\" class=\"p-3 bg-[#f9f5f0] hover:bg-[#f4eee6] border border-[#e5ded4] rounded-2xl flex flex-col justify-center items-center text-center transition active:scale-95 cursor-pointer shadow-xs\">\r\n                        <span class=\"font-bold text-[#2c2621] text-xs sm:text-sm mb-0.5\">${getItemName(t)}<\/span>\r\n                        <span class=\"text-xs text-[#8c7a6b] font-mono\">${t.price > 0 ? '+$'+t.price : 'Free'}<\/span>\r\n                    <\/button>\r\n                `).join('');\r\n\r\n                const sugarContainer = document.getElementById('panel-sugar');\r\n                sugarContainer.innerHTML = SUGARS.map(su => `\r\n                    <button onclick=\"selectSugar('${su.id}')\" id=\"btn-sugar-${su.id}\" class=\"p-4 bg-[#f9f5f0] hover:bg-[#f4eee6] border border-[#e5ded4] rounded-2xl flex flex-col items-center justify-center text-center transition active:scale-95 cursor-pointer shadow-xs\">\r\n                        <span class=\"font-bold text-[#2c2621] text-base\">${getItemName(su)}<\/span>\r\n                    <\/button>\r\n                `).join('');\r\n\r\n                const iceContainer = document.getElementById('panel-ice');\r\n                iceContainer.innerHTML = ICES.map(i => `\r\n                    <button onclick=\"selectIce('${i.id}')\" id=\"btn-ice-${i.id}\" class=\"p-4 bg-[#f9f5f0] hover:bg-[#f4eee6] border border-[#e5ded4] rounded-2xl flex flex-col items-center justify-center text-center transition active:scale-95 cursor-pointer shadow-xs\">\r\n                        <span class=\"font-bold text-[#2c2621] text-base\">${getItemName(i)}<\/span>\r\n                    <\/button>\r\n                `).join('');\r\n            }\r\n        }\r\n\r\n        function renderReceiptTicket() {\r\n            const container = document.getElementById('ticket-rows-container');\r\n            if (currentMode === 'tea') {\r\n                container.innerHTML = `\r\n                    <div class=\"flex justify-between bg-[#f9f5f0] p-2.5 rounded-xl border border-[#e5ded4]\">\r\n                        <span class=\"text-[#6b5b4d]\">Size:<\/span>\r\n                        <span id=\"sel-size\" class=\"font-bold text-[#2c2621]\">${currentOrder.size ? getItemName(SIZES.find(s => s.id === currentOrder.size)) : 'Not selected'}<\/span>\r\n                    <\/div>\r\n                    <div class=\"flex justify-between bg-[#f9f5f0] p-2.5 rounded-xl border border-[#e5ded4]\">\r\n                        <span class=\"text-[#6b5b4d]\">Tea\/Milk:<\/span>\r\n                        <span id=\"sel-drink\" class=\"font-bold text-[#2c2621]\">${currentOrder.drink ? getItemName(TEA_DRINKS.find(d => d.id === currentOrder.drink)) : 'Not selected'}<\/span>\r\n                    <\/div>\r\n                    <div class=\"flex justify-between bg-[#f9f5f0] p-2.5 rounded-xl border border-[#e5ded4]\">\r\n                        <span class=\"text-[#6b5b4d]\">Topping:<\/span>\r\n                        <span id=\"sel-extra\" class=\"font-bold text-[#2c2621]\">${currentOrder.topping ? getItemName(TEA_TOPPINGS.find(t => t.id === currentOrder.topping)) : 'Not selected'}<\/span>\r\n                    <\/div>\r\n                    <div class=\"flex justify-between bg-[#f9f5f0] p-2.5 rounded-xl border border-[#e5ded4]\">\r\n                        <span class=\"text-[#6b5b4d]\">Sugar:<\/span>\r\n                        <span id=\"sel-sugar\" class=\"font-bold text-[#2c2621]\">${currentOrder.sugar ? getItemName(SUGARS.find(s => s.id === currentOrder.sugar)) : 'Not selected'}<\/span>\r\n                    <\/div>\r\n                    <div class=\"flex justify-between bg-[#f9f5f0] p-2.5 rounded-xl border border-[#e5ded4]\">\r\n                        <span class=\"text-[#6b5b4d]\">Ice:<\/span>\r\n                        <span id=\"sel-ice\" class=\"font-bold text-[#2c2621]\">${currentOrder.ice ? getItemName(ICES.find(i => i.id === currentOrder.ice)) : 'Not selected'}<\/span>\r\n                    <\/div>\r\n                `;\r\n            } else {\r\n                const fruitNames = currentOrder.fruits.length > 0 ? currentOrder.fruits.map(fId => getItemName(FRUITS.find(f => f.id === fId))).join('\u3001') : 'Not selected';\r\n                const baseNames = currentOrder.bases.length > 0 ? currentOrder.bases.map(bId => getItemName(SMOOTHIE_BASES.find(b => b.id === bId))).join('\u3001') : 'Not selected';\r\n                container.innerHTML = `\r\n                    <div class=\"flex justify-between bg-[#f9f5f0] p-2.5 rounded-xl border border-[#e5ded4]\">\r\n                        <span class=\"text-[#6b5b4d]\">Size:<\/span>\r\n                        <span id=\"sel-size\" class=\"font-bold text-[#2c2621]\">${currentOrder.size ? getItemName(SIZES.find(s => s.id === currentOrder.size)) : 'Not selected'}<\/span>\r\n                    <\/div>\r\n                    <div class=\"flex justify-between bg-[#f9f5f0] p-2.5 rounded-xl border border-[#e5ded4]\">\r\n                        <span class=\"text-[#6b5b4d]\">Fruit (1~3):<\/span>\r\n                        <span id=\"sel-fruit\" class=\"font-bold text-[#2c2621]\">${fruitNames}<\/span>\r\n                    <\/div>\r\n                    <div class=\"flex justify-between bg-[#f9f5f0] p-2.5 rounded-xl border border-[#e5ded4]\">\r\n                        <span class=\"text-[#6b5b4d]\">Bases (Multi):<\/span>\r\n                        <span id=\"sel-base\" class=\"font-bold text-[#2c2621]\">${baseNames}<\/span>\r\n                    <\/div>\r\n                `;\r\n            }\r\n        }\r\n\r\n        function loadNewCustomer() {\r\n            if (ordersCount >= maxOrders) {\r\n                endGame();\r\n                return;\r\n            }\r\n\r\n            ordersCount++;\r\n            updateStats();\r\n            resetCurrentOrder();\r\n\r\n            const cust = CUSTOMERS[Math.floor(Math.random() * CUSTOMERS.length)];\r\n            document.getElementById('customer-name').innerText = cust.name;\r\n            document.getElementById('customer-avatar').innerText = cust.avatar;\r\n\r\n            const randomSize = SIZES[Math.floor(Math.random() * SIZES.length)];\r\n\r\n            if (currentMode === 'tea') {\r\n                const randomDrink = TEA_DRINKS[Math.floor(Math.random() * TEA_DRINKS.length)];\r\n                let randomTopping = TEA_TOPPINGS[0];\r\n                if (Math.random() > 0.3) {\r\n                    randomTopping = TEA_TOPPINGS[Math.floor(Math.random() * (TEA_TOPPINGS.length - 1)) + 1];\r\n                }\r\n                const randomSugar = SUGARS[Math.floor(Math.random() * SUGARS.length)];\r\n                const randomIce = ICES[Math.floor(Math.random() * ICES.length)];\r\n\r\n                targetOrder = {\r\n                    size: randomSize.id,\r\n                    fruits: [],\r\n                    bases: [],\r\n                    drink: randomDrink.id,\r\n                    topping: randomTopping.id,\r\n                    sugar: randomSugar.id,\r\n                    ice: randomIce.id\r\n                };\r\n            } else {\r\n                const numFruits = Math.floor(Math.random() * 3) + 1;\r\n                let shuffledFruits = [...FRUITS].sort(() => 0.5 - Math.random());\r\n                let chosenFruits = shuffledFruits.slice(0, numFruits);\r\n\r\n                const numBases = Math.floor(Math.random() * 2) + 1;\r\n                let shuffledBases = [...SMOOTHIE_BASES].sort(() => 0.5 - Math.random());\r\n                let chosenBases = shuffledBases.slice(0, numBases);\r\n\r\n                targetOrder = {\r\n                    size: randomSize.id,\r\n                    fruits: chosenFruits.map(f => f.id),\r\n                    bases: chosenBases.map(b => b.id),\r\n                    drink: null,\r\n                    topping: 'none',\r\n                    sugar: null,\r\n                    ice: null\r\n                };\r\n            }\r\n\r\n            generateCustomerSpeech();\r\n\r\n            patienceLeft = 100;\r\n            const bar = document.getElementById('patience-bar');\r\n            bar.style.width = '100%';\r\n            bar.className = 'bg-[#87a987] h-full transition-all duration-300';\r\n\r\n            if (patienceTimer) clearInterval(patienceTimer);\r\n\r\n            let timeLeft = 45;\r\n            patienceTimer = setInterval(() => {\r\n                timeLeft -= 0.5;\r\n                patienceLeft = (timeLeft \/ 45) * 100;\r\n                bar.style.width = patienceLeft + '%';\r\n\r\n                if (patienceLeft < 50 && patienceLeft > 25) {\r\n                    bar.className = 'bg-[#d4af37] h-full transition-all duration-300';\r\n                } else if (patienceLeft <= 25) {\r\n                    bar.className = 'bg-[#b85c53] h-full transition-all duration-300 animate-pulse';\r\n                }\r\n\r\n                if (timeLeft <= 0) {\r\n                    clearInterval(patienceTimer);\r\n                    showToast('\u23f0 Customer ran out of patience and left! -20 Score', 'bg-[#fbe8e7] text-[#b85c53] border-[#f2c4c2]');\r\n                    score = Math.max(0, score - 20);\r\n                    updateStats();\r\n                    setTimeout(loadNewCustomer, 1500);\r\n                }\r\n            }, 500);\r\n        }\r\n\r\n        function generateCustomerSpeech() {\r\n            const sizeObj = SIZES.find(s => s.id === targetOrder.size);\r\n            let speech = '';\r\n\r\n            if (currentMode === 'tea') {\r\n                const drinkObj = TEA_DRINKS.find(d => d.id === targetOrder.drink);\r\n                const topObj = TEA_TOPPINGS.find(t => t.id === targetOrder.topping);\r\n                const sugarObj = SUGARS.find(su => su.id === targetOrder.sugar);\r\n                const iceObj = ICES.find(i => i.id === targetOrder.ice);\r\n\r\n                if (appLang === 'en') {\r\n                    speech = `Can I have a ${sizeObj.en} ${drinkObj.en}`;\r\n                    if (topObj.id !== 'none') speech += ` with ${topObj.en}`;\r\n                    speech += `, ${sugarObj.en} and ${iceObj.en}, please?`;\r\n                } else if (appLang === 'ja') {\r\n                    speech = `${sizeObj.ja}\u306e${drinkObj.ja}`;\r\n                    if (topObj.id !== 'none') speech += `\u3001\u30c8\u30c3\u30d4\u30f3\u30b0\u306f${topObj.ja}`;\r\n                    speech += `\u3001\u7518\u3055\u306f${sugarObj.ja}\u3001\u6c37\u306f${iceObj.ja}\u3067\u304a\u9858\u3044\u3057\u307e\u3059\u3002`;\r\n                } else if (appLang === 'ko') {\r\n                    speech = `${sizeObj.ko} \uc0ac\uc774\uc988 ${drinkObj.ko}`;\r\n                    if (topObj.id !== 'none') speech += `, \ud1a0\ud551\uc740 ${topObj.ko}`;\r\n                    speech += `, \ub2f9\ub3c4\ub294 ${sugarObj.ko}, \uc5bc\uc74c\uc740 ${iceObj.ko}(\uc73c)\ub85c \uc8fc\uc138\uc694.`;\r\n                }\r\n            } else {\r\n                const chosenFruits = targetOrder.fruits.map(fId => FRUITS.find(f => f.id === fId));\r\n                const chosenBases = targetOrder.bases.map(bId => SMOOTHIE_BASES.find(b => b.id === bId));\r\n\r\n                if (appLang === 'en') {\r\n                    let fruitList = chosenFruits.map(f => f.en).join(' and ');\r\n                    let baseList = chosenBases.map(b => b.en).join(' and ');\r\n                    speech = `I would like a ${sizeObj.en} ${fruitList} mixed with ${baseList}, please.`;\r\n                } else if (appLang === 'ja') {\r\n                    let fruitList = chosenFruits.map(f => f.ja).join('\u3068');\r\n                    let baseList = chosenBases.map(b => b.ja).join('\u3068');\r\n                    speech = `${sizeObj.ja}\u306e${fruitList}\u3001\u30d9\u30fc\u30b9\u306f${baseList}\u30df\u30c3\u30af\u30b9\u3067\u304a\u9858\u3044\u3057\u307e\u3059\u3002`;\r\n                } else if (appLang === 'ko') {\r\n                    let fruitList = chosenFruits.map(f => f.ko).join(', ');\r\n                    let baseList = chosenBases.map(b => b.ko).join(', ');\r\n                    speech = `${sizeObj.ko} \uc0ac\uc774\uc988 ${fruitList}, \ubca0\uc774\uc2a4\ub294 ${baseList}(\uc73c)\ub85c \ubbf9\uc2a4\ud574\uc11c \uc8fc\uc138\uc694.`;\r\n                }\r\n            }\r\n\r\n            document.getElementById('customer-order-speech').innerText = speech;\r\n        }\r\n\r\n        \/\/ Selection Handlers\r\n        function selectSize(id) {\r\n            currentOrder.size = id;\r\n            highlightSelection('size', id);\r\n            renderReceiptTicket();\r\n        }\r\n\r\n        function toggleFruit(id) {\r\n            const index = currentOrder.fruits.indexOf(id);\r\n            if (index > -1) {\r\n                currentOrder.fruits.splice(index, 1);\r\n            } else {\r\n                if (currentOrder.fruits.length >= 3) {\r\n                    showToast('\u26a0\ufe0f You can select up to 3 fruits!', 'bg-[#fff4e5] text-[#b87d33] border-[#ffe0b2]');\r\n                    return;\r\n                }\r\n                currentOrder.fruits.push(id);\r\n            }\r\n            highlightFruitSelections();\r\n            renderReceiptTicket();\r\n        }\r\n\r\n        function highlightFruitSelections() {\r\n            FRUITS.forEach(f => {\r\n                const btn = document.getElementById(`btn-fruit-${f.id}`);\r\n                if (btn) {\r\n                    if (currentOrder.fruits.includes(f.id)) {\r\n                        btn.classList.add('border-[#3b6e48]', 'bg-[#edf4ee]', 'ring-2', 'ring-[#3b6e48]\/50');\r\n                    } else {\r\n                        btn.classList.remove('border-[#3b6e48]', 'bg-[#edf4ee]', 'ring-2', 'ring-[#3b6e48]\/50');\r\n                    }\r\n                }\r\n            });\r\n        }\r\n\r\n        function toggleBase(id) {\r\n            const index = currentOrder.bases.indexOf(id);\r\n            if (index > -1) {\r\n                currentOrder.bases.splice(index, 1);\r\n            } else {\r\n                if (currentOrder.bases.length >= 4) {\r\n                    showToast('\u26a0\ufe0f You can select up to 4 bases!', 'bg-[#fff4e5] text-[#b87d33] border-[#ffe0b2]');\r\n                    return;\r\n                }\r\n                currentOrder.bases.push(id);\r\n            }\r\n            highlightBaseSelections();\r\n            renderReceiptTicket();\r\n        }\r\n\r\n        function highlightBaseSelections() {\r\n            SMOOTHIE_BASES.forEach(b => {\r\n                const btn = document.getElementById(`btn-base-${b.id}`);\r\n                if (btn) {\r\n                    if (currentOrder.bases.includes(b.id)) {\r\n                        btn.classList.add('border-[#3b6e48]', 'bg-[#edf4ee]', 'ring-2', 'ring-[#3b6e48]\/50');\r\n                    } else {\r\n                        btn.classList.remove('border-[#3b6e48]', 'bg-[#edf4ee]', 'ring-2', 'ring-[#3b6e48]\/50');\r\n                    }\r\n                }\r\n            });\r\n        }\r\n\r\n        function selectDrink(id) {\r\n            currentOrder.drink = id;\r\n            highlightSelection('drink', id);\r\n            renderReceiptTicket();\r\n        }\r\n\r\n        function selectTopping(id) {\r\n            currentOrder.topping = id;\r\n            highlightSelection('topping', id);\r\n            renderReceiptTicket();\r\n        }\r\n\r\n        function selectSugar(id) {\r\n            currentOrder.sugar = id;\r\n            highlightSelection('sugar', id);\r\n            renderReceiptTicket();\r\n        }\r\n\r\n        function selectIce(id) {\r\n            currentOrder.ice = id;\r\n            highlightSelection('ice', id);\r\n            renderReceiptTicket();\r\n        }\r\n\r\n        function highlightSelection(type, id) {\r\n            const container = document.getElementById(`panel-${type}`);\r\n            if (!container) return;\r\n            container.querySelectorAll('button').forEach(btn => {\r\n                btn.classList.remove('border-[#2c2621]', 'bg-[#f0e7dc]', 'ring-2', 'ring-[#2c2621]\/40', 'border-[#3b6e48]', 'bg-[#edf4ee]', 'ring-[#3b6e48]\/50');\r\n            });\r\n            const selectedBtn = document.getElementById(`btn-${type}-${id}`);\r\n            if (selectedBtn) {\r\n                const ringColor = currentMode === 'tea' ? 'ring-[#2c2621]\/40 border-[#2c2621] bg-[#f0e7dc]' : 'ring-[#3b6e48]\/50 border-[#3b6e48] bg-[#edf4ee]';\r\n                selectedBtn.classList.add(...ringColor.split(' '));\r\n            }\r\n        }\r\n\r\n        function clearActiveStyles() {\r\n            const types = currentMode === 'tea' ? ['size', 'drink', 'topping', 'sugar', 'ice'] : ['size', 'fruit', 'drink'];\r\n            types.forEach(type => {\r\n                const container = document.getElementById(`panel-${type}`);\r\n                if (container) {\r\n                    container.querySelectorAll('button').forEach(btn => {\r\n                        btn.classList.remove('border-[#2c2621]', 'bg-[#f0e7dc]', 'ring-2', 'ring-[#2c2621]\/40', 'border-[#3b6e48]', 'bg-[#edf4ee]', 'ring-[#3b6e48]\/50');\r\n                    });\r\n                }\r\n            });\r\n        }\r\n\r\n        function resetCurrentOrder() {\r\n            currentOrder = { size: null, fruits: [], bases: [], drink: null, topping: 'none', sugar: null, ice: null };\r\n            renderReceiptTicket();\r\n            clearActiveStyles();\r\n        }\r\n\r\n        function switchTab(tabName) {\r\n            const tabs = currentMode === 'tea' ? ['size', 'drink', 'topping', 'sugar', 'ice'] : ['size', 'fruit', 'drink'];\r\n            tabs.forEach(t => {\r\n                const panel = document.getElementById(`panel-${t}`);\r\n                const tabBtn = document.getElementById(`tab-${t}`);\r\n                if (panel) panel.classList.add('hidden');\r\n                if (tabBtn) tabBtn.className = 'px-3 py-2 font-bold text-xs sm:text-sm rounded-t-xl transition bg-[#f9f5f0] text-[#6b5b4d] hover:bg-[#f0e7dc] cursor-pointer shrink-0';\r\n            });\r\n            const activePanel = document.getElementById(`panel-${tabName}`);\r\n            const activeTabBtn = document.getElementById(`tab-${tabName}`);\r\n            if (activePanel) activePanel.classList.remove('hidden');\r\n            if (activeTabBtn) {\r\n                const activeColor = currentMode === 'tea' ? 'bg-[#2c2621] text-white' : 'bg-[#3b6e48] text-white';\r\n                activeTabBtn.className = `px-3 py-2 font-bold text-xs sm:text-sm rounded-t-xl transition ${activeColor} cursor-pointer shrink-0`;\r\n            }\r\n        }\r\n\r\n        function submitOrder() {\r\n            let isValid = false;\r\n            if (currentMode === 'tea') {\r\n                isValid = currentOrder.size && currentOrder.drink && currentOrder.topping && currentOrder.sugar && currentOrder.ice;\r\n            } else {\r\n                isValid = currentOrder.size && currentOrder.fruits.length > 0 && currentOrder.bases.length > 0;\r\n            }\r\n\r\n            if (!isValid) {\r\n                showToast('\u26a0\ufe0f Order incomplete! Please ensure all cashier options are selected.', 'bg-[#fff4e5] text-[#b87d33] border-[#ffe0b2]');\r\n                return;\r\n            }\r\n\r\n            clearInterval(patienceTimer);\r\n\r\n            let isCorrect = false;\r\n            if (currentMode === 'tea') {\r\n                isCorrect = \r\n                    currentOrder.size === targetOrder.size &&\r\n                    currentOrder.drink === targetOrder.drink &&\r\n                    currentOrder.topping === targetOrder.topping &&\r\n                    currentOrder.sugar === targetOrder.sugar &&\r\n                    currentOrder.ice === targetOrder.ice;\r\n            } else {\r\n                const targetFruitsSorted = [...targetOrder.fruits].sort().join(',');\r\n                const currentFruitsSorted = [...currentOrder.fruits].sort().join(',');\r\n                const targetBasesSorted = [...targetOrder.bases].sort().join(',');\r\n                const currentBasesSorted = [...currentOrder.bases].sort().join(',');\r\n\r\n                isCorrect = \r\n                    currentOrder.size === targetOrder.size &&\r\n                    currentFruitsSorted === targetFruitsSorted &&\r\n                    currentBasesSorted === targetBasesSorted;\r\n            }\r\n\r\n            if (isCorrect) {\r\n                const sizeObj = SIZES.find(s => s.id === targetOrder.size);\r\n                let earn = 0;\r\n                if (currentMode === 'tea') {\r\n                    const drinkObj = TEA_DRINKS.find(d => d.id === targetOrder.drink);\r\n                    const topObj = TEA_TOPPINGS.find(t => t.id === targetOrder.topping);\r\n                    earn = drinkObj.price + sizeObj.priceAdd + (topObj ? topObj.price : 0);\r\n                } else {\r\n                    let baseSum = targetOrder.bases.reduce((sum, bId) => sum + SMOOTHIE_BASES.find(b => b.id === bId).price, 0);\r\n                    let fruitSum = targetOrder.fruits.reduce((sum, fId) => sum + FRUITS.find(f => f.id === fId).price, 0);\r\n                    earn = baseSum + fruitSum + sizeObj.priceAdd;\r\n                }\r\n\r\n                money += earn;\r\n                score += 100;\r\n                showToast(`\ud83c\udf89 Order Successful! Earned +$${earn}, Score +100 (${ordersCount}\/${maxOrders})`, 'bg-[#edf4ee] text-[#3b6e48] border-[#c2dcc5]');\r\n            } else {\r\n                score = Math.max(0, score - 30);\r\n                showToast('\u274c Incorrect! Cashier selections do not match the customer request. -30 Score', 'bg-[#fbe8e7] text-[#b85c53] border-[#f2c4c2]');\r\n            }\r\n\r\n            updateStats();\r\n            setTimeout(loadNewCustomer, 1600);\r\n        }\r\n\r\n        function updateStats() {\r\n            document.getElementById('score-display').innerText = score;\r\n            document.getElementById('money-display').innerText = money;\r\n            document.getElementById('orders-display').innerText = `${ordersCount}\/${maxOrders}`;\r\n        }\r\n\r\n        function endGame() {\r\n            document.getElementById('game-screen').classList.add('hidden');\r\n            document.getElementById('summary-screen').classList.remove('hidden');\r\n\r\n            document.getElementById('final-score').innerText = score;\r\n            document.getElementById('final-money').innerText = `$${money}`;\r\n\r\n            let rankText = 'Trainee Barista \ud83d\udc25';\r\n            if (score >= 800) rankText = 'Master Tea & Smoothie Artisan \ud83d\udc51\ud83c\udf75';\r\n            else if (score >= 500) rankText = 'Professional Barista \u2b50';\r\n            document.getElementById('summary-rank').innerText = `Completed 10 Orders! Performance Rank: ${rankText}`;\r\n        }\r\n\r\n        function toggleDictionary() {\r\n            const modal = document.getElementById('dictionary-modal');\r\n            modal.classList.toggle('hidden');\r\n        }\r\n\r\n        function dismissMobileWarning() {\r\n            document.getElementById('mobile-warning').classList.add('hidden');\r\n        }\r\n\r\n        function showToast(message, className) {\r\n            const toast = document.getElementById('toast');\r\n            const content = document.getElementById('toast-content');\r\n            document.getElementById('toast-message').innerText = message;\r\n            content.className = `p-4 rounded-2xl shadow-xl border text-center font-bold text-sm sm:text-base flex items-center justify-center gap-2 ${className}`;\r\n            toast.classList.remove('hidden');\r\n            setTimeout(() => {\r\n                toast.classList.add('hidden');\r\n            }, 2500);\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html>\n\n\n\n<ol class=\"wp-block-list\"><div class=\"wp-block-image\">\n<figure class=\"alignright size-medium is-resized\"><a href=\"https:\/\/ko-fi.com\/tiffanystalk\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"58\" src=\"https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2022\/06\/fcacd-buymeacoffee_red402x-300x58.png\" alt=\"\" class=\"wp-image-570\" style=\"width:150px;height:auto\" srcset=\"https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2022\/06\/fcacd-buymeacoffee_red402x-300x58.png 300w, https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2022\/06\/fcacd-buymeacoffee_red402x-600x115.png 600w, https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2022\/06\/fcacd-buymeacoffee_red402x-1024x197.png 1024w, https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2022\/06\/fcacd-buymeacoffee_red402x-768x148.png 768w, https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2022\/06\/fcacd-buymeacoffee_red402x-1536x296.png 1536w, https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2022\/06\/fcacd-buymeacoffee_red402x-2048x394.png 2048w, https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2022\/06\/fcacd-buymeacoffee_red402x-850x164.png 850w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><figcaption class=\"wp-element-caption\">Do you like it? \ud83d\ude42<\/figcaption><\/figure>\n<\/div><\/ol>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ol class=\"wp-block-list\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-medium is-resized\"><a href=\"https:\/\/tiffanysmandarin.com\/index.php\/food-words\/\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"86\" src=\"https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2022\/06\/e68f92e59c963-300x86.png\" alt=\"\" class=\"wp-image-571\" style=\"width:150px;height:43px\" srcset=\"https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2022\/06\/e68f92e59c963-300x86.png 300w, https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2022\/06\/e68f92e59c963-600x171.png 600w, https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2022\/06\/e68f92e59c963.png 700w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/figure>\n<\/div><\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Food Vocabulary \u8336\u6587\u5316\u8336\u6587\u5316 Tea in Chinese One character\u2014\u8336\u8336 (ch\u00e1)\u2014covers everything from a grandmother&#8217;s afternoon pot of oolong to a plastic cup of bubble tea shaken to order on a street corner. This guide walks through both worlds: the traditional tea art and the vocabulary you&#8217;ll need to order your favorite modern drinks. 01 \u2014 \u540d\u8336\u540d\u8336&#8230;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_wp_convertkit_post_meta":{"form":"-1","landing_page":"0","tag":"0","restrict_content":"0"},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1238],"tags":[],"class_list":["post-14626","post","type-post","status-publish","format-standard","hentry","category-food"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Chinese Tea Culture - OneDotDot Chinese<\/title>\n<meta name=\"description\" content=\"Explore Chinese tea culture and learn about traditional tea customs, popular types of Chinese tea, tea vocabulary, and the role of tea in Chinese culture and daily life.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Chinese Tea Culture - OneDotDot Chinese\" \/>\n<meta property=\"og:description\" content=\"Explore Chinese tea culture and learn about traditional tea customs, popular types of Chinese tea, tea vocabulary, and the role of tea in Chinese culture and daily life.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/\" \/>\n<meta property=\"og:site_name\" content=\"OneDotDot Chinese\" \/>\n<meta property=\"article:published_time\" content=\"2026-08-03T00:21:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-10-27T15:29:30+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2022\/06\/fcacd-buymeacoffee_red402x-300x58.png\" \/>\n<meta name=\"author\" content=\"tiffany\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"tiffany\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/tiffanysmandarin.com\\\/index.php\\\/2026\\\/08\\\/03\\\/chinese-tea-culture\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/tiffanysmandarin.com\\\/index.php\\\/2026\\\/08\\\/03\\\/chinese-tea-culture\\\/\"},\"author\":{\"name\":\"tiffany\",\"@id\":\"https:\\\/\\\/tiffanysmandarin.com\\\/#\\\/schema\\\/person\\\/3556e1160fac98b190d03b8aa8604d99\"},\"headline\":\"Chinese Tea Culture\",\"datePublished\":\"2026-08-03T00:21:30+00:00\",\"dateModified\":\"2026-10-27T15:29:30+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/tiffanysmandarin.com\\\/index.php\\\/2026\\\/08\\\/03\\\/chinese-tea-culture\\\/\"},\"wordCount\":559,\"publisher\":{\"@id\":\"https:\\\/\\\/tiffanysmandarin.com\\\/#\\\/schema\\\/person\\\/3556e1160fac98b190d03b8aa8604d99\"},\"image\":{\"@id\":\"https:\\\/\\\/tiffanysmandarin.com\\\/index.php\\\/2026\\\/08\\\/03\\\/chinese-tea-culture\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/tiffanysmandarin.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/fcacd-buymeacoffee_red402x-300x58.png\",\"articleSection\":[\"food\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/tiffanysmandarin.com\\\/index.php\\\/2026\\\/08\\\/03\\\/chinese-tea-culture\\\/\",\"url\":\"https:\\\/\\\/tiffanysmandarin.com\\\/index.php\\\/2026\\\/08\\\/03\\\/chinese-tea-culture\\\/\",\"name\":\"Chinese Tea Culture - OneDotDot Chinese\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/tiffanysmandarin.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/tiffanysmandarin.com\\\/index.php\\\/2026\\\/08\\\/03\\\/chinese-tea-culture\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/tiffanysmandarin.com\\\/index.php\\\/2026\\\/08\\\/03\\\/chinese-tea-culture\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/tiffanysmandarin.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/fcacd-buymeacoffee_red402x-300x58.png\",\"datePublished\":\"2026-08-03T00:21:30+00:00\",\"dateModified\":\"2026-10-27T15:29:30+00:00\",\"description\":\"Explore Chinese tea culture and learn about traditional tea customs, popular types of Chinese tea, tea vocabulary, and the role of tea in Chinese culture and daily life.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/tiffanysmandarin.com\\\/index.php\\\/2026\\\/08\\\/03\\\/chinese-tea-culture\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/tiffanysmandarin.com\\\/index.php\\\/2026\\\/08\\\/03\\\/chinese-tea-culture\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/tiffanysmandarin.com\\\/index.php\\\/2026\\\/08\\\/03\\\/chinese-tea-culture\\\/#primaryimage\",\"url\":\"https:\\\/\\\/tiffanysmandarin.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/fcacd-buymeacoffee_red402x.png\",\"contentUrl\":\"https:\\\/\\\/tiffanysmandarin.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/fcacd-buymeacoffee_red402x.png\",\"width\":3050,\"height\":587},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/tiffanysmandarin.com\\\/index.php\\\/2026\\\/08\\\/03\\\/chinese-tea-culture\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9801\",\"item\":\"https:\\\/\\\/tiffanysmandarin.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Chinese Tea Culture\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/tiffanysmandarin.com\\\/#website\",\"url\":\"https:\\\/\\\/tiffanysmandarin.com\\\/\",\"name\":\"OneDotDot Chinese\",\"description\":\"Learn a little Chinese every day\",\"publisher\":{\"@id\":\"https:\\\/\\\/tiffanysmandarin.com\\\/#\\\/schema\\\/person\\\/3556e1160fac98b190d03b8aa8604d99\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/tiffanysmandarin.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/tiffanysmandarin.com\\\/#\\\/schema\\\/person\\\/3556e1160fac98b190d03b8aa8604d99\",\"name\":\"tiffany\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\\\/\\\/tiffanysmandarin.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/cropped-logo_tiffany2-1.png\",\"url\":\"http:\\\/\\\/tiffanysmandarin.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/cropped-logo_tiffany2-1.png\",\"contentUrl\":\"http:\\\/\\\/tiffanysmandarin.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/cropped-logo_tiffany2-1.png\",\"width\":214,\"height\":214,\"caption\":\"tiffany\"},\"logo\":{\"@id\":\"http:\\\/\\\/tiffanysmandarin.com\\\/wp-content\\\/uploads\\\/2022\\\/06\\\/cropped-logo_tiffany2-1.png\"},\"sameAs\":[\"https:\\\/\\\/www.instagram.com\\\/tiffanys_talk\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/tiffany-huang-mandarin\\\/\"],\"url\":\"https:\\\/\\\/tiffanysmandarin.com\\\/index.php\\\/author\\\/tiffany\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Chinese Tea Culture - OneDotDot Chinese","description":"Explore Chinese tea culture and learn about traditional tea customs, popular types of Chinese tea, tea vocabulary, and the role of tea in Chinese culture and daily life.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/","og_locale":"en_US","og_type":"article","og_title":"Chinese Tea Culture - OneDotDot Chinese","og_description":"Explore Chinese tea culture and learn about traditional tea customs, popular types of Chinese tea, tea vocabulary, and the role of tea in Chinese culture and daily life.","og_url":"https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/","og_site_name":"OneDotDot Chinese","article_published_time":"2026-08-03T00:21:30+00:00","article_modified_time":"2026-10-27T15:29:30+00:00","og_image":[{"url":"http:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2022\/06\/fcacd-buymeacoffee_red402x-300x58.png","type":"","width":"","height":""}],"author":"tiffany","twitter_card":"summary_large_image","twitter_misc":{"Written by":"tiffany","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/#article","isPartOf":{"@id":"https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/"},"author":{"name":"tiffany","@id":"https:\/\/tiffanysmandarin.com\/#\/schema\/person\/3556e1160fac98b190d03b8aa8604d99"},"headline":"Chinese Tea Culture","datePublished":"2026-08-03T00:21:30+00:00","dateModified":"2026-10-27T15:29:30+00:00","mainEntityOfPage":{"@id":"https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/"},"wordCount":559,"publisher":{"@id":"https:\/\/tiffanysmandarin.com\/#\/schema\/person\/3556e1160fac98b190d03b8aa8604d99"},"image":{"@id":"https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/#primaryimage"},"thumbnailUrl":"http:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2022\/06\/fcacd-buymeacoffee_red402x-300x58.png","articleSection":["food"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/","url":"https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/","name":"Chinese Tea Culture - OneDotDot Chinese","isPartOf":{"@id":"https:\/\/tiffanysmandarin.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/#primaryimage"},"image":{"@id":"https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/#primaryimage"},"thumbnailUrl":"http:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2022\/06\/fcacd-buymeacoffee_red402x-300x58.png","datePublished":"2026-08-03T00:21:30+00:00","dateModified":"2026-10-27T15:29:30+00:00","description":"Explore Chinese tea culture and learn about traditional tea customs, popular types of Chinese tea, tea vocabulary, and the role of tea in Chinese culture and daily life.","breadcrumb":{"@id":"https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/#primaryimage","url":"https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2022\/06\/fcacd-buymeacoffee_red402x.png","contentUrl":"https:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2022\/06\/fcacd-buymeacoffee_red402x.png","width":3050,"height":587},{"@type":"BreadcrumbList","@id":"https:\/\/tiffanysmandarin.com\/index.php\/2026\/08\/03\/chinese-tea-culture\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9801","item":"https:\/\/tiffanysmandarin.com\/"},{"@type":"ListItem","position":2,"name":"Chinese Tea Culture"}]},{"@type":"WebSite","@id":"https:\/\/tiffanysmandarin.com\/#website","url":"https:\/\/tiffanysmandarin.com\/","name":"OneDotDot Chinese","description":"Learn a little Chinese every day","publisher":{"@id":"https:\/\/tiffanysmandarin.com\/#\/schema\/person\/3556e1160fac98b190d03b8aa8604d99"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/tiffanysmandarin.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/tiffanysmandarin.com\/#\/schema\/person\/3556e1160fac98b190d03b8aa8604d99","name":"tiffany","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2022\/06\/cropped-logo_tiffany2-1.png","url":"http:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2022\/06\/cropped-logo_tiffany2-1.png","contentUrl":"http:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2022\/06\/cropped-logo_tiffany2-1.png","width":214,"height":214,"caption":"tiffany"},"logo":{"@id":"http:\/\/tiffanysmandarin.com\/wp-content\/uploads\/2022\/06\/cropped-logo_tiffany2-1.png"},"sameAs":["https:\/\/www.instagram.com\/tiffanys_talk\/","https:\/\/www.linkedin.com\/in\/tiffany-huang-mandarin\/"],"url":"https:\/\/tiffanysmandarin.com\/index.php\/author\/tiffany\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/tiffanysmandarin.com\/index.php\/wp-json\/wp\/v2\/posts\/14626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tiffanysmandarin.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tiffanysmandarin.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tiffanysmandarin.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tiffanysmandarin.com\/index.php\/wp-json\/wp\/v2\/comments?post=14626"}],"version-history":[{"count":8,"href":"https:\/\/tiffanysmandarin.com\/index.php\/wp-json\/wp\/v2\/posts\/14626\/revisions"}],"predecessor-version":[{"id":18686,"href":"https:\/\/tiffanysmandarin.com\/index.php\/wp-json\/wp\/v2\/posts\/14626\/revisions\/18686"}],"wp:attachment":[{"href":"https:\/\/tiffanysmandarin.com\/index.php\/wp-json\/wp\/v2\/media?parent=14626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tiffanysmandarin.com\/index.php\/wp-json\/wp\/v2\/categories?post=14626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tiffanysmandarin.com\/index.php\/wp-json\/wp\/v2\/tags?post=14626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}